Jquery - If width less than 767 then change href

Question

I am currently developing a responsive website. I've developed a jquery script that changes the href attribute in a link.

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

Its working all fine - but i want it only to target devices that has a lesser screen width than 767 pixels (mobile devices).

this script should work but i cant really get it to work.

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

Link to the webpage.

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

Its the link for the pink buttons i want to change.

Have you checked the sites in any device having size less than 767px? Did u try to alert `$(window).width()` in that case? If you are resizing the browser to test it, then u should probably add that code in `$(window).resize(function () {} );` event as well. — codef0rmer, Apr 17 '12 at 08:14

John Green · Accepted Answer · 2012-04-17T08:33:15.200

The problem lies in the rest of your code, actually. Shame on you for making me dig for it. :P

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

So, you prevent the href from firing because of preventDefault. Why not just patch your check in here:

$('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.

Added | Full text of function to help OP make his project work:

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

});

Don't know what to tell you, I just patched your code live on your site through the console and it worked fine. — John Green, Apr 17 '12 at 08:25
Whaat... so strange lol. i tried to code you gave me , but it didnt work at all :( — Fruxelot, Apr 17 '12 at 08:26
I just posted the full text of your function. I did this on through the console by simply typing `$('a[name=modal]').off('click');` to reset the event listener then pasted the snipped above in. The document.ready() stuff isn't necessary for that, since it was clearly ready by the time I was typing into the console. — John Green, Apr 17 '12 at 08:34
Oh, and looking at the code, I've no idea what you're trying to do with this, which doesn't make any sense: `$(id).fadeIn(2000);` — John Green, Apr 17 '12 at 08:36

Fabrizio Calderan · Answer 2 · 2012-04-17T08:31:23.350

0

you could use window.matchmedia

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

See http://caniuse.com/matchmedia for a compatibility list

edited Apr 17 '12 at 08:31

answered Apr 17 '12 at 08:12

Fabrizio Calderan

120,726
26
164
177

in which browser? what's the current device resolution? – Fabrizio Calderan Apr 17 '12 at 08:15
Right now i am running Chrome And im testing the website on iphone 3gs and HTC incredible S – Fruxelot Apr 17 '12 at 08:20
afaik window.matchMedia should work on iOS5 Safari (probably not on iphone 3gs) - no guess for htc, sorry (maybe an older version of Opera mini?) :( . – Fabrizio Calderan Apr 17 '12 at 08:24

score 0 · Answer 3 · answered Sep 05 '13 at 06:30

this script will help you to detect screen size for all browsers

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

Jquery - If width less than 767 then change href

3 Answers3