반응 형 디자인을 위해 javascript를 비활성화하는 방법

Question

나는 내 웹 사이트의 슬라이드 쇼 배경에 대해 supersized jQuery를 사용 해왔다. 나는 웹 사이트를 반응 형으로 만들고 CSS 미디어 쿼리를 사용하고있다.

480px 미만인 경우 스크립트를 비활성화 할 수 있기를 원합니다. 여기

은 디스플레이로 #supersized 퍼팅 내 미디어 쿼리의 예를 들면, 나는 그냥 CSS를 사용하여 간단하게이 작업을 수행 할 수있는 생각의 실제 슬라이더 배경

$(document).ready(function(){ 

     jQuery(function($){ 

      $.supersized({ 

       // Functionality 
       slideshow    : 1,   // Slideshow on/off 
       autoplay    : 0,   // Slideshow starts playing automatically 
       start_slide    : 1,   // Start slide (0 is random) 
       stop_loop    : 0,   // Pauses slideshow on last slide 
       random     : 0,   // Randomize slide order (Ignores start slide) 
       slide_interval   : 3000,  // Length between transitions 
       transition    : 6,   // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 
       transition_speed  : 1000,  // Speed of transition 
       new_window    : 1,   // Image links open in new window/tab 
       pause_hover    : 0,   // Pause slideshow on hover 
       keyboard_nav   : 1,   // Keyboard navigation on/off 
       performance    : 1,   // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 
       image_protect   : 1,   // Disables image dragging and right click with Javascript 

       // Size & Position       
       min_width    : 0,   // Min width allowed (in pixels) 
       min_height    : 0,   // Min height allowed (in pixels) 
       vertical_center   : 1,   // Vertically center background 
       horizontal_center  : 1,   // Horizontally center background 
       fit_always    : 0,   // Image will never exceed browser width or height (Ignores min. dimensions) 
       fit_portrait   : 1,   // Portrait images will not exceed browser height 
       fit_landscape   : 0,   // Landscape images will not exceed browser width 

       // Components       
       slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') 
       thumb_links    : 1,   // Individual thumb links for each slide 
       thumbnail_navigation : 0,   // Thumbnail navigation 
       slides     : [   // Slideshow Images 
                {image : '/img/backgrounds/street-dance-background.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', url : 'http://www.nonsensesociety.com/2011/04/maria-kazvan/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', url : 'http://www.nonsensesociety.com/2011/03/colin/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'}, 
                {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', url : 'http://www.nonsensesociety.com/2011/06/brooke-shaden/'} 
              ], 

       // Theme Options    
       progress_bar   : 1,   // Timer for each slide       
       mouse_scrub    : 0 

      }); 
     }); 

위한 스크립트입니다 : 없음

그래도 여전히 스크립트를 실행하고 어떻게 든 사용을 중지하는 것이 가장 좋으므로 나쁜 관행입니까?

Answer 1

언급했듯이 많은 jQuery 플러그인을 사용할 수 있습니다. 그러나, 사용하고자하는 모든 것이 단지 바닐라 jQuery 일 뿐이라면 원하는 것을 할 수 있습니다.

jquery에서 resize 메서드를 사용하여 창의 크기를 감지 할 수 있습니다.그렇지 않으면

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

PS> : 그것은 처음에 윈도우의 현재 크기에 따라 메소드를 호출 전화를하거나하지 않도록

$(window).resize(function() { 
    if ($(this).width() > 480) { 
     // call supersize method 
    } 
}); 

그런 다음 준비 문서에, 단지 크기 조정 창을 호출해야합니다 창 크기가 조정될 때마다이 스크립트를 실행해야하지만, 480 픽셀 미만에 도달 할 때만 스크립트를 비활성화하거나 활성화해야하는 경우 resize 메서드를 바인딩 해제 할 수 있습니다.

Answer 2

jRespond, Viget 발표 한 스크립트는 뷰포트의 크기에 따라 자바 스크립트를 제어 할 수 있습니다 :

기사 : http://viget.com/inspire/managing-javascript-on-responsive-websites

코드 : https://github.com/ten1seven/jRespond

Answer 3

당신은 어떤 CSS 규칙 내에서 함께 숨겨진 DIV를 설정할 수 있습니다 미디어 쿼리를 실행 한 다음 jQuery의 css()으로 CSS 속성을 확인하고 슬라이드 쇼를 켜거나 끄십시오. 특히 :

@media all and (max-width: 480px) { 
    #testdiv{ 
     display:none; 
    } 
} 

그리고 JS :

이 본질적으로 실제로 라이브러리를 점점없이 모더 나이저 접근 방식을 사용하고 있음을

if($("#testdiv").css("display") == "none"){ 
    $.supersized({...}); 
} 

참고.

Answer 4

@Pointy가 주석에서 언급했듯이, modernizr은 자바 스크립트에서 미디어 쿼리를 호출 할 수있게합니다. modernizr documentation

Answer 5

screen.width를 사용하여 JavaScript로 화면 너비를 감지 한 다음 그곳에서 수행 할 작업을 결정할 수 있습니다.

if(screen.width < 480) { 
    // do any 480 width stuff here, or simply do nothing 
    return; 
} else { 
    // do all your cool stuff here for larger screens 
} 

랩 애니메이션의 모든 모든 코드가 아닌 화면 크기가주의의 단어 미만 480

되는 경우에 대한 다른 블록 내에서 실행하고자 할 , IE는 다른 일을하는 경향이 있으며 테스트 할 IE가 없으므로 필요할 경우 screen.width를 실행하고 차이점을 조정할 수 있습니다. 그러나 Chrome에서 screen.width는 화면의 너비가 올바른 1280을 반환합니다.

Answer 6

나는 Asad의 해결책이 최고라고 생각하거나 당신이 현대를 사용한다고 생각합니다. JS 및 CSS가 아닌 단일 파일에 중단 점 정의 (480px)가 있기 때문입니다. SCSS를 사용하는 경우 변수에 중단 점 정의가 하나만 있습니다.