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

Topic: resizable gallery only sorta works . . .

I'm building my galleries using the javascript in your resizable gallery example. When I first open the gallery it doesn't resize, I have to drag the window a little bit, either expand or contract it,  and then the gallery resizes. I've tested this on numerous different machines, safari, Chrome, IE and it does it on all.
Here's an example of one: http://bretwills.com/BWR/liquid/index.html
Any thoughts on how to fix it?
TIA

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

Re: resizable gallery only sorta works . . .

You have set your web page's 'header' height to be the height of the #logo container and the 'footer' height to be the height of the #search container.
It looks like neither of these containers have heights specified via CSS and so, when the resizing code is first run, the values returned are not accurate. Set heights for both these containers and your web page should resize more consistently.

Also, I notice that the top of your web page (above the gallery) contains more that just the #logo container and the bottom of your page (below the gallery) contains more than just the #search container so you might need to calculate the 'header' and 'footer' heights by adding up the heights of a number of different containers.

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

Re: resizable gallery only sorta works . . .

if I set fixed heights for those elements, won't I lose the responsive characteristics? (that's why I didn't' do it in the first place)

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

Re: resizable gallery only sorta works . . .

The idea behind the Using a Resizable Gallery with a Header example is that the web page has a header and footer of fixed height and the gallery takes up the remainder of the browser window (no matter what it may be). When the user changes the height of the browser window, the header and footer remain at their fixed heights and the gallery will expand or shrink to fill the remaining space. In doing so, the header, footer and gallery are always displayed in full within the browser window without the need for a vertical scroll bar.
It looks like your header and footer will likely remain the same height no matter what the height of the user's browser window is so setting their heights to be fixed should not be a problem.
If you really want to have a header and footer whose heights are dynamic, then it will almost certainly complicate things.
If you want to follow the online example, just make sure you have all your 'header' elements contained within a single container and give a height to this wrapping container. Do likewise for the 'footer'.