remove body css. add some HTML to embedded multiple instances example…

…. position property on the Mirador element should not be set in the JS, but externally in the HTML/CSS that uses Mirador
sirmaenterprise · Jul 20, 2016 · 2631810 · 2631810
1 parent a8fe2a5
commit 2631810
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 23 deletions.
diff --git a/css/mirador.css b/css/mirador.css
@@ -1,8 +1,3 @@
-body { 
-  padding: 0; 
-  margin: 0; 
-  overflow: hidden; 
-}
 a {
   color: inherit; /* blue colors for links too */
   text-decoration: inherit; /* no underline */
@@ -86,9 +81,9 @@ a {
   #load-controls form {
     float: none;
   }
-  
+
   #url-load-form {
-    margin-bottom: 5px; 
+    margin-bottom: 5px;
   }
 }
 
@@ -485,7 +480,7 @@ li.highlight {
   margin-right: 6px;
 }
 #url-load-form {
-  float: right; 
+  float: right;
 }
 #url-load-form input[type="text"] {
   width: 250px;
@@ -500,7 +495,7 @@ li.highlight {
   color:black;
 }
 #manifest-search-form input:focus, #url-load-form input:focus,
-#manifest-search-form input:focus, 
+#manifest-search-form input:focus,
 #url-load-form input:focus,
 #url-load-form input[type="submit"]:hover{
   outline:none;
@@ -908,10 +903,10 @@ li.highlight {
   font-weight: bold;
 }
 
-/* 
+/*
 .toc li:hover > h2 a {
-  font-weight: bold; 
-} 
+  font-weight: bold;
+}
 */
 .view-container {
   margin-left: 280px;
@@ -1874,10 +1869,10 @@ a.mirador-icon-window-menu, a.mirador-icon-view-type {
   width: 30px;
 }
 
-.mirador-viewer a.mirador-icon-view-type:hover, 
-.mirador-viewer a.mirador-icon-metadata-view:hover, 
-.mirador-viewer a.mirador-icon-empty-slot:hover, 
-.mirador-viewer a.mirador-icon-window-menu:hover, 
+.mirador-viewer a.mirador-icon-view-type:hover,
+.mirador-viewer a.mirador-icon-metadata-view:hover,
+.mirador-viewer a.mirador-icon-empty-slot:hover,
+.mirador-viewer a.mirador-icon-window-menu:hover,
 .mirador-viewer a.mirador-icon-toc:hover,
 .mirador-viewer a.mirador-osd-fullscreen:hover {
   color: black;

diff --git a/examples/embedded-multiple-instances/embedded.css b/examples/embedded-multiple-instances/embedded.css
@@ -8,13 +8,12 @@
 }
 
 .mirador_viewer {
-  display: block !important;
-  position: absolute !important;
+  position: absolute;
   width: 100%;
   top: 0;
   bottom: 0;
 }
 
 h1 {
   margin-left: 10px;
-}
+}
diff --git a/examples/embedded-multiple-instances/index.html b/examples/embedded-multiple-instances/index.html
@@ -12,10 +12,39 @@
 </head>
 <body>
   <h1>Mirador Embedded</h1>
-  
+
   <div class="mirador_container">
     <div id="mirador_viewer_1" class="mirador_viewer"></div>
   </div>
+
+  <h1>HTML Ipsum Presents</h1>
+
+  <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
+
+  <h2>Header Level 2</h2>
+
+  <ol>
+     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+     <li>Aliquam tincidunt mauris eu risus.</li>
+  </ol>
+
+  <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
+
+  <h3>Header Level 3</h3>
+
+  <ul>
+     <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+     <li>Aliquam tincidunt mauris eu risus.</li>
+  </ul>
+
+  <pre><code>
+  #header h1 a {
+  	display: block;
+  	width: 300px;
+  	height: 80px;
+  }
+  </code></pre>
+
   <div class="mirador_container">
     <div id="mirador_viewer_2" class="mirador_viewer"></div>
   </div>

diff --git a/index.html b/index.html
@@ -6,7 +6,11 @@
     <link rel="stylesheet" type="text/css" href="build/mirador/css/mirador-combined.css">
     <title>Mirador Viewer</title>
     <style type="text/css">
-     #viewer {  width: 100%; height: 100%; }
+     #viewer {
+       width: 100%;
+       height: 100%;
+       position: fixed;
+     }
     </style>
   </head>
   <body>

diff --git a/js/src/viewer.js b/js/src/viewer.js
@@ -59,7 +59,7 @@
       //add background and positioning information on the root element that is provided in config
       var backgroundImage = _this.state.getStateProperty('buildPath') + _this.state.getStateProperty('imagesPath') + 'debut_dark.png';
       this.element.css('background-color', '#333').css('background-image','url('+backgroundImage+')').css('background-position','left top')
-      .css('background-repeat','repeat').css('position','fixed');
+      .css('background-repeat','repeat');
 
       //register Handlebars helper
       Handlebars.registerHelper('t', function(i18n_key) {
@@ -295,7 +295,7 @@
       var windowConfig = jQuery.extend(true, {}, options);
       //delete this old set of options (because they will be replaced by the actions from ADD_WINDOW)
       _this.eventEmitter.publish('DELETE_FROM_CONFIG', options);
-      
+
       _this.eventEmitter.publish('ADD_WINDOW', windowConfig);
     }
   };