Question

I’ve got a photo slideshow with thumbnails. Next/Previous buttons appear and disappear based on the size of the window; if the thumbnails overflow the window size, the buttons appear. If not, they disappear. My problem is that, at times, they won’t come up, or they won’t come up for a couple of seconds. At other times they won’t disappear. Sometimes it works fine.

I am still pretty new to jQuery and JavaScript. Any suggestions?

    // hide previous and next buttons
$('#prev, #next').hide();

// get width of thumbnail list
var thumbsWidth = $('div#thumbs ul').width();

// show/hide next/prev buttons
function buttonVisibility() {
    if (thumbsWidth + 225 > screenWidth) {
        $('#prev, #next')
        .fadeTo('fast', 0.5)
        .hover(function(){
            $(this).fadeTo('fast', 1);
        }, function(){
            $(this).fadeTo('fast', 0.5);
        });
    } else {
        $('#prev, #next').fadeTo('fast', 0, function(){
            $(this).hide();
        });
    }
}

// declare global screenWidth variable
var screenWidth

// find width of thumbnail window and show/hide next/prev buttons accordingly
function findWidth(){
    screenWidth = $('div#thumbs').width();
    buttonVisibility();
}

// perform findWidth() on load and on window resize
findWidth();
$(window).resize(function(){
    findWidth();
});

Answer 1

It might be that the work the browser intrinsically has to do while the window is resized (that is, re-figure the layout in response to the changing window size), added to the DOM changes you’re making, is just bogging things down. What you might try is waiting for the user interaction to finish before triggering your code.

$(window).resize((function() {
  var timeout = null;
  return function() {
    if (timeout) clearTimeout(timeout);
    timeout = setTimeout(findWidth, 250);
  };
})());

That’ll change things so that your code won’t try and do anything until 1/4 second after the user pauses or stops dragging the window around.