Компоновка мои main.js - не удается

Question

Существует следующие 3 функции:

function A(){} 

и

function B(){} 

и, наконец,

function C(){} 

Они все в одном файле с именем главной .js (main.js - это файл, который будет содержать все основные функции JavaScript для веб-сайта), и выглядит примерно так:

$(document).ready(function() { 
    function A(){} 
    function B(){} 
    function C(){} 
}); 

---

Хорошо, а?functionA & B должен запускаться ТОЛЬКО на «изменение размера окна и нагрузка», а размер экрана выше 770 пикселей и ниже 1024 пикселей. Но функция C не требует каких-либо из вышеперечисленных требований для работы.

Любые идеи, как я могу разместить main.js для адаптации к этим изменениям? вот jsFiddle с моими скриптами: http://jsfiddle.net/Z57Dh/

Следующие две функции, должны работать в обычном режиме - то есть, когда нагрузка ... //Prevent clicking on .active & disabled links и //Off-canvas menu

Но //Show the side-by-side responsively нужно только работать, когда ширина экрана ниже 770px.

Однако //Grid system должен работать, когда ширина превышает 770px и 1024px ниже

Answer 1

Попробуйте сделать так:

$(document).ready(function() { 
    function C(){} 
}); 

$(window).on('load resize', function() { 
    if($(window).height() > 770 && $(window).height() < 1024 { 
     function A(){} 
     function B(){} 
    } 
}); 

Answer 2

// define the functions ahead of time 
var A = function() {console.log('a'); }, 
    B = function() {console.log('b'); }, 
    C = function() {console.log('c'); }, 
    AB = function() { 
     var $window = $(window); 

     // only run A and B if window is within boundaries 
     if ($window.width() > 770 && $window.width() < 1024) { 
      A(); 
      B(); 
     } 
    }; 

// run functions when needed 
$(function() { 
    // run A and B on document ready 
    AB(); 
    C(); 

    $(window).resize(function() { 
     // run A and B when window resized 
     AB(); 
    });; 
});