• Registered: 2012-06-05
  • Posts: 7

Topic: clash with menu

i have just put in Juicebox on homepage, that cycles through transparent .png images of a "projector screen". But when my menu overlaps the Juicebox area, it cannot be used and the drop-down disappears when you try to click on a menu item, but only for the lower menu items where it actually overlaps, i.e. "other projects", "client summary" and "arty things". (only tested so far in Safari 4.0.2)

example at http://www.midnightshorts.com.au/new_site/index.html

another page http://www.midnightshorts.com.au/new_site/arty.html with a similar juicebox gallery does not seem to have this problem as the menu drop down does not overlap this particular gallery.

thanks for help!

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

Re: clash with menu

Ensure that your galley's background is transparent by setting the background opacity (the last parameter in the 'rgba' notation) to zero, e.g.:

backgroundColor : 'rgba(0,0,0,0)'

Also, try giving your header <div> a high 'z-index' value so that it appears on top of all Juicebox gallery elements, e.g.:

<div id="header" style="z-index: 9999;">
  • Registered: 2012-06-05
  • Posts: 7

Re: clash with menu

sorry, this didn't work.  however i am fixing it by cropping my gallery images on the front page so they don't interfere with the menu.

thanks anyway for prompt reply, if you do have any other suggestions though i will give it a try.

but i think juice box is fantastic.  i will post my site when its complete, and i also plan on implementing it on 2 other sites within the next few weeks.

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

Re: clash with menu

I am glad you have found a suitable workaround for your problem.
Thank you for posting back to let me know.