Changeset 32666 for main

Timestamp:

2018-12-10T13:15:41+13:00 (5 years ago)

Author:

kjdon

Message:

when viewing an image with zoom enabled, and the image doesn't fit into the space beside the sidebar box, then the image moves underneath. Fine, except that the divs for the zoom functionality don't move with it. The next seciton title ends up underneath the image, and the zooming thing doesn't line up with the actual image. Added javascript to put a div style=clear:both; before the image if its needed. This moved everything down underneath the side bar.

File:

• main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl (modified) (1 diff)

main/trunk/greenstone3/web/interfaces/default/transform/pages/document.xsl

@@ -554 +554 @@
 
         <xsl:choose>
-            <xsl:when test="metadataList/metadata[@name = 'Screen'] and metadataList/metadata[@name = 'SourceFile'] and ($imageWidth div $screenImageWidth > 1.2) and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='disableZoom']) or /page/pageResponse/format[@type='display']/gsf:option[@name='disableZoom']/@value='false')">
+          <xsl:when test="metadataList/metadata[@name = 'Screen'] and metadataList/metadata[@name = 'SourceFile'] and ($imageWidth div $screenImageWidth > 1.2) and (not(/page/pageResponse/format[@type='display']/gsf:option[@name='disableZoom']) or /page/pageResponse/format[@type='display']/gsf:option[@name='disableZoom']/@value='false')">
+            <div id="tidyDiv"/>
+            <!-- adding a div with clear:both when the image doesn't nicely fit in beside the side bar. Otherwise, the divs stays up, but the image moves down and everything looks and acts weird. -->
+            <script type="text/javascript">
+              <xsl:text disable-output-escaping="yes">
+            
+            var containerWidth = document.getElementById("container").offsetWidth;
+            var sidebarWidth = document.getElementById("rightSidebar").offsetWidth;
+            if (containerWidth - sidebarWidth &lt; </xsl:text><xsl:value-of select="$screenImageWidth"/><xsl:text disable-output-escaping="yes">) {
+              $("#tidyDiv").css("clear", "both");
+            }
+              </xsl:text>
+            </script>
                 <div id="image{@nodeID}">
                   <!-- when we ask for an individual section content we set ed=1. putting this test here prevents downloading all the screen and full images for each section of the document when we are just looking at the contents list. ed is not set for simple docs, so do this if doctype is simple -->