I'm employing a javascript function that adds a class name to a div, so I can alter the font size of the page... simple enough!
However, I'm stumped as to creating a cookie that will remember this new classname and employ it sitewide, instead of resetting it as soon as I reload or navigate to another sitepage.
I've hashed something together to try and get this to work... font increase is working fine, the cookie part is not.
My (pretty ugly) code is as follows:
HTML Code:
<html><head><SCRIPT>
var standard=(readCookie('my_cookie')==null)?11:readCookie('my_cookie');
function changeClass1() {
document.getElementById("pagecontainer").className = "bigtext";
createCookie('my_cookie',bigtext);
}
function changeClass2() {
document.getElementById("pagecontainer").className = "default";
createCookie('my_cookie',bigtext);
}
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;
}
</SCRIPT><style>
.default {font-size:100%;}
.bigtext {font-size:150%;}
</style></head><body><div id="pagecontainer" class="default">My text to go here</div><br><a href="#" onclick="changeClass1();createCookie();">increase fontsize</a><br><br><a href="#" onclick="changeClass2();createCookie();">reset fontsize</a></body></html>
Tried searching similar scripts and have slightly amended my script, but still isn't remembering my font increase when I refresh the page.
What else am I doing wrong below?:
HTML Code:
<html><head><SCRIPT>
var standard=(readCookie('my_cookie')==null)?'bigtext':readCookie('my_cookie');
function changeClass1() {
document.getElementById("pagecontainer").className = "bigtext";
createCookie('my_cookie','bigtext',5);
}
function changeClass2() {
document.getElementById("pagecontainer").className = "default";
createCookie('my_cookie','bigtext',5);
}
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;
}
</SCRIPT><style>
.default {font-size:100%;}
.bigtext {font-size:150%;}
</style></head><body><div id="pagecontainer" class="default">My text to go here</div><br><a href="#" onClick="changeClass1();createCookie();">increase fontsize</a><br><br><a href="#" onClick="changeClass2();createCookie();">reset fontsize</a></body></html>
Bookmarks