• Registered: 2013-01-26
  • Posts: 5

Topic: Top Navigation Not Displaying in Explorer 8 and 9

I am trying to embed multiple galleries on separate pages like this example:
http://www.juicebox.net/demos/support/m … /gallery1/

However, the top navigation is not displaying in Explorer 8 or 9. I have done the following to troubleshoot the issue:

1. The FAQ about the "gallery not displaying properly in Explorer 9" indicates to check the doc type. I originally had the doctype set for HTML 5. It appeared to be set correctly, but the top navigation would not display in Explorer.

2. The FAQ for multiple galleries indicated that I should view the source code in the link above and use that as a guide. As a result, I changed my HTML doctype to XHTML 1.0 Transitional. I have left it set like that, but the top navigation is still not displaying in Explorer 8 or 9.

3. Another FAQ suggested that I validate the html which I did with the doctype set for both HTML 5 and XHTML 1.0 Transitional. The page passed for both doctypes.

Here is a link to my page which is displaying without any issues in Firefox and Chrome:
http://www.dominioncraftsman.com/galler … llery.html

I'd appreciate any assistance that you could provide to fix this issue in Explorer.  Thank you!

  • Registered: 2013-02-01
  • Posts: 16

Re: Top Navigation Not Displaying in Explorer 8 and 9

Obviously, the gallery is displaying just fine, but it sits on top of your navigation (instead of below it).
I'd try to style your juicebox-container with something like

position: absolute;
top: 50px;

or, if that does't work, float your header like this:

float:left;
clear:both;

Christoph

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Top Navigation Not Displaying in Explorer 8 and 9

If you would like your gallery's height to be 600px, then, rather than using:

#juicebox-container {
    width: 100%;
    height: 600px;
}

<script>
    new juicebox({
    containerId : 'juicebox-container',
    galleryWidth: '100%',
    galleryHeight: '100%',
    backgroundColor: '#222222'
    });
</script>
<div id="juicebox-container"></div>

... just set the gallery's height in the embedding code:

<script>
    new juicebox({
    containerId : 'juicebox-container',
    galleryWidth: '100%',
    galleryHeight: '600',
    backgroundColor: '#222222'
    });
</script>
<div id="juicebox-container"></div>

Also, if you would like to have a header on your web page and then have your Juicebox-Pro gallery fill the remainder of the user's browser window (with no vertical scroll bars), please see the Using a Resizable Gallery with a Header example in the Juicebox Embedding Guide.

  • Registered: 2013-01-26
  • Posts: 5

Re: Top Navigation Not Displaying in Explorer 8 and 9

Thank you both for your replies.

I had been following the "Multiple Galleries on Separate HTML Pages" as my example. Once I switched to the source code in "Using a Resizable Gallery with a Header," I was able to get it to work in Explorer.

I appreciate the assistance.

5 Reply by stuart141simon (edited by stuart141simon 2013-02-04 18:29:42)

  • Registered: 2013-02-04
  • Posts: 3

Re: Top Navigation Not Displaying in Explorer 8 and 9

It seems to me that the Embedding a Resizable Gallery example is a case where the gallery HTML page created by Juicebox was modified directly (i.e., not embedded: its original file name was index.html). If this is true, then it would explain the source of confusion I am having with creating its likeness. Likewise, it is unclear which lines of code are invoking jQuery. From the documentation of jQuery I have seen, the use of jQuery requires the invocation of an external file called jquery.js. Yet that does not appear in the source code here. Can somebody please give me a step-by-step to doing this from the ground up?

  • Registered: 2012-04-24
  • Posts: 5,906

Re: Top Navigation Not Displaying in Explorer 8 and 9

From the documentation of jQuery I have seen, the use of jQuery requires the invocation of an external file called jquery.js. Yet that does not appear in the source code here.

jQuery is incorporated within the 'juicebox.js' file.

Can somebody please give me a step-by-step to doing this from the ground up?

Try this:
(1) Paste the code below into a file named, for example, 'main.html'.
(2) Include a complete gallery folder (in this example, named 'mygallery') in the same directory as the 'main.html' file.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        html, body { height: 100%; overflow: hidden; }
        body {            
          margin: 0;
          padding: 0;
          background-color: #222;
          color: #666;
          font-family: sans-serif;
          font-size: 20px;        
        }
        a {    
          color: #ccc;
        }
        #header {
          text-align: center;
          background-color: #333;
          width: 100%;
          height: 20px;
          padding: 10px 0;
        }
        #footer {
          text-align: center;
          background-color: #333;
          color: #fff;
          width: 100%;
          height: 20px;
          padding: 10px 0;
          position: relative;
          bottom: 0;
          left: 0;
        }
        #juicebox-content {
          width: 100%;
          height: 600px;
        }    
    </style>
    <title>Juicebox Gallery</title>
    <script type="text/javascript" src="mygallery/jbcore/juicebox.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, headerHeight, footerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        headerHeight = $('#header').outerHeight();
        footerHeight = $('#footer').outerHeight();
        var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
        $('#juicebox-content').height(newH);
    }
    $(document).ready(function () {
        doLayout();
        $(window).bind('resize', doLayout);
        new juicebox({
            baseUrl: 'mygallery/',
            containerid : 'juicebox-container'
        });
    });
    </script>
</head>
<body>
    <div id="header">This is the header.</div>
    <div id="juicebox-content">
        <div id="juicebox-container"></div>
    </div>
    <div id="footer">This is the footer.</div>
</body>
</html>

All you would then need to do is:
(1) Set the height for the header and/or footer in the CSS section of the 'main.html' page as appropriate for your own code.
(2) Swap the content of the 'header' and/or 'footer' <div>s with your own code.
(3) Make sure that the two instances of 'mygallery' in the 'main.html' file match the actual name of your own gallery folder.