• dazp
  • Member
  • Offline
  • Registered: 2012-08-31
  • Posts: 5

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

Hi, I've just purchased Juicebox Pro to build a portfolio site with and I seem to be struggling with embedding into an existing html page. Ability level wise, I'm a beginner with html, but I've dabbled a little before. I've read this page pretty thoroughly: http://www.juicebox.net/support/embedding/ and followed it as closely as I can, but I get the above error (post title). Have googled around also, but nothing comes up. 

Here's my process:

1. Create the gallery in JuiceboxBuiler-Pro.
2. Copy the 'Get Embed Code' from the Publish Page.
3. Paste that code into my html view page in 'Kompozer'.
4. Save that html page out.
5. Whenever I open that newly created page it works for a split second and then returns: "Juicebox Error: Cannot find div with id: "juicebox-container"

I'm certain there's a step in the process I'm completely missing here, but I don't see it at all in the embedding help page. Have spent quite a good number of hours trying to figure this out and hopefully I'll kick myself and it's screamingly obvious to all but myself.

Any assistance much appreciated.

p.s the only weird thing I see, is that after I've saved the html page from Kompozer and then re-opened it, the copied juicebox code in that page isn't *quite* the same. It seems to always be missing this line toward the end: "<div id="juicebox-container"></div>" I've tried manually editing it back in, but whenever it's saved it's removed. Seems odd and possibly unrelated, but I thought I'd mention it, thanks.

  • dazp
  • Member
  • Offline
  • Registered: 2012-08-31
  • Posts: 5

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

OK, more info. Got it to work! I should have realized that that missing line was the culprit.

In a nutshell, If I hand add that 'missing' line "<div id="juicebox-container"></div>" in my html page using notepad, the gallery works.

BUT If I save the html page in Kompzer it refuses to save that one line of code and messes up the gallery. How weird is that?
Does anyone have any experience with Kompozer who might be able to shed light on this? Is there something about that juicebox code that Komposer might not like perhaps, given that it hasn't had a release for a couple of years? Will be a real drag having to hand edit each page in notepad.

Thanks.

  • dazp
  • Member
  • Offline
  • Registered: 2012-08-31
  • Posts: 5

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

And I appreciate that this isn't the tech support forum for Komposer. But I'm hoping this is some more universal issue to do with formats/protocol/code standards that If I understood I maybe able to find a workaround for.

Thanks.

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

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

There is nothing special about the line:

<div id="juicebox-container"></div>

It is a basic line of valid HTML which Komposer should accept.
However, I suspect that Komposer is trying to be helpful and removing the <div> because it is empty.
Try inserting some text into the <div>, for example a non-breaking space:

<div id="juicebox-container">&nbsp;</div>

Failing that, try some normal text such as:

<div id="juicebox-container">Juicebox Gallery</div>

As soon as the page loads, the contents of the <div> are replaced by the gallery itself so the text will not be visible on your page.

  • dazp
  • Member
  • Offline
  • Registered: 2012-08-31
  • Posts: 5

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

Great, thanks a lot Steven. Will give that a try later.

  • dazp
  • Member
  • Offline
  • Registered: 2012-08-31
  • Posts: 5

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

That did the trick btw, thanks!