Question

I have a jQuery content slider where each slide is the full width of the screen. I am calculating the width that each slide should be in jQuery – not CSS (I have my reasons for doing so – I won’t bother boring you with them).
As you can see from the code below, I am calculating all the dimensions twice – the second time is for when the user resizes the window. I am just wondering if it is possible for me to store the code and then just call on that inside the $(window).resize(); ?
This should have a simple answer, but it is eluding me at the moment!

var windowHeight = $(window).height(); //Get the height of the window
var windowWidth = $(window).width(); //Get the width of the window
$(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

$(".slide").each(function(i, e) {
    //Execute animation
    $("#trigger" + i).click(function(e) {
        $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
    });
});

//Resize
$(window).resize(function() {
    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width();
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px");

    $(".slide").each(function(i, e) {
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo');
        });
    });

});

Answer 1

function adjustSize(){
    var windowHeight = $(window).height(); //Get the height of the window
    var windowWidth = $(window).width(); //Get the width of the window
    $(".slide").css("width",windowWidth + "px").css("height",windowHeight + "px"); //Make each slide’s dimensions equal to that of the window

    $(".slide").each(function(i, e) {
        //Execute animation
        $("#trigger" + i).click(function(e) {
            $(".slideContainer").stop(true, false).animate({top:-windowHeight * rowIndex + "px" ,left:-windowWidth * slideIndex + "px"},900,'easeInOutExpo'); //The variables here that I use to animate the slide are unimportant to my question. I’ve removed the vars so this code is easier to read.
        });
    });
}
$(window).resize(adjustSize);
adjustSize();  //or $(window).resize(adjustSize).resize(), it works too