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?
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.
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
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
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
^^ 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)
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>
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
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
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.
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!
Reply With Quote
Bookmarks