Topic: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

Using Chrome (33.0.1750.117) in particular, on my PC (Vista Home Premium SP2 32-bit), if I attempt to look at some of my Juicebox galleries I get a blank screen with the following message:

Juicebox Error: Cannot find div with id: "juicebox-container"

I also sometimes seem to encounter this problem in Firefox (27.0.1), although Firefox does not seem to deliver this message, but rather seems to just not load the page.

This problem goes away with a simple refresh (F5) of the gallery in question. I have cleared the cache, etc., in Chrome completely, to no avail.

These pages pass W3C's HTML and CSS validators, and I am using the latest version of JB.

A sample gallery, one I've encountered this problem with, is http://www.billanddot.com/victory-xct-p … ide-cover/

I was unable to find a similar report using the search feature here, but maybe I missed something. Any suggestions, comments, similar reports?

Cheers,

Bill

Re: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

It sounds like the problem may be with your browser timing out whilst loading the page (which may be due to a temporary glitch with either your web server or internet connection).

I have just viewed your gallery in Firefox 27.0.1, Chrome 33, Safari 5.1.7, IE11 and Opera 19.0 and it displays and functions OK in all browsers on my PC.

If you continue to experience this issue, try one of the following (although it really should not make a difference as Juicebox should take care of this internally).

(1) Try putting the JavaScript embedding code after the <div id="juicebox-container"></div> line in your web page.

(2) Try enclosing the JavaScript embedding code in a jQuery $(document).ready() function:

$(document).ready(function() {
    new juicebox({
        backgroundColor: "rgba(51, 51, 51, 1.0)",
        configUrl: "config.xml",
        containerId: "juicebox-container",
        galleryHeight: "100%",
        galleryWidth: "100%",
        themeUrl: "res/juicebox/jbcore/classic/theme.css"
    });
});

Neither of the above should be necessary but if the page is not timing out (which may be the most likely explanation for the problem), then they would certainly be things to try to resolve the Juicebox Error: Cannot find div with id: "juicebox-container".

Re: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

