Изменение функции jQuery на другом размере экрана

Question

У меня есть скрипт, который обрабатывает ширину экрана -225px, однако я хотел бы изменить его, когда экран достигнет 1100px, чтобы функция просто использовала всю ширину.

Вот код, который я использую:

     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'});
 }

И вот как это называется:

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

Я думал о том, чтобы попытаться сделать это так, но у меня большой провал:

$(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

Читая ваше описание эффекта, которого вы пытаетесь достичь, и предполагая, что вы не собираетесь использовать решение на основе медиа-запроса CSS, вы должны быть в состоянии сделать это с (относительно) минимальными изменениями в исходной функции.:

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' });
 }

То, что я делаю, это получение ширины и высоты один раз в начале функции, а не непрерывный вызов $(window).width() и $(window).height(), а затем установкалогическое значение smallMode, которое используется для определения того, какое смещение использовать с таким выражением:

(winWidth - (smallMode ? 225 : 0))

, которое говорит, что smallMode равно true вычитать 255 в противном случае вычитать 0 (очевидно,вы должны заменить свои собственные смещения вместо 0).

Читая ваш обновленный код «сбой», вы, похоже, хотите переопределить функцию slide_holder() в зависимости от результатов условий if / else if.В общем смысле это возможно, но не в том синтаксисе, который вы используете.Если вы используете объявление функции в форме:

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

JavaScript «поднимает» объявление в верхнюю часть содержащей области, т. Е. Делает вид, что ваше объявление было в начале.Это означает, что при таком синтаксисе (в некоторых браузерах возможны сбои) невозможно условно объявить функции в блоке if.Фактически объявления функций из блоков и if и else «поднимаются» наверх, и если вы объявляете две функции с одинаковыми именами, вторая переопределяет первую.

Другой способ объявления функции выглядит следующим образом:

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

Хотя переменная slide_holder также будет «поднята» в верхнюю часть области видимости, ей не будет назначена ссылка на фактическую функцию.до строки с назначением.Это означает, что вы можете сделать условное «объявление» той или иной функции следующим образом:

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);

Как я уже говорил, вы можете добиться эффекта с помощью версии исходной функции, но в общем смысле этоповедение объявлений функций, скорее всего, (главная) проблема с вашим обновленным кодом.