Question

$(document).ready(function(){    
WinSize = $(window).width();
var currentPosition = 0;
var slideWidth = WinSize;

$(function(){
    $(window).resize(function(){
        slideWidth = WinSize = $(window).width();
    });
});    


var slides = $('.slide');
var numberOfSlides = slides.length;

// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');

// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
    'float' : 'left',
    'width' : slideWidth
});

// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);

// Insert controls in the DOM
$('#PageBG')
.prepend('<a href="#" class="control" id="previous"><span>Previous</span></a>')
.append('<a href="#" class="control" id="next"><span>Next</span></a>');

// Hide left arrow control on first load
manageControls(currentPosition);

// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
    // Determine new position
    currentPosition = ($(this).attr('id')=='next') ? currentPosition+1 : currentPosition-1;

    // Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
        'marginLeft' : slideWidth*(-currentPosition)
    },800, 'linear');
});

$('.SlideSelect')
.bind('click', function(){

// Move slideInner using margin-left
$('#slideInner').animate({
    'marginLeft' : slideWidth*(-$(this).attr('id'))
},800, 'linear');

});

I want slideWidth to change based on the window size so when the window is resized the slideWidth changes but I don’t seem to be able to get this to work.

Does anyone know why?

Answer 1

It won’t update other variables, slideWidth is a different, distinct variable, a copy of the value in WinSize whenever it was set initially, you need something like this in your function to update both:

$(function(){
    $(window).resize(function(){
        slideWidth = WinSize = $(window).width();
    });
});

Make sure slideWidth is in scope so that this updates the same slideWidth variable, and not creating a global one. Alternatively, just use WinSize for your code, there’s no need for 2 variables, at least not in your example…maybe there is a need in the rest of your code.