Changing a jQuery function at different screen size

Question

I have a script that is working out the width of the screen -225px however I would like to change that when the screen hits 1100px so that the function simply uses the whole width.

Here is the code I am using:

     function slide_holder(){
     $('#main').css({'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
     $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
     $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
     $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
 }

And this is the way it's called:

$(document).ready(function() {  
    slide_holder();
    $(window).bind('resize', slide_holder);
});

I had thought about trying it like this but I got a big FAIL:

$(window).bind("resize", resizeWindow);
        function resizeWindow(e){
            var newWindowWidth = $(window).width();

            // If width width is below 600px, switch to the mobile stylesheet
            if(newWindowWidth < 1100){              

                    function slide_holder(){
                        $('#main').css({'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 0 )+'px'});
                        $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                        $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                        $('#foot').css({'width': (($(window).width()) - 105 )+'px'});
                    }

            }           
            // Else if width is above 600px, switch to the large stylesheet             

            else if(newWindowWidth > 1100){

                function slide_holder(){
                    $('#main').css({'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider-container').css({'height': (($(window).height()) - 85 )+'px', 'width': (($(window).width()) - 225 )+'px'});
                    $('.flexslider').css({'height': (($(window).height()) - 275 )+'px'});
                    $('#tS3').css({'height': (($(window).height()) - 200 )+'px'});
                    $('#foot').css({'width': (($(window).width()) - 325 )+'px'});
                }
            }
        }

Answer 1

Reading your description of the effect you are trying to achieve, and assuming you're not going to go with a CSS media query based solution, you should be able to do it with a (relatively) minimal change to your original function:

function slide_holder(){
   var winWidth = $(window).width(),
       winHeight = $(window).height(),
       smallMode = (winWidth < 1100);

   $('#main').css({ 'width': (winWidth - (smallMode ? 225 : 0)) +'px' });
   $('.flexslider-container').css({
       'height': (winHeight - (smallMode ? 85 : 0)) +'px',
       'width':  (winWidth - (smallMode ? 225 : 0)) +'px'
   });
   $('.flexslider').css({'height': (winHeight-(smallMode ? 275 : 0)) + 'px'});
   $('#tS3').css({ 'height': (winHeight - (smallMode ? 200 : 0)) + 'px' });
   $('#foot').css({ 'width': (winWidth - (smallMode ? 325 : 0)) + 'px' });
 }

What I'm doing there is getting the width and height once at the beginning of the function rather than continuously calling $(window).width() and $(window).height(), and then setting a boolean smallMode that is used to decide what offset to use with an expression like this:

(winWidth - (smallMode ? 225 : 0))

Which says if smallMode is true subtract 255 otherwise subtract 0 (obviously you should substitute your own offsets rather than 0).

Reading your updated "fail" code, you seem to want to redefine the slide_holder() function depending on the results of the if / else if conditions. In a general sense that is possible, but not with the syntax you are using. If you use a function declaration of the form:

function slide_holder() {
   /* function body */
}

JavaScript "hoists" the declaration to the top of the containing scope, i.e., it pretends that your declaration was at the beginning. This means it is not possible with that syntax (subject to irregularities in some browsers) to conditionally declare functions in an if block. Effectively the function declarations from with both the if and the else blocks get "hoisted" to the top and if you declare two functions with the same name the second overrides the first.

Another way to declare a function is like this:

var slide_holder = function() {
                     /* function body */
                   };

Although the variable slide_holder would also be "hoisted" to the top of the scope it would not be assigned a reference to the actual function until the line with the assignment. Which means you can do a conditional this or that function "declaration" like this:

var slide_holder;

if ($(window).width() < 1100) {
    slide_holder = function() {
                      /* one version of function */
                   };
} else {
    slide_holder = function() {
                      /* other version of function */
                   };
}

$(window).bind('resize',slide_holder);

Like I said initially, you can achieve the effect with a version of your original function, but in a general sense this behaviour of function declarations is most likely the (main) problem with your updated code.