Jquery : 브라우저 크기에 따라 이벤트 수행

내 웹 사이트에서 브라우저보기 포트 크기가 480px 미만이되면 단락을 아코디언 메뉴로 바꾸기를 원합니다. 이 경우에만 브라우저가 처음로드를 트리거 제외Jquery : 브라우저 크기에 따라 이벤트 수행

$(document).ready(function(){ 
    var pageWidth = $(window).width(); 
    if (pageWidth <= 480) { 

$('.data > h3').addClass('jqlink'); 
$('.data ').addClass('jqbg'); 
$('.data>h3').append('<p>[+]</p>'); 
    $('.data > p').hide(); //hide the event 

    $('.data > h3').click(function(){ //clicked on the title 
     if($(this).next().is(':visible')){  //is this question already visible? 
     $(this).next().hide('fast');   //hide it (toggle) 
     }else{ 
     $('.data > p:visible').hide('fast'); //otherwise, hide whatever is currently visible 
     $(this).next().show('fast');     //show the question we clicked on 
     } 
    }); 

} });

그것은 훌륭하게 작동합니다

이

내가 그것을 달성하기 위해 사용하고있는 코드입니다. 로드 후 브라우저의 크기가 변경되면 코드가 제대로 작동하지 않습니다.

나는 .resize() 명령을 알고 있습니다. 그러나 브라우저 크기가 조정 된 경우에만 작동하는 것 같습니다. 브라우저가 처음로드 될 때 브라우저가 480px 미만인 경우 사용자가 브라우저의 크기를 조정하면 코드가 실행됩니다.

크기를 조정하고 브라우저를로드 할 때 코드가 작동하도록하려면 어떻게해야합니까?

출처

2011-11-26 big_smile

당신이 아무튼 위에있는 코드 언급) (크기 조정을 사용하여 브라우저로드시 트리거? –

OP는 브라우저로드 및 브라우저 크기 조정 모두에서 트리거하려고합니다. – ManseUK

표준 CSS 미디어 유형 http://www.w3.org/TR/CSS2/media.html과 미디어 쿼리 http : //www.w3을 사용할 수 있습니다. org/TR/css3-mediaqueries /와 같은 많은 크기 조정 작업을합니다. 예를 들어 자바 스크립트없이 다양한 레이아웃을 타겟팅 할 수 있습니다. 나머지 필요한 동작을 위해 맨 위에 JavaScript를 레이어하십시오. 이 블로그 게시물은 결과를 얻기 위해 함께 사용되는 미디어 쿼리 및 자바 스크립트에 대한 몇 가지 샘플 정보를 제공합니다. http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/ 페이지가 불필요하게 자바 스크립트 일 수 있습니다. 당신이 어떤 브라우저를 대상으로하는지에 따라 무겁습니다. –

function checkWindowSize() { 
    var pageWidth = $(window).width(); 
    if (pageWidth <= 480) { 

    } 
} 

$(document).ready(function() { 
    checkWindowSize(); 
    $(window).resize(checkWindowSize); 
});

는

출처

2011-11-26 13:57:01 ManseUK

이것은 아주 좋습니다. 그러나 유일한 문제는 브라우저 메뉴가 480px를 지나갈 때마다 아코디언 메뉴가 페이지에 추가된다는 것입니다. 예를 들어, 브라우저의 크기가 480px에서 470px로 변경 될 때까지 10 개의 메뉴가 나타납니다. 이 주위에 어쨌든 (메뉴가 한 번만 나타납니다)? 나는 Jquery를위한 CSS 미디어 쿼리와 동일한 것을 찾고 있다고 생각한다. –

추가하기 전에 아코디언이 이미 존재하는지 확인하십시오 !!!질문에 아코디언 코드 추가 – ManseUK

코드를 확인하는 방법을 모르겠습니다. 그러나 아코디언 코드를 오프닝 포스트에 추가했습니다. 귀하의 지속적인 도움에 감사드립니다! –

는 .resize() 방법을 참조하십시오 ... 트릭을 할 및 코드의 중복을 방지해야한다. 문서를 처음로드 한 다음 창 변경을 듣고는 480 픽셀 이하로 떨어질 때까지 기다릴 때

다음은 창 크기에 먼저 체크, Example, 또는이 예에서 full window version

편집 : 필요한 조치가 한 번만 수행되도록 변수와 조건을 포함하도록 예제를 업데이트했습니다. 당신이 모더 나이저에서 미디어 쿼리를 사용하여 페이지로드

출처

2011-11-26 13:57:02

이것은 훌륭하지만 ManseUK의 솔루션과 동일한 문제가 있습니다. 그래도 도와 줘서 고마워! –

@big_smile은 단순히 아코디언이 존재하는지 여부에 대한 조건을 추가합니다. 제 예제에 추가하겠습니다 ... –

귀하의 지속적인 도움에 감사드립니다! JSFiddle 예제에서, 윈도우의 크기를 얼마로 할지라도 텍스트에는 False라고 표시됩니다. –

는 :

http://www.modernizr.com/docs/#mq은 (Modernizr.mq ('에만 모든과 (최대 폭 : 480 픽셀)'경우) {

는 // 당신의 협정을 초기화하기

}

이 의지 설정 페이지로드에 480 픽셀 이하의 모든 뷰포트에 따라. 크기 조정의 경우, '

출처

2011-11-26 16:25:04

Jquery : 브라우저 크기에 따라 이벤트 수행

답변

관련 문제