www.webdeveloper.com
Results 1 to 15 of 15

Thread: Javascript Cookie Setting and Mobile Site Redirection - TOTALLY NEW TO JAVASCRIPT

  1. #1
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26

    Javascript Cookie Setting and Mobile Site Redirection - TOTALLY NEW TO JAVASCRIPT

    Ok, so i know basic HTML, and CSS and i have created my own personal portfolio website and i have hosting and a domain. I created a mobile version, and found a small Javascript code snippet that redirects a client depending on their screen resolution. This is awesome so that people viewing my site can view the mobile version and not the regular version, but i want them to be able to view the full site if they wish, so i know that to do that i need to set a cookie so the browser will know when the client tries to view the regular site again to let them.

    I HAVE NO IDEA HOW TO PROGRAM JAVASCRIPT.

    So is there a thread here that explains what im trying to do?

    Is it possible to do this with Javascript?

    Is it easier to do it with PHP?

    Does anyone have any good links to teach a beginner how to do this?

    I thank you all sincerely,

    Ryan

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You don't need any fancy JavaScript to get this done. Just use simple HTML hyperlinks to give the user the option for the mobile or desktop version of your site.

  3. #3
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    well the way i wanted to have it set up is like other mobile sites i have found, where if you visit on a mobile device you get redirected to a mobile version, but you can click a "Full Site" link to view the full site, but to do that you need cookies... i figured the less work that a potential client has to do the better. heres the mobile link so you have an idea, and the full site too

    http://www.ryanblajda.com

    http://www.ryanblajda.com/mobile.html

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    what if the user has cookie disabled on his mobile device? if the site using php, i would think about passing 'mobile' or 'full' mode through the $_SESSION
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    ^^ well firstly, i understood everthing before $_SESSION. i have no idea how to program in PHP. so if you could explain how that works that would be awesome. and here is what i have so far that redirects to the mobile site. it does it by determining how big your resolution is. (I know its not fool proof, but its a good start)

    Code:
    <script type="text/javascript">
    <!--
    if (screen.width <= 600) {
    	window.location = "http://www.ryanblajda.com/mobile.html";
    }
    //-->
    </script>

  6. #6
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    i write my own code, but i write it in Dreamweaver that way i can use the live view to try and troubleshoot on the fly. they had a couple cookie javascript snippets i thought might be interesting.... i have no idea whether this is right but would this work sort of?

    Code:
    <script type="text/javascript">
    <!--
    if (screen.width <= 600) {
    	window.location = "http://www.ryanblajda.com/mobile.html";
    }
    	// Example:
    	// writeCookie("myCookie", "my name", 24);
    	// Stores the string "my name" in the cookie "myCookie" which expires after 24 hours.
    function writeCookie(name, value, hours)
    {
      var expire = "";
      if(hours != null)
      {
        expire = new Date((new Date()).getTime() + hours * 3600000);
        expire = "; expires=" + expire.toGMTString();
      }
      document.cookie = name + "=" + escape(value) + expire;
    }
    // Example:
    // alert( readCookie("myCookie") );
    function readCookie(name)
    {
      var cookieValue = "";
      var search = name + "=";
      if(document.cookie.length > 0)
      { 
        offset = document.cookie.indexOf(search);
        if (offset != -1)
        { 
          offset += search.length;
          end = document.cookie.indexOf(";", offset);
          if (end == -1) end = document.cookie.length;
          cookieValue = unescape(document.cookie.substring(offset, end))
        }
      }
      return cookieValue;
    }
    
    	//-->
    </script>

  7. #7
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    some people have mobile devices without javascript and may have also cookie disabled. i play an online game and sometimes i have to visit the game when i'm not at home. i use my cell phone for that and it doesn't support javascript. so the code above will do nothing on my cell phone.

    from the other hand, $_SESSION is an array where you can store various variables in and this way you can form every link on your page. if you have 2 versions of your site in separate folders (full|root and mobile) on the server you can form your links depending on what is stored in for example $_SESSION['mode'] variable: in case it is not set or empty the user goes to the full site but if it is set to 'mobile' he goes to the mobile/ directory

    i'm afraid my english is not good enough to explain it clear but i hope there are many people who can explain this idea to you better than me
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  8. #8
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    no your english is actually really good. i just dont know anything about programming in PHP to create what you are talking about. that is what i did not understand.

  9. #9
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    http://php.net/results.php?q=%24_SESSION&p=manual&l=en here you can read about $_SESSION
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  10. #10
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,119
    You'll want to create a cookie when someone clicks the Full Site link. To do this, you'll want to add an onclick event to create the cookie.

    <a href="index.html" onclick="writeCookie('fullsite', 't')">Full Site</a>

    This will create a cookie called fullsite. Next, you'll need to edit the piece of the script that redirects mobile visitors.

    Code:
    <script type="text/javascript">
    	<!--
    	var fullSiteCookie = readCookie('fullsite');
    	if (fullSiteCookie != 't') {
    		if (screen.width <= 600) {
    			window.location = "http://www.ryanblajda.com/mobile.html";
    		}
    	}
    	//-->
    </script>
    Basically, your reading the value on the fullsite cookie. If it's not equal to "t" (as we previously set it), then we are going to execute the redirect script.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  11. #11
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    thanks! this is so helpful thanks! can i leave a credit in my source code to your linkedin? i never would have figured this out.
    Last edited by ryanjblajda; 01-27-2013 at 05:40 PM.

  12. #12
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    um actually that didnt seem to work.

  13. #13
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    never mind. i missed the last ' on 'fullsite'

  14. #14
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    well...still didnt work. hm

  15. #15
    Join Date
    Jan 2013
    Location
    Winter Park, FL
    Posts
    26
    well the script allows you to go to the mobile site, but it wont re-direct you from a mobile device.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles