jQuery Window Resize с функцией .bind click

Я пересматриваю гладкую прокрутку сценария привязки, и мой сайт пытается практиковать отзывчивый веб-дизайн. Мне нужно, чтобы функция события click имела только ширину браузера, превышающую 900 пикселей.jQuery Window Resize с функцией .bind click

$(function() { 
    if($(window).width() > 900){ 
     $('article').bind('click',function(event){ 
      stuffHappens; 
     }); 
    } 
});

Я также пробовал использовать функцию .resize окна, но результаты довольно искажены. Конечный результат должен работать при загрузке и проверять размер браузера (в случае его включения или выключения). Предложения?

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

источник

2012-07-03 Joe Wroten

Дубликат этого ответа: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load – Conner

чем вопрос? – undefined

Итак, вы хотите, чтобы событие click работало, только если размер окна> 900? –

Я думаю, что вы ищете

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" /> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.js"></script> 
    </head> 
    <body> 
     <div class="clickme">Click Me</div> 
    </body> 
    <script> 
     $(document).ready(function(){ 
      var handler = function(){ 
       console.log("clicked"); 
      }; 
      var $window = $(window); 

      var setClickHandler = function(){ 
       if($window.width() > 900){ 
        var registered = false; 
        var events = $(".clickme").data("events"); 
        if(events){ 
         var handlers = $(".clickme").data("events").click; 
         if(handlers){ 
          $.each(handlers, function(index, e){ 
           if(e.handler == handler){ 
            registered = true; 
           } 
          }); 
         } 
        } 
        if(!registered){ 
         $(".clickme").on("click", handler); 
        } 
       } else { 
        $(".clickme").off("click", handler); 
       } 
      }; 

      setClickHandler(); 
      $window.on("resize", setClickHandler); 
     }); 
    </script> 
</html>

Это выглядит немного сложнее, но это лучшее, что я мог придумать.
Здесь мы регистрируем и деблокируем обработчик на основе ширины окна.

Другое простое решение для проверки состояния внутри обработчика

  $(document).ready(function(){ 
      var handler = function(){ 
       if($window.width() > 900){ 
        console.log("clicked"); 
       } 
      }; 
      var $window = $(window); 

      $(".clickme").on("click", handler); 
     });

источник

2012-07-03 03:39:53

Извините, Arun. Я не мог заставить этот скрипт работать. Но я нашел решение, отправленное Коннером выше, и поместил полный ответ, который я использовал здесь. Я действительно ценю ваше время, пытаясь помочь мне решить это, хотя! –

Огромное спасибо @Conner за ссылку на jQuery resize function doesn't work on page load

Используя этот код, я был в состоянии расшевелить этот сценарий гладкая прокрутка к любому элементу статьи при нажатии, но только если ширина окна больше 900! Отлично.

onResize = function() { 
    if($(window).width() > 900){ 
     $('article').bind('click',function(event){ 
      var $myPos = $(this); 

      $('html, body').stop().animate({ 
       scrollLeft: $($myPos).offset().left -0 
      }, 500, 'easeInOutExpo'); 
      event.preventDefault(); 
     }); 
    } 
    else{ 
     $('article').unbind('click'); 
    } 
}

источник

2012-07-06 02:20:22

jQuery Window Resize с функцией .bind click

ответ

Смежные вопросы