Topic: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

I get a grey screen with only this error in the middle Juicebox Error: Cannot find div with id: "juicebox-container" when going to this page in firefox:

https://www.superiorfleetbodyrepair.com/photogallery/

It works fine in chrome and on my ipad in safari.

Can you please help?

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Your gallery displays OK in my own Firefox browser (Firefox 119.0.1 Windows 64-bit) and I see no problem with the embedding code.

Try completely clearing your browser's cache and reloading the web page to see if this makes a difference.

Please let me know how you get on. Thank you.

3 (edited by KallenWebDesign 2023-11-08 16:49:07)

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Steven @ Juicebox wrote:

Your gallery displays OK in my own Firefox browser (Firefox 119.0.1 Windows 64-bit) and I see no problem with the embedding code.

Try completely clearing your browser's cache and reloading the web page to see if this makes a difference.

Please let me know how you get on. Thank you.

Thanks for your response!

I have opened it in an "incognito" window, and I get the same thing. Also on my wife's pretty much identical laptop running the current version of firefox, she gets the same thing.

We are running 119.0.1 (64-bit).

Ahhh.... I just turned off "https only mode" in the firefox privacy and security settings, and the gallery displayed. Considering what a large number of people use this, can this be fixed?

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Thank you for posting your troubleshooting results.
I see the problem when I "Enable HTTPS-Only Mode in all windows" in Firefox.

Here are a couple of suggestions which might hopefully help.

Try changing your embedding code to:

<script src="//www.superiorfleetbodyrepair.com/photogallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: '//www.superiorfleetbodyrepair.com/photogallery/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "1000",
        backgroundColor: "rgba(255,255,255,1)"
    });
</script>
<div id="juicebox-container"></div>

The leading double slash in the paths will inherit the protocol from the page's URL.

Failing that, try hard-coding https:// into the paths:

<script src="https://www.superiorfleetbodyrepair.com/photogallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: 'https://www.superiorfleetbodyrepair.com/photogallery/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "1000",
        backgroundColor: "rgba(255,255,255,1)"
    });
</script>
<div id="juicebox-container"></div>

I hope that helps.

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Steven @ Juicebox wrote:

Thank you for posting your troubleshooting results.
I see the problem when I "Enable HTTPS-Only Mode in all windows" in Firefox.

Here are a couple of suggestions which might hopefully help.

....

Failing that, try hard-coding https:// into the paths:

<script src="https://www.superiorfleetbodyrepair.com/photogallery/jbcore/juicebox.js"></script>
<script>
    new juicebox({
        baseUrl: 'https://www.superiorfleetbodyrepair.com/photogallery/',
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "1000",
        backgroundColor: "rgba(255,255,255,1)"
    });
</script>
<div id="juicebox-container"></div>

I hope that helps.

We set up a test page to try the code you suggested: https://www.superiorfleetbodyrepair.com … x-test.htm

We tried both sets of code. The code there now has the second set. Still getting the error, which you can see if you view source.

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Thanks for trying. I'm sorry it didn't work.

The good news is that Juicebox galleries do work with "Enable HTTPS-Only Mode in all windows" in Firefox on https:// sites.
Check out our demo galleries here: https://juicebox.net/demos/
Every gallery displays and functions OK.

The problem seems to lie somewhere within your own website.
Unfortunately, we're in uncharted territory here as no-one has reported this before (as far as I can recall) and I don't know what's causing it so were going to have to do some trial and error to try to track the problem down.

First of all, try completely removing the Juicebox embedding code from your web page and see if the rest of your web page displays OK.

One thing I notice is that at the foot of your gallery page, you have some Statcounter code which includes a couple of http:// links (not https://) in two separate <noscript> sections.
Try changing them to https://. Maybe this is breaking the page in HTTPS-Only Mode.
In your Auto Body Repair page (for example), I see that the Statcounter links are https:// (and not http:// like in your gallery page).

I'll keep my fingers crossed that this helps.

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Steven @ Juicebox wrote:

Thanks for trying. I'm sorry it didn't work.

The good news is that Juicebox galleries do work with "Enable HTTPS-Only Mode in all windows" in Firefox on https:// sites.

One thing I notice is that at the foot of your gallery page, you have some Statcounter code which includes a couple of http:// links (not https://) in two separate <noscript> sections.
Try changing them to https://. Maybe this is breaking the page in HTTPS-Only Mode.

I'll keep my fingers crossed that this helps.

This did work! Thank you so much for your patient troubleshooting, especially since it was our own error of not having the updated https statcounter code on the page. I really appreciate it. ⭐⭐⭐⭐⭐

Re: Error in Firefox - Juicebox Error: Cannot find div with id [SOLVED]

Nice!
I'm glad that you've got things working. Thank you for posting back to let me know. It's most appreciated.