Could you help me with this javascript code?

Hi, Can you help me to correct this code?

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 401) {
        document.location.href = "http://www.mysite.com/one.htm";


    } else if ((width >= 401) && (width < 800)) {
     document.location.href = "http://www.mysite.com/two.htm";
    } else {
       document.location.href = "http://www.mysite.com/three.htm";
    }
}


$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Code (markup):

Thanks

 

Well it depends what your trying to achieve but I'd write it like this;

function adjustStyle(width)
{   
    width = parseInt(width);    
    if(width < 401) window.location.href = "http://www.mysite.com/one.htm";    
    else if ((width > 400) && (width < 800)) window.location.href = "http://www.mysite.com/two.htm";    
    else window.location.href = "http://www.mysite.com/three.htm";
}

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

Code (markup):

Don't use document.location.href - It produces some crazy results in browsers. You were nearly there just a few name and logic changes.

Thanks
Andrew

 

Thanks, I tried those changes, but it actually flickers more now. I'm trying to find an alternative to using media queries, to link appropriate pages for different width screens, like smartphones etc. This is my test page: www.profesornativo(dot)com/testjav.htm

 

Well 2 things, firstly your using jQuery 1.4, you need to move that up to jQuery 1.7.1. Secondly the function is being called on every page. It should only be called once on an index.html page, and thats it. Then it will detect the screen size and send the user to the appropriate page.

However if your trying to do that it would be better to run REGEX queries on the user agent to find out if its a phone, tablet, pc etc. Screen size is quiet ambigous to find out the device. For example, an iPad could have a bigger size window than some laptop monitors, in addition, the iPad will require touch controls for some things rather than usual mouse controls, this requires special JS programming using Apple's extra touch library.

It may be better to use something like Sencha for phone/tablet stuff, they have a touch device JS library unlike jQuery which is targetted solely for PC's.

Thanks
Andrew

 

All sounds a bit complicated. I did manage before to get a similar script working (though maybe not totally orthodox) , by calling css stylesheets, not URL's.

Like this:

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 401) {
        $("#size-stylesheet").attr("href", "mobile.css");
    } else if ((width >= 401) && (width < 800)) {
        $("#size-stylesheet").attr("href", "cs.css");
    } else {
       $("#size-stylesheet").attr("href", "css.css"); 
    }
}


$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Code (markup):

But the thing is, I was hoping to find a way to get a 4 column html table (on larger screens) to automatically break into 2 columns for smartphones. There is a way of doing this but IE 8 doesn't seem to implement it. To get around this, I thought of linking to .htm pages, instead of .css stylesheets - but maybe it's not a good approach? Thanks.

 

Your still causing massive CPU load on the client and huge amounts of HTTP requests doing that. Its a silly way to do things.

My proposed solution is very simple, if you don't want to use User Agents then at least only run that code on a landing page and have it run only once to decide which other page to visit. At the moment your hammering people's browsers and putting enormous strain on your HTTP server. If you get a couple of people on that site at once you could even trigger a security alarm as the server thinks its being DDOS'd.

Thanks
Andrew