2

私は現在、レスポンシブ Web サイトを開発しています。リンクの 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/

変更したいピンクのボタンのリンクです。

4

3 に答える 3

6

実際、問題はコードの残りの部分にあります。私にそれを掘り起こさせてくれて残念です。：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.

追加 | OPがプロジェクトを機能させるのに役立つ機能の全文：

$('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); 

});
于 2012-04-17T08:15:14.597 に答える
0

window.matchmediaを使用できます

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

互換性リストについては、http://caniuse.com/matchmediaを参照してください

于 2012-04-17T08:12:07.773 に答える
0

このスクリプトは、すべてのブラウザの画面サイズを検出するのに役立ちます

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;
}

alert( viewportwidth + "~" + viewportheight);

于 2013-09-05T06:30:42.140 に答える