jQuery изменить размер окна в режиме noconflict

Question

Попытка изменить ширину рамки до ширины окна. Получил этот код для работы:

jQuery(window).ready(function($) { 

    var windowWidth = $('#portfolio_title .container').outerWidth(); 

    $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 

    $(window).resize(function(){ 
     var windowWidth = $('#portfolio_title .container').outerWidth(); 
     $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
     $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 
    }); 
}); 

Но это не очень Пытаясь оптимизировать его так:

jQuery(document).ready(myWidth); 

jQuery(window).resize(myWidth); 

function myWidth($){ 
    var windowWidth = $('#portfolio_title .container').outerWidth(); 

    $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 
}; 

документов готовые работы, но изменение размера не делает. Что я делаю неправильно?

Answer 1

Вы не можете передать $ в myWidth и ожидайте, что это будет jQuery. В myWidth$ будет объектом события. Это сделает $ jQuery для вас, не беспокоясь о конфликте.

(function($, window, document){ 

    jQuery(document).ready(myWidth); 

    jQuery(window).resize(myWidth); 

    function myWidth(){ 
     var windowWidth = $('#portfolio_title .container').outerWidth(); 

     $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
     $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 
    }; 

})(jQuery, window, document); 

Answer 2

Обработчик документа готов к получению объекта jQuery в качестве первого аргумента, где обработчик resize получает объект события в качестве аргумента.

Поэтому, когда myWidth вызывается событием изменения размера, $ относится к событию resize, а не к объекту jQuery.

Вы можете это исправить, зарегистрировав обработчик изменения размера затем вручную запуская обработчик на дом готов, как указано ниже

jQuery(function ($) { 
    $(window).resize(function() { 
     var windowWidth = $('#portfolio_title .container').outerWidth(); 
     $('.topBorder').css({ 
      'border-right-width': (windowWidth) + 'px' 
     }); 
     $('.btmBorder').css({ 
      'border-left-width': (windowWidth) + 'px' 
     }); 
    }).resize(); 
}); 

Answer 3

Попробуйте это:

var windowWidth = $('#portfolio_title .container').outerWidth(); 
$(function() { 
    $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
    $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 

    $(window).resize(function(){ 
     $('.topBorder').css({'border-right-width':(windowWidth)+'px'}); 
     $('.btmBorder').css({'border-left-width':(windowWidth)+'px'}); 
    }); 
});