CODEWITHSUNDEEP
javascripthttp-redirect
George Woodiwiss Hill
George Woodiwiss Hill

Reputation: 13

Redirection based on page title/ location

i am trying to get my Online Help to redirect to a phone version. However, i am generating the phone and desktop versions from a single source so I want to have a piece of code that does it each way (phone <-769-> desktop). I got the redirection due to size happening using:

if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";

but when I was on the phone page it kept trying to load the page (i can see why). I had a go myself but I am new to this, here is my (failed) attempt:

windowWidth = window.innerWidth;
<!--
if (location.pathname = "/desktop/Selecting_a_School_Register.htm";) 
{
} else if (screen.width <= 769 || windowWidth <= 769) {
window.location = "../phone/Selecting_a_School_Register.htm";

}
</script><script>
if (location.pathname = "/phone/Selecting_a_School_Register.htm";) 
{
} else if (screen.width >= 769 || windowWidth >= 769) {
window.location = "../desktop/Selecting_a_School_Register.htm";

}

Upvotes: 1

Views: 141

Answers (2)

Vishal Patel
Vishal Patel

Reputation: 973

Hi,

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Example :

To check to see if the user is on any of the supported mobile devices:

if( isMobile.any() ) alert('Mobile');

To check to see if the user is on a specific mobile device:

if( isMobile.iOS() ) alert('iOS');

Thank you, Vishal Patel

Upvotes: 0

royse41
royse41

Reputation: 2368

Any type of conditional statement needs a double '==' as opposed to a single '=' like your code example suggests. Also, you don't need a semi-colon after your string in your if statements.

Even better than a double equals is a triple equals which is a strict comparison operator

Try this:

windowWidth = window.innerWidth;

if (location.pathname === "/desktop/Selecting_a_School_Register.htm") {
} 
else if (screen.width <= 769 || windowWidth <= 769) {
    window.location = "../phone/Selecting_a_School_Register.htm";
}

if (location.pathname === "/phone/Selecting_a_School_Register.htm") {
} 
else if (screen.width >= 769 || windowWidth >= 769) {
    window.location = "../desktop/Selecting_a_School_Register.htm";
}

EDIT:

This code does exactly what you need:

var pathname = window.location.pathname
  , width = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;

if (width <= 769 && pathname !== '/mobile.html') {
    window.location = '/mobile.html';
}

if (width > 769 && pathname !== '/desktop.html') {
    window.location = '/desktop.html';
}

Upvotes: 1

Related Questions