Databases
StackOverflow2013
Postsdbo
POBest way to attach a callback with a window resize function
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBest way to attach a callback with a window resize function
    text
    copied!<p>I'm attempting to create jQuery Cycle slideshow where images of different sizes are vertically and horizontally centered, and also re-size to whatever the window size is. Some of it is straight css but I need to dynamically adjust 'top', 'left', 'margin-top', and 'margin-left' on each image before fading in the first image of the slideshow.</p> <p>Thus I believe need to create a callback where the dimensions and margins are set before the images appear. Can't figure out the best way of doing this.</p> <p>CSS is simple. Essentially:</p> <pre><code>#gallery img { max-height: 100%; position:absolute; display:none; } </code></pre> <p>And a rough cut of the .js would be:</p> <pre><code>$(window).bind("load resize", function() { $('#gallery img').each(function(i) { var ih = $(this).height(); var iw = $(this).width(); var fh = Math.ceil(ih / 2); var fw = Math.ceil(iw / 2); $(this).css({ 'top' : '50%', 'left' : '50%', 'margin-top' : '-' + fh + 'px', 'margin-left' : '-' + fw + 'px' }); },function() { $('#gallery img:first').fadeIn(3000, function() { $('#gallery').cycle(); }); </code></pre> <p>However I'm not seeing the expected result. The fadeIn of the first img triggers before the calculations and positioning occurs.</p> <p>Thinking that 'display:none' might confuse things (maybe nothing is calculated until it's 'display:block', I've tried using:</p> <pre><code>#gallery img:first-child { display:block; opacity:0; } </code></pre> <p>..And then animating to full opacity instead of the fadeIn--but the result is the same.</p> <p>What am I doing wrong??</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload