• vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Topic: Button Bar z-index is 3000: inline style floats over main nav [SOLVED]

Button Bar z-index container is set to 3000. This is set "inline" and is not set by the css.

Because the z-index is so high when scrolling the button bar floats over the top navigation.

Changing z-index of header and navigation is not an option. The galleries are important but only a small part of a very LARGE complex site. Everything is working great and has been for a long time. It took a lot of fiddling and tweaking to get the header z-indices to be correct. I do not want to change the z-index of multiple elements in the header and navigation just for the galleries.

It would make more sense to change the astonishingly high z-index of the button bar "wrapper" div.

This is the block I found:

<div class="jb-classifier-link-wrapper jb-classifier-detail-area jb-classifier-layer " data-layer="3000" style="z-index: 3000; display: block; opacity: 1; transition: opacity 400ms ease-in; left: 242px; top: 6px; width: 321px; -webkit-user-select: none;">

Not sure if this is the absolutely correct block, but changing it in Chrome inspector, setting the z-index to 400 fixes the problem.

The site is a joomla site using embed code in an article.  There are close to 20 separate galleries so I made the jbcore folder external to each gallery. Galleries are in a gallery subdirectory using base_url but also pointing to the shared external jbcore folder.

This works FANTASTIC. The only piece of the puzzle left is figuring out how to get the button bar to not float over the site's main navigation.

Would this be a tweak to the css to override the inline styles? Why is the z-index of the button bar "inline" and can it be removed or changed and use only the external css file? I know I know seems a bit obsessive, but we are trying to streamline everything we can to boost performance. I hate having "unused" styles overridden.

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

Re: Button Bar z-index is 3000: inline style floats over main nav [SOLVED]

The inline code that you see when you examine the web page in your browser's developer tools is code that is generated dynamically by the 'juicebox.js' file.
I cannot be sure but I expect that the z-index value for the button bar is set dynamically (rather than just being an entry in the 'theme.css' file) as it may change depending on the value of buttonBarPosition (and possibly other configuration options).
Try using the following CSS in your gallery's web page (or at the foot of the 'jbcore/classic/theme/css' file):

.jb-classifier-link-wrapper.jb-classifier-detail-area.jb-classifier-layer {
    z-index: 400 !important;
}

Please note that Juicebox will not be aware of this modification and it may have unforeseen and unwanted knock-on effects. (There may be a reason why the z-index is set to 3000. It may need to be greater than other internal z-index values under certain circumstances.)

The only piece of the puzzle left is figuring out how to get the button bar to not float over the site's main navigation.

It sounds like 400 may still be to high for your site's main navigation and using a lower z-index value might help.
Perhaps you could post the URL to your gallery's web page so that I can take a look and hopefully help further.

3 Reply by vern (edited by vern 2016-03-19 12:03:34)

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Re: Button Bar z-index is 3000: inline style floats over main nav [SOLVED]

Thanks for the response!

Actually I did a simple css override of that class and it works PERFECTLY. Normally I hate to override inline css but in this case it was so simple and fast it seemed the best solution.

I did same thing you posted, changed that class to z-index: 400 !important;. Works fine, no other unusual results. A further note on this... there really is nothing I can see that would require a 3000 z-index. It is such an outrageous value. Even within the DOM of the embedded slideshow there isn't anything in there that would account for 2999 other elements. :)

On second thought, the 400 z-index was based on getting the button bar to float over everything just IN THE GALLERY CODE. To float over the site navigation could have been much lower. Anything LESS than 400 and the button bar could not be clicked. I think this is why it is set so high. The JS generated inline css is just using a REALLY HIGH value in case someone has a gallery with 2999 images. :) Since none of my galleries currently are more than 100 images that value works. I may have to bump it up later of course.

I think this is because of the absolute positioning of the button bar. If it were relative to everything else, I think it would not float over the outer, separate header, navigation. Not 100% sure but pretty sure that relative z-index only works within that block.

p.s. I did set the z-index of the header and navigation of the site template to a pretty high value just to "get it out of the way" so to speak. There were other components and "gizmos" that kept floating over the navigation. The header and navigation is "animated" and "fixed" as you scroll it shrinks and stays at the top.

  • vern
  • Member
  • Offline
  • Registered: 2016-03-18
  • Posts: 9

Re: Button Bar z-index is 3000: inline style floats over main nav [SOLVED]

Here's a sample of one of the galleries created within an hour of purchasing Juicebox!!!!!!!!

https://www.bvtlive.com/midnight-hour-photo-gallery

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

Re: Button Bar z-index is 3000: inline style floats over main nav [SOLVED]

I'm glad you've been able to resolve your problem. Thank you for letting me know.
(The z-index values assigned to gallery elements are design decisions made by the developers and we just have to work around them if necessary.)

Here's a sample of one of the galleries created within an hour of purchasing Juicebox!!!!!!!!

Nice to see you're getting on well with Juicebox!