1 (edited by agmorush 2014-05-30 16:12:32)

Topic: Superfish menus display over full screen mode [SOLVED]

I've been having some issues with Superfish menus overlapping Juicebox galleries for my home page. I was able to get the menus to display over the galleries by adjusting the z-index, like so:

https://i.imgur.com/NWY12nR.png

However, I've been having a problem with the same menus overlapping Juicebox's "Expand Gallery" mode, like so:

https://i.imgur.com/pOW1yHr.png

I've even tried returning the z-index values of the superfish menus back to their original values, but that didn't work either. Is there a way I can modify the CSS or JS to fix this bug?

Re: Superfish menus display over full screen mode [SOLVED]

Try one of the two following suggestions:

(1) Use an opaque (rather than transparent) expandedBackgroundColor (in JuiceboxBuilder-Pro's 'Customize -> Color' section). For example, try setting expandedBackgroundColor="rgba(255,255,255,1)" (make sure that the 'Opacity' value is set to '1'). This should ensure that no elements from your web page are visible when the gallery is expanded.
... or:
(2) Set expandInNewPage="TRUE" (in JuiceboxBuilder-Pro's 'Customize -> General' section). When the gallery is expanded from the Splash Page, it will be displayed on a page of its own rather than on top of the embedding page.

Hopefully one (or both) of these suggestions will be a suitable solution to your problem.

Re: Superfish menus display over full screen mode [SOLVED]

What if these galleries are being made via a View from Drupal's Juicebox module? I don't have direct access to the JuiceboxBuilder options for each node. Is there a master config.xml file that the module uses that I can edit?

Re: Superfish menus display over full screen mode [SOLVED]

You should be able to add Pro configuration options manually by specifying the settings in optionName = "optionValue" format within the advanced module settings ('Pro / Manual Configuration Options').
Please note that we did not write the Juicebox module for Drupal ourselves and support for the module would be better directed towards the Drupal forum where the author of the module should be able to help you further.

Re: Superfish menus display over full screen mode [SOLVED]

Thank you very much! I was able to use the expandInNewPage configuration option to effectively work around this issue.

Re: Superfish menus display over full screen mode [SOLVED]

Hi All,

I think I had the same problem. I first solved it by backuping my site+DB with drush, deleted my site+DB and restored everything with drush. Then I did a little bit more debugging and confirmed that this is a problem that is contained in the DB and not in another configuration file or .js code.

Regards.

quick commands:
1) cd drupalroot
2) drush archive-dump default --destination=../sitebackup.tar.gz
3) cd ..
4) drush arr sitebackup.tar.gz --destination=./drupalroot --db-url=mysql://dbuser:dbpassword@localhost/mydrupalDB

7 (edited by dan_murano 2014-08-24 00:11:41)

Re: Superfish menus display over full screen mode [SOLVED]

I have the same issue (in Drupal) of the Superfish menu appearing across the middle of the gallery when expanding to fullscreen mode. It worked up until at least a couple of versions ago. I tried the suggestions above.

Setting transparency did not fix the issue (it might if I change the z-index also, but that might affect things elsewhere on my site).

The expandInNewPage="TRUE" option worked for IE and Chrome, but in Firefox, there was no way to close the gallery. Using the CLOSE button just caused the gallery to relaunch in fullscreen mode, and the browsers back button did the same. The only way I could fix it was to remove the fullscreen option. That's OK, because it still goes fullscreen on the Iphone, but I can no longer go fullscreen in a browser.

Something changed, because this used to work. I will also post over in the Drupal module support forum.
......................................

UPDATE:

I think I got it.

User xopherus suggested this CSS in the Drupal forum:

/* Horizontal Menu */
#menu-bar {
  position: relative;
  z-index: 2;
}
/* Content Area */
.region {
  position: relative;
  z-index: 1;
}

-- I tried that, but it kept my menus from displaying at all, so I removed the z-index properties from each item, and in Juicebox config., set:
expandInNewPage="TRUE"
showExpandButton="TRUE"

Everything seems fine now. Sorry for the long message. Hope it's ok to cross-post like this, and it helps someone else who might be having the same issues. Thanks for the support forum, and thanks to Drupal user xopherus  for posting his solution too.

Re: Superfish menus display over full screen mode [SOLVED]

Sorry for the long message. Hope it's ok to cross-post like this, and it helps someone else who might be having the same issues.

No problem. Thank you for sharing your experience.

In addition to all the posts above, the following information should help clarify this problem.

There is currently a known bug whereby elements which have explicitly been assigned a CSS position are not covered by the fullscreen gallery (they should be). The developers are aware of this bug and it should hopefully be fixed in a future version of Juicebox.

In the meantime, a workaround is, indeed, to set expandInNewPage="TRUE" in (in JuiceboxBuilder-Pro's 'Customize -> General' section) so that when the gallery is expanded, it will be displayed on a new page of its own rather than on top of the embedding page.

(This bug was not known about at the time of the original post, there were no gallery URLs given that I could check and your own post was the first in this thread to mention elements with a CSS position.)

I hope this helps.

Re: Superfish menus display over full screen mode [SOLVED]

Thank you Steven for sharing that this problem will be fixed in a future version.

I am currently using the Lite version of Juicebox to evaluate suitability for our website - so I do not have access to the expandInNewPage parameter. For desktop / laptop use I'm currently using useFullscreenExpand="TRUE" which works well.

But I have one important question ..... what happens on mobile devices? Will expandInNewPage fix it for mobiles?
It is very important for me that my gallery is responsive. So an answer to you question will help me determine buying the PRO version.

Many thanks,
Brian.

Re: Superfish menus display over full screen mode [SOLVED]

@BrianP6

When the bug is fixed, it will be fixed for all browsers on all devices.
If you are asking if, currently (with the bug present), setting expandInNewPage="TRUE" will fix the bug on mobile devices, then yes, it will.
Setting expandInNewPage="TRUE" forces the gallery to be expanded on a new page of its own where the code from the embedding page can no longer conflict with the gallery's own code.
However, if you are using Juicebox-Lite, then your gallery will be using expandInNewPage="AUTO" (the default value for this configuration option) and on iOS devices, this setting will automatically expand the gallery on a new page anyway to avoid issues with incorrectly scaled content when switching between regular and expanded mode. Please see the Expand Gallery Behavior support section for more information.

Re: Superfish menus display over full screen mode [SOLVED]

Many thanks for your response. That is what I needed to know - so have bought the PRO version and you are correct, it does work.
I am looking forward to the bug fix.
Brian.

Re: Superfish menus display over full screen mode [SOLVED]

This bug (whereby elements from the embedding web page may still be visible after a gallery has been expanded) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.