Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    mobile phone and large websites

    I have
    Code:
    <script type="text/javascript"> 
    <!-- 
    if (screen.width <= 699) { 
    document.location = "mobile/indexmobile.html"; 
    } 
    //--> 
    </script>
    in my index.html page of my website to re-route small screen browsers to a small version of my site.
    I appreciate that some mobile phone users will want to view my main site rather than my mobile version. So I wondered what code I could use that would identify a second visit from the same phone and allow it to view my main site rather than re-routing it again to the mobile site.
    This way, I could simply have a link on the mobile site that says "Visit Main Site".
    Any help much appreciated.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,033
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Use a cookie to detect whether the user has visited this site before.

    But why not just have "Visit Main Site" as a link even on the first visit?

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok but I prefer to have it automatically redirect so mobiles get a fast loading page as a first option.

    How do I go about using a cookie in this way?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,033
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by alan82 View Post
    How do I go about using a cookie in this way?
    Cookies have been covered very many times in this forum. Try using the search feature.

    Here is a suitable example:-

    Code:
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else {var expires = ""}
    document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }
    
    function eraseCookie(name) {
    createCookie(name,"",-1);
    }
    </script>
    </head>
    
    <body>
    <div id = "message"></div>
    
    <script type="text/javascript">
    // place this script immediately before the </body> tag.
    if(!readCookie('beenHereBefore')) {
    document.getElementById("message").innerHTML = "You have not visited this site before.";
    createCookie('beenHereBefore', 'beenHereBefore', 365);  // 365 days persistence
    }
    else {
    document.getElementById("message").innerHTML = "You have visited this site before.";
    }
    
    </script>
    
    </body>
    </html>
    Last edited by Philip M; 07-17-2012 at 08:54 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #5
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ok thanks for that.
    So would this suit my purpose? I added document.location = "mobile/indexmobile.html"; after if(!readCookie('beenHereBefore')) {


    Code:
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    function createCookie(name,value,days) {
    if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
    }
    else {var expires = ""}
    document.cookie = name+"="+value+expires+"; path=/";
    }
    
    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
    }
    
    function eraseCookie(name) {
    createCookie(name,"",-1);
    }
    </script>
    </head>
    
    <body>
    <div id = "message"></div>
    
    <script type="text/javascript">
    // place this script immediately before the </body> tag.
    if(!readCookie('beenHereBefore')) {
    document.location = "mobile/indexmobile.html"; 
    
    createCookie('beenHereBefore', 'beenHereBefore', 365);  // 365 days persistence
    }
    else {
    document.getElementById("message").innerHTML = "You have visited this site before.";
    }
    
    </script>
    
    </body>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,033
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Quote Originally Posted by alan82 View Post
    ok thanks for that.
    So would this suit my purpose? I added document.location = "mobile/indexmobile.html"; after if(!readCookie('beenHereBefore')) {
    No - you must create the cookie before the page redirect. And document.location is a (deprecated but still present) read-only string property.

    Code:
    if(!readCookie('beenHereBefore')) {
    createCookie('beenHereBefore', 'beenHereBefore', 365);  // 365 days persistence
    window.location.href = "mobile/indexmobile.html"; 
    }
    Last edited by Philip M; 07-18-2012 at 10:32 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I appreciate the help.
    It occurred to me that I am forcing a second visit to the the main website when in fact the visitor may want to return to the mobile site version.
    I am thinking the only way round this is to ensure the same content is on the mobile as is on the main site but kept much lighter. (very small file sizes for pictures and only css for styling (no images).
    I still want that fast download experience so I will use the...
    Code:
    <script type="text/javascript"> 
    <!-- 
    
    if (screen.width <= 699) { 
    window.location.href = "mobile/indexmobile.html"; 
    } 
    //--> 
    </script>
    Instead of the deprecated one I used initially.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,033
    Thanks
    203
    Thanked 2,539 Times in 2,517 Posts
    Simply give your visitor, if he is using a mobile device, the option to visit the main site if he wishes.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #9
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Untested and oversimplified...

    How about something like below (for index.html):
    PHP Code:
    <script type="text/javascript">
    var 
    location.search.substr(1).split('=');
    if ( (
    q[0] == 'noReRoute') && (q[1] == 'true') ){
      
    //nothing to do, let user into desktop version
    }
    else{
      if (
    screen.width <= 699){ 
        
    window.location.href "index_mobile.html";
      }
    }
    </script> 
    And include a link there (index.html too):
    PHP Code:
    <a href="index_mobile.html?noReRoute=true">Mobile</a
    So your index_mobile.html shall have that same code but with screen.width logic reversed, and with links to index.html
    Last edited by hdewantara; 07-20-2012 at 07:36 PM. Reason: Mistyped

  • #10
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok (as suggested by hdewantara) for my index.html page I have

    (within the head tags)
    Code:
    <script type="text/javascript">
    var q = location.search.substr(1).split('=');
    if ( (q[0] == 'noReRoute') && (q[1] == 'true') ){
      //nothing to do, let user into desktop version
    }
    else{
      if (screen.width <= 699){ 
        window.location.href = "indexmobile.html";
      }
    }
    </script>
    and this within the body.
    Code:
    <a href="indexmobile.html?noReRoute=true">Mobile</a>

    for the indexmobile page i have
    (Again in the header.)
    Code:
    <script type="text/javascript">
    var q = location.search.substr(1).split('=');
    if ( (q[0] == 'noReRoute') && (q[1] == 'true') ){
      //nothing to do, let user into desktop version
    }
    else{
      if (screen.width >= 699){ 
        window.location.href = "index.html";
      }
    }
    </script>
    and in the body
    Code:
    <a href="index.html?noReRoute=true">main site</a>
    I still have the problem that if the mobile phone visitor specifically wants to visit my main index.html page, **when they click on "main site" in the indexmobile.html page, it still redirects back to indexmobile.html instead of going to index.html.

    So I'm very happy with the idea that the mobile visitor is automatically directed to the indexmobile.html (nice and fast), and even happier that he is then able to visit the main site using a "main site" link on the indexmobile.html page.

    The problem I am having is that the **last bit isn't working with the code i'm using above. (namely, the visitor can't get to my main site with a mobile phone).

  • #11
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    Dunno if you're up for a bit of server side code, but I do this via allowing a parameter on the index page. For example, http://www.example.com/index.php?page=mobile, or ?page=desktop, both of which circumvent all checking for other things like screen width, and just go to the requested page. I use that in the "I'm on a mobile, but really I want to see the large site" link (and the converse on the large site page).

    Dave

  • #12
    New Coder
    Join Date
    Jan 2011
    Posts
    21
    Thanks
    3
    Thanked 0 Times in 0 Posts

    sorry

    apologies to hdewantara
    Ok (as suggested by hdewantara) for my index.html page I have
    I made a mistake at my end and it was all working very well now. So thank you.


    Dunno if you're up for a bit of server side code
    Yes I would be interested to also find out more about the server sided code.
    Can you explain further how this would work?

  • #13
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,269
    Thanks
    10
    Thanked 277 Times in 276 Posts
    You would do something like this, toward the top of your index file (php example):
    PHP Code:
        switch($_GET['page'])
            {
        case 
    'mobile':
            
    $mode "mobile";
            
    // display mobile index page
            
    break;
        case 
    'desktop':
            
    $mode "desktop";
            
    // display desktop version of index page
            
    break;
        default:
            
    // do all the js you're currently doing to detect and display the correct 
             // page based on screen width
            
    break;
            } 
    Then on the mobile site, you could put a link like:
    Code:
    <a href="index.php?mode=desktop">Click here for full version of site</a>
    Dave

  • #14
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    @Alan82: You're welcome. I'm glad it works
    @Dave: Yes, parameter passing this way should be best handled by server side's. My oversimplified code might be problematic whenever there are other parameters to be passed as well.

    Hendra


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •