• Registered: 2018-01-26
  • Posts: 5

Topic: Need some advice about a sizing/refresh issue [SOLVED]

Hi, Juicebox is a great product, thank you! but I am having one issue at the moment.  I have a slideshow which I would like to exhibit smooth and sensible sizing and proportioning as the user might arbitrarily size his browser window. Setting GalleryWidth and GalleryHeight to 100% works nicely for this purpose. Sadly it has a fatal flaw. When the page initially displays, the text and pictures following the slideshow on the page, briefly and very distractingly flash up on the screen, then Juicebox refreshes its display area and poof! The pictures appear where they belong and everything looks beautiful. But that flash is an embarassing and unacceptable issue.  So I enclosed the gallery in a DIV and made the height of the div a fixed constant and that worked, yay.  Now the only problem is that the best fixed constant is different depending on the size of the screen, so I decided to put in a bunch of @media clauses into my CSS that would set the constant to various different values depending on screen width. This SHOULD have worked... but no. It almost worked. The problem is that while my @media statements worked perfectly, JuiceBox was unaware that its viewport area had change size and it did not refresh the display, resulting in the bottom of the gallery pictures getting cut off as you shrink the overall window width.  Hitting F5 solves the problem and JB displays the gallery perfectly in the height assigned.

So yeah, my question is this: How can I encourage/command/beat into submission JuiceBox so it will update its display when the user is sizing the browser window and the gallery height changes thanks to an @media clause being invoked?

Thanks for any advice some out there might have for this situation....

Richard

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

Re: Need some advice about a sizing/refresh issue [SOLVED]

One possible solution would be to use JavaScript to listen for a change in the browser window size and then assign new dimensions to the gallery's container accordingly.
This is the technique used in the Using a Resizable Gallery with a Header online examples where the web page has either a header or side menu of fixed height or width and the gallery resizes to fill the remaining browser window area (no matter what shape or size the browser window is).
Open one of the examples in your browser and take a look at the source code of the web page. You can copy and modify this code to suit your own needs.
Hopefully this will point you in the right direction and you can adapt this technique within your own web page to resolve your problem.

  • Registered: 2018-01-26
  • Posts: 5

Re: Need some advice about a sizing/refresh issue [SOLVED]

That sounds like just the ticket. Thank you for your prompt and knowledgeable response.

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

Re: Need some advice about a sizing/refresh issue [SOLVED]

You're welcome!

  • Registered: 2018-01-26
  • Posts: 5

Re: Need some advice about a sizing/refresh issue [SOLVED]

Hi, I am having trouble making the sample program work properly. I integrated it into my app, tweaked it a bit to set the containing <div>'s dimensions the way I wanted (in particular its height) and now it does in fact resize dynamically as I resize the window in and out, pretty much the way I was hoping it would. It has an unfortunate quirk that I can't get rid of, unfortunately.

What seems to be happening is that the gallery does not obey the calculated dimensions properly on the initial display of the page.  Something very peculiar is happening because I can breakpoint the call to SetGallerySize in the Javascript, and I can observe in the Chrome debugger that there is an attribute of "height" on the containing <div> which is correct and exactly what the Javascript calculated. Then when the screen updates, it uses the viewport height as the height of the gallery, DESPITE the fact that even after the page updates, it is still possible to view the containing <div>'s element attributes and see the proper value still there.  The debugger itself reports a displayed height of the container div that is different from same debugger's displayed value of the element's "height" attribute, which is correct.

I'm mystified!  Any thoughts? The startup code appears bound and determined to use the viewport height as the initial display height no matter what my carefully crafted Javascript puts in the div's "height" attribute.  But the calls to setGallerySize (from the sample's doLayout method) seem to address that when I resize the window.

Thank you for any help you can offer.

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

Re: Need some advice about a sizing/refresh issue [SOLVED]

What seems to be happening is that the gallery does not obey the calculated dimensions properly on the initial display of the page.

Maybe the problem is some kind of timing issue.
Perhaps if you put a slight delay on the initial sizing routine (to allow for everything else on the page to finish rendering first), it might help.

I do not know exactly how your web page works but you could try putting your initial sizing routine inside one of these wrappers:

jb.onInitComplete = function() {
    // Initial sizing routine goes here
};

... or:

$(document).ready(function() {
    // Initial sizing routine goes here
});

... or:

window.setTimeout(function() {
    // Initial sizing routine goes here
}, 500);

Alternatively, instead of using setGallerySize(), you could maybe try setting your gallery's width and height to 100% (so that it always fills its parent container) and then dynamically adjust the dimensions of the parent container using JavaScript.

I hope these suggestions help.

  • Registered: 2018-01-26
  • Posts: 5

Re: Need some advice about a sizing/refresh issue [SOLVED]

Thank you for your help - I did fix the problem and those were not it. The problem was that in the sample program, the code sets the "height" attribute of the enclosing element using the Jquery "height()" method. Unfortunately, the enclosing element of the Juicebox container was a div, and in HTML5 that attribute is deprecated on the <div> element, is not allowed, and the browser ignores it when rendering. Instead it is necessary to set the height in the CSS style attribute, using the jQuery "css()" method.  Problem fixed, sizing now perfect at all calculated heights, and life is wonderful.  Thank you for your suggestions.

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

Re: Need some advice about a sizing/refresh issue [SOLVED]

I'm glad that you've been able to resolve your problem.
Thank you for taking the time to let me know. It's most appreciated.

The 'height' attribute is, indeed, not allowed on a <div> element in HTML 5 but it seems that using the jQuery height(value) method on a <div> such as:

<div id="test"></div>
<script>
$(document).ready(function() {
    $('#test').height(600);
});
</script>

... actually sets the height using inline CSS via a 'style' attribute rather than a 'height' attribute (at least in my own tests) as follows:

<div id="test" style="height: 600px;"></div>

... which is valid HTML 5, so I'm not quite sure why using css(propertyName, value) works whereas height(value) does not.

In any case, I'm glad that you've been able to fix your problem.
Thank you for sharing your solution. It might certainly help others facing a similar problem.