Steven, thanks for your help. I tried suggestion 2 (see http://www.billanddot.com/victory-xct/i … ction.html ), but it doesn't load at all -- no error message, refresh doesn't help.

Re suggestion 1, I don't really understand it.

I use Firefox as my default browser, but my experimenting with Chrome 33 brought up this problem. With Chrome, my results -- with the normal code (I'm using http://www.billanddot.com/victory-xct/ now) -- are just plain inconsistent. I run Chrome, enter that URL, and often get that error message. Then I click on refresh, and it's always OK. Then I completely shut down Chrome, wait a bit, and run Chrome again. And repeat the test; sometimes it works OK, and sometimes I get the error.

I have a high-speed fiber-optic connection to my house (c. 60mbps download, c. 30mbps upload). My hosting service is Bluehost.com, a couple thousand miles west of me. I pay the minimum, so I don't have a dedicated server machine, but the load times of all my sites -- after I clear my cache and history -- seem reasonable to me.

Yeah, this looks like a timing issue to me, but I'm not sure regarding the timing of what.

Bill

Re: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

Re suggestion 1, I don't really understand it.

Suggestion #1 was essentially to move the position of the gallery's embedding code from the <head> section of your web page to below the Juicebox containerId div, ie. change:

<!DOCTYPE html>
<html lang="en">
        <!-- saved from url=(0014)about:internet -->
<head>
            <meta charset="UTF-8" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
            <script type="text/javascript"><!--//--><![CDATA[//><!--
                            new juicebox({
                                backgroundColor: "rgba(51, 51, 51, 1.0)",
                                configUrl: "config.xml",
                                containerId: "juicebox-container",
                                galleryHeight: "100%",
                                galleryWidth: "100%",
                                themeUrl: "res/juicebox/jbcore/classic/theme.css"
                            });
            //--><!]]></script>
            <style type="text/css"><!--/*--><![CDATA[/*><!--*/
                body
                {
                    background-color: #333333;
                    margin: 0;
                }
                body, html
                {
                    overflow: hidden;
                }
            /*]]>*/--></style>
            <title>Victory Powerlet in Side Cover</title>
        </head>
        <body>
                    <div id="juicebox-container"></div>
</body>
    </html>

... to:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
        <style type="text/css">
            body {
                background-color: #333333;
                margin: 0;
            }
                body, html {
                overflow: hidden;
            }
        </style>
        <title>Victory Powerlet in Side Cover</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
        <script type="text/javascript">
            new juicebox({
                backgroundColor: "rgba(51, 51, 51, 1.0)",
                configUrl: "config.xml",
                containerId: "juicebox-container",
                galleryHeight: "100%",
                galleryWidth: "100%",
                themeUrl: "res/juicebox/jbcore/classic/theme.css"
            });
        </script>
    </body>
</html>

My reasoning was that if Juicebox cannot find the specified containerId, then this implies that:
(1) The Juicebox embedding code must have been run (for it to look for the containerId), and...
(2) The containerId cannot be found on the page, perhaps due to a timing or server issue resulting in the entire page not being loaded and the containerId not being included in the DOM.
Juicebox should load itself into the containerId only when the document is ready and the DOM is complete.
However, placing the embedding code after the containerId div in your web page should ensure that you do not run into the Cannot find div with id: "juicebox-container" error message as the containerId will already have been included in the DOM when the embedding code is run (although if the root problem still exists and the page fails to load correctly for whatever reason, then the gallery may still not display).

Your inconsistent results make me think that the problem may lie with your web server or internet connection.
If the code on your web page does not change and your browser remains constant, then the gallery should load each and every time.
Essentially, the only two variables in the equation are your web server and internet connection.
As I am able to view your gallery in all browsers and have not yet seen the error message you report, then this suggests that your web server is OK and that your internet connection may be a possible cause.
Try my Suggestion #1 above to see if this helps.

Re: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

Steven:

Mark this "[Solved]," please. The server and connection speeds were red herrings. Well, they may have come into play -- you know infinitely more about this sort of thing than I do -- but they weren't the real problem.

A little over a month ago, I switched from a free anti-virus, etc., system to a paid suite from Bitdefender. It turns out that if you have the setting Privacy --> Antiphishing --> Show Bitdefender Toolbar set to "On," Bitdefender -- and, yes, I find this hard to believe myself -- inserts code into (at least some) downloaded web pages! In this particular case (my experimenting very carefully this morning with http://www.billanddot.com/victory-xct/ ), it changed...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <!-- saved from url=(0014)about:internet -->
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            
                <meta name="apple-mobile-web-app-capable" content="yes" />
            <script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
            <script type="text/javascript"><!--//--><![CDATA[//><!--
                            new juicebox({
                                backgroundColor : "rgba(51, 51, 51, 1.0)",
                                configUrl: "config.xml",
                                containerId: "juicebox-container",
                                galleryHeight: "100%",
                                galleryWidth: "100%",
                                themeUrl: "res/juicebox/jbcore/classic/theme.css"
                            });
            //--><!]]></script>
            <style type="text/css"><!--/*--><![CDATA[/*><!--*/
                body
                {
                    background-color: #333333;
                    margin: 0;
                }
                body, html
                {
                    overflow: hidden;
                }
            /*]]>*/--></style>
            <title>2012 Victory Cross Country Tour</title>
        </head>
        <body>
                    <div id="juicebox-container"></div>
</body>
    </html>

...to, in one such test (scroll to the bottom of the code)...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <!-- saved from url=(0014)about:internet -->
<head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            
                <meta name="apple-mobile-web-app-capable" content="yes" />
            <script type="text/javascript" src="res/juicebox/jbcore/juicebox.js" charset="utf-8"></script>
            <script type="text/javascript"><!--//--><![CDATA[//><!--
                            new juicebox({
                                backgroundColor : "rgba(51, 51, 51, 1.0)",
                                configUrl: "config.xml",
                                containerId: "juicebox-container",
                                galleryHeight: "100%",
                                galleryWidth: "100%",
                                themeUrl: "res/juicebox/jbcore/classic/theme.css"
                            });
            //--><!]]></script>
            <style type="text/css"><!--/*--><![CDATA[/*><!--*/
                body
                {
                    background-color: #333333;
                    margin: 0;
                }
                body, html
                {
                    overflow: hidden;
                }
            /*]]>*/--></style>
            <title>2012 Victory Cross Country Tour</title>
        <script type="text/javascript"></script><link rel='stylesheet' type='text/css' href='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.css' /></head>
        <body><script type='text/javascript' language='javascript' src='/B1D671CF-E532-4481-99AA-19F420D90332/netdefender/hui/ndhui.js?0=0&amp;0=0&amp;0=0'></script>
                    <div id="juicebox-container"></div>
</body>
    </html>

I downloaded and installed a couple of sniffer programs, but all I had to do was a simple View Page Source to discover this. Sorry about that, but who knew?

BTW, I was experimenting with the latest versions of Chrome and Firefox. What I was doing this morning was clearing each browser's history (for "Today" in FF, my default browser, and since "the beginning of time" in Chrome), and then attempting to load that page. In my testing this morning, I was consistently getting that problem, with Chrome displaying that error message and FF just sitting there, not displaying anything except the background color. As before, an F5 then eliminated the problem each time (in either browser). Following that testing, turning that option off in Bitdefender left the HTML code alone, and the problem went away.

Searching Bitdefender forums reveals complaints about this "feature," but nothing I could find was terribly recent, nor did I stumble across any post where someone reported that it can prevent a page from loading properly. I'll look a bit more, and add my own post there if I don't find anything like that. (Bitdefender seems like a nice suite in other respects, BTW, and gets good marks from testing services, is very quick in its scans, and was cheap enough. And I believe I'm just past the get-your-money-back period, so I guess I'll keep it.)

Bottom line: if anyone else gets that error message, ask if he or she is using Bitdefender and has that toolbar option on, and have the poster take a look at the page source in the browser.

Thanks, as always, for your time and support.

Bill

Re: Juicebox Error: Cannot find div with id: "juicebox-container" [SOLVED]

I'm glad you have been able to resolve your problem.
Thank you for taking the time to post information about the solution.
Hopefully it will help others facing the same issue.
I have marked this thread as [SOLVED] as requested.