Jquery - 너비가 767보다 작 으면 href를 변경하십시오.

Question

현재 반응 형 웹 사이트를 개발 중입니다. 링크의 href 속성을 변경하는 jquery 스크립트를 개발했습니다. 모두 잘 작동

$("a.modal").attr("href", "https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0") 

그 -하지만 단지 767 개 픽셀 (휴대 기기)보다 낮은 화면 폭을 갖는 장치를 타겟팅 할.

이 스크립트는 작동해야하지만 실제로 작동하지 않습니다.

<script type="text/javascript"> 
$(document).ready(function(){ 
if ($(window).width() < 767) { 
$("a.modal").attr("href", "https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0") 
} 
}); 
</script> 

웹 페이지에 링크.

http://visbyfangelse.se.linweb63.kontrollpanelen.se/rum-priser/

그것의 내가 변경하려는 분홍색 버튼에 대한 링크.

Answer 1

문제는 코드의 나머지 부분에 자리 잡고위한 http://caniuse.com/matchmedia를 참조 사용할 수 있습니다. 나를 위해 그것을 파고 들게 해줘서 부끄러운 줄 알아라. : P

$('a[name=modal]').click(function(e) { 
    //Cancel the link behavior 
    e.preventDefault(); 
    // etc etc. 

따라서 preventDefault로 인해 href가 실행되는 것을 방지 할 수 있습니다. 왜 여기에 수표를 패치 : 추가

$('a[name=modal]').click(function(e) { 
    //Cancel the link behavior 
    e.preventDefault(); 
    if ($(window).width() < 767) 
    { 
     // I'm assuming you'd get this dynamically somehow; 
     location.href="https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0"; 
     return; 
    } 
    // etc etc. 

---

| 기능의 전체 텍스트 영업 이익은 자신의 프로젝트 작업을하는 데 도움 :

$('a[name=modal]').click(function(e) { 
    //Cancel the link behavior 

    e.preventDefault(); 
    if ($(window).width() < 767) 
    { 
     // I'm assuming you'd get this dynamically somehow; 
     location.href="https://secured.sirvoy.com/book.php?c_id=1602&h=ea3a7c9286f068fb6c1462fad233a5e0"; 
     return; 
    } 
    //Get the A tag 
    var id = $(this).attr('href'); 

    //Get the screen height and width 
    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 

    //Set height and width to mask to fill up the whole screen 
    $('#mask').css({'width':maskWidth,'height':maskHeight}); 

    //transition effect  
    $('#mask').fadeIn(1000);  
    $('#mask').fadeTo("slow",0.8); 

    //Get the window height and width 
    var winH = $(window).height(); 
    var winW = $(window).width(); 


    //transition effect 
    $(id).fadeIn(2000); 

}); 

Answer 2

당신은

if (window.matchMedia("(max-width:768px)").matches) { 
    $("a.modal").attr("href", "..."); 
} 

window.matchmedia 실제로 호환성 목록

Answer 3

이 스크립트는 모든 브라우저

var viewportwidth; 
var viewportheight; 

//Standards compliant browsers (mozilla/netscape/opera/IE7) 
if (typeof window.innerWidth != 'undefined') 
{ 
    viewportwidth = window.innerWidth, 
    viewportheight = window.innerHeight; 
} 

// IE6 
else if (typeof document.documentElement != 'undefined' 
&& typeof document.documentElement.clientWidth != 
'undefined' && document.documentElement.clientWidth != 0) 
{ 
    viewportwidth = document.documentElement.clientWidth, 
    viewportheight = document.documentElement.clientHeight; 
} 

//Older IE 
else 
{ 
    viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
    viewportheight = document.getElementsByTagName('body')[0].clientHeight; 
} 

경고를 (viewportwidth + "~"+ viewportheight) 화면 크기를 감지하는 데 도움이 될 것입니다

;