CODEWITHSUNDEEP
javascriptjquery
Brob
Brob

Reputation: 675

Image resize on window resize

$(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 slideWidth changes. But I don't seem to be able to get this to work.

Does anyone know why?

Upvotes: 1

Views: 1053

Answers (1)

Nick Craver
Nick Craver

Reputation: 630349

It's because it's a different distinct value, if you want it to change yo need to change it directly, like this:

WinSize = $(window).width();
var slideWidth = WinSize;

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

Or just use WinSize directly, whatever you're doing with it, since it's already updated.

Upvotes: 2

Related Questions