• Registered: 2014-03-17
  • Posts: 9

Topic: drop down css menu doesn't work on embedded gallery

I'm working on a test page using juice box  and I'm using a pure css drop down menu throughout the site. On the long drop down as soon as the mouse enters the gallery area the menu breaks. see here on the 'galleries' menu item:  http://bretwills.com/BWR/JB1/jblayout3purefix.html

I'm wondering if there are any known conflicts? (I validated the code this time . . .)

I tried it on various browsers and also on the regular embed code and with code like "View Resizable Gallery with Top Menu Example" you pointed me to before , all behave the same.

TIA

  • Registered: 2014-03-17
  • Posts: 9

Re: drop down css menu doesn't work on embedded gallery

I also just noticed that in Safari that gallery flashes between slides

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

Re: drop down css menu doesn't work on embedded gallery

If you set a high enough 'z-index' value to your menu, it should be stacked on top of the gallery and function as expected.
Try adding the following code to the <head> section of your web page:

<style type="text/css">
.pure-menu ul {
    z-index: 9999 !important;
}
</style>
  • Registered: 2014-03-17
  • Posts: 9

Re: drop down css menu doesn't work on embedded gallery

ok-that did fix it. thanks very much.
any idea why it's blinking in safari?

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

Re: drop down css menu doesn't work on embedded gallery

I have just viewed your gallery in Safari 5.1.7 on my PC (and two other browsers which use the WebKit engine: Chrome 33 and Opera 20) and I see no flickering in transitions.

As I do not see the flickering in your gallery when I view it myself, it looks like the problem may not be with the gallery itself or due to a code conflict but it seems to be localized to your own browser/system.
Try clearing your browser's cache before reloading your gallery to see if this makes a difference.

Do you see the flickering in any of these demo galleries?
http://www.juicebox.net/demos/

  • Registered: 2014-03-17
  • Posts: 9

Re: drop down css menu doesn't work on embedded gallery

Yes I see a flash during the transitions on the embedded gallery and flikr gallery on my machine and safari, but again not chrome. (the full browser version looks fine) I restarted everything, cleared cache, etc. I guess its a local issue to my computer.

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

Re: drop down css menu doesn't work on embedded gallery

I see a flash during the transitions on the embedded gallery and flikr gallery

One thing that these galleries have in common is that neither completely fills the browser window.
However, if this was somehow a contributing factor, then I would expect you to see the flickering in other galleries which do not completely fill the browser window (such as the Flat Design and Top-Left Alignment demo galleries).
The two galleries you see the flickering in have much in common with other demo galleries on the page which you do not report seeing the flickering in so, at the moment, I am unable to draw any conclusions as to what the problem might be.

I guess its a local issue to my computer.

It certainly seems to be.
Out of interest, what operating system and version of Safari do you use?
If you are not already using the latest version of Safari for your system, try updating it to see if this helps.

  • Registered: 2014-03-17
  • Posts: 9

Re: drop down css menu doesn't work on embedded gallery

Safari is Version 6.1.2 (7537.74.9) and I'm on OS 10.7.5
I will say that Safari does act a little glitchy since a recent upgrade on this machine. I have another Mac running 10.8xxx and another one running Maverick so out of my own curiosity I'll check on the others today.
Thanks for your (as always – I've been a customer for years.) great customer support.
I upgraded to pro yesterday.