• Registered: 2015-02-24
  • Posts: 3

Topic: Incorrect behavior in responsive design with display:none (bootstrap)

Using juicebox output in tab style design (have 2 div tabs, one called "photo" with juicebox gallery inside, and other called "video" with youtube player inside), switching between them with changing css:

display: block;
visibility: visible;

display: none;
visibility: hidden;

Juicebox tab is visible by default, after I click to video tab and than back to photo -- everything works fine. But if I click to video tab (making juicebox tab not visible) and change the browser window size (or it can happen automatically in mobile browsers, when they hide address bar) then click back to juicebox tab -- juicebox output looks like the width of the page is about 133px, after I change size of window it looks fine again.

So seems like juicebox receiving wrong screen size when div is invisible.

Is there any workaround for that problem?

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

Re: Incorrect behavior in responsive design with display:none (bootstrap)

The problem is likely to be that when you change the browser window size on the 'video' tab, the Juicebox parent container has no dimensions at that point (due to setting display: none;) and if your Juicebox gallery has a width of 100%, it will set its width to be 100% of 0px which is 0px. Changing the tab back to 'photo' does not change the browser window size so the gallery will look odd until the browser window size is changed again.

Possible solutions:
(1) Try setting only CSS visibility rather than both visibility and display.
(2) Set your gallery's dimensions to be fixed pixel values rather than percentages.
(3) Load your gallery on demand when the 'photo' tab is clicked (rather than when the page is loaded).

If you want to implement Suggestion #3 above, put your gallery's embedding code in a JavaScript function and add a click handler to your 'photo' tab to run the function when the tab is clicked.
For example, something like the following:

<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "rgba(34,34,34,.5)"
        });
    }
    $(document).ready(function() {
        $('#photo').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container">

Juicebox comes with its own bundled version of jQuery (within the 'juicebox.js' file) so basic jQuery functionality is available as soon as the 'juicebox.js' file is loaded in the page (and without the need to explicitly include a separate jQuery JavaScript file).
However, if your web page uses any jQuery code at all, I would certainly recommend including a separate jQuery JavaScript file (just in case we remove any jQuery functionality from the 'juicebox.js' file in the future).

  • Registered: 2015-02-24
  • Posts: 3

Re: Incorrect behavior in responsive design with display:none (bootstrap)

Thank you for your answer.
1) Without setting display:none for the gallery tab, video tab is still invisible, even if z-index is higher, and Visibility for gallery is set to invisible.
2) This is not possible, because all page is responsive.
3) Page is loaded with gallery tab open by default, so it is not possible to load gallery on click. But may be it is possible to force gallery to refresh dimensions each time when the 'photo' tab is clicked?

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

Re: Incorrect behavior in responsive design with display:none (bootstrap)

2) This is not possible, because all page is responsive.

Unless your web page always fills the browser's height and width completely (no matter what its size and shape) with no vertical or horizontal scrollbars, then you could try giving your gallery a width of 100% but a fixed height. If your web page is responsive but allows for vertical scrolling, then this may be a quick and easy solution to your problem.

3) Page is loaded with gallery tab open by default, so it is not possible to load gallery on click.

You could load the gallery when the page is loaded by calling the loadGallery() function in the $(document).ready(function() {}) section (alongside the click handler) e.g.:

$(document).ready(function() {
    loadGallery();
    $('#photo').click(function() {
        loadGallery();
    });
});

But may be it is possible to force gallery to refresh dimensions each time when the 'photo' tab is clicked?

That's another possible solution.
You could just load the gallery once on your page (rather than using the loadGallery() function in my suggestion above), assign a variable name to your 'juicebox' object (such as 'jb' in the example below) and then use the Juicebox-Pro API setGallerySize() method to set the gallery size when the 'photo' tab is clicked. However, please note that setGallerySize() accepts only absolute pixel values (and not percentages) so you would have to use some custom JavaScript code to fetch the size of the gallery's parent container (and/or browser window dimensions) in order to determine what the gallery's actual size (in pixels) should be.
The structure (without the actual calculations for the gallery width and height which will be unique to your own web page's layout) for such a solution might look something like this:

<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600px",
        backgroundColor: "rgba(34,34,34,.5)"
    });
    $(document).ready(function() {
        $('#photo').click(function() {
            var galleryWidth; //Calculate gallery width here and assign value to galleryWidth variable
            var galleryHeight; //Calculate gallery height here and assign value to galleryHeight variable
            jb.setGallerySize(galleryWidth, galleryHeight);
        });
    });
</script>
<div id="juicebox-container">