How to work with alternate stylesheet in a html page using cookies

**acoder** · Apr 17 '07, 11:11 AM

Use name-value pairs as described on this page. You can use a save button to set the cookie and then on page load read the cookie and set the stylesheet.

**snitu** · Apr 18 '07, 04:23 AM

Originally posted by acoder

Use name-value pairs as described on this page. You can use a save button to set the cookie and then on page load read the cookie and set the stylesheet.

Hi
I have a problem with using cookies.Can u give me proper example of alternate stylesheet using in a html page?

Thanks

**acoder** · Apr 18 '07, 11:14 AM

Originally posted by snitu

Hi
I have a problem with using cookies.Can u give me proper example of alternate stylesheet using in a html page?

Thanks

Well, if you've got it working without cookies, you just need to know how to use cookies and the rest should be easy. Use the functions in the link which makes it easy to create, read and delete cookies. Either use links or buttons to create them. Just store the name of the stylesheet.

Read through and try your hand at it. If you get stuck, post your code.

**snitu** · Apr 21 '07, 07:53 AM

Originally posted by acoder

Well, if you've got it working without cookies, you just need to know how to use cookies and the rest should be easy. Use the functions in the link which makes it easy to create, read and delete cookies. Either use links or buttons to create them. Just store the name of the stylesheet.

Read through and try your hand at it. If you get stuck, post your code.

Hi

I am sending my code plz. check it and reply me.
/----------------------------------------------------------------------------------
[HTML]<html>
<head>
<title>css change</title>
<link rel="stylesheet " type="text/css" href="new.css" title="Red" />
<link rel="stylesheet " type="text/css" href="new1.css" title="Gray" />
<script type="text/javascript">
function setActivestyles heet(newStyle) {
var i, a, main;
for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++)
{
if(a.getAttribu te("rel").index Of("style") != -1 && a.getAttribute( "title"))
{
a.disabled = true;
if(a.getAttribu te("href") == newStyle)
{
a.disabled = false;
//Next section creates the cookie.
var days=365;
var name="Style";
var value=a.getAttr ibute("title");
if (days) {
var date = new Date();
date.setTime(da te.getTime()+(d ays*24*60*60*10 00));
var expires = ";
expires="+date. toGMTString();
}
else expires = "";
document.cookie = name+"="+value+ expires+"; path=/new1.css";

}
}
}

}

window.onload = function(e) {
var cookie = readCookie("Sty le");
if (cookie == null) {
createCookie('S tyle', 'Red', '365');
}
return null;
}

function readCookie(name ) {

var nameEQ = name + "=";
var temp = document.cookie ;

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(name EQ) == 0) return c.substring(nam eEQ.length,c.le ngth);
}
return null;
}

function createCookie(na me, value, days) {
if (days) {
var date = new Date();
date.setTime(da te.getTime()+(d ays*24*60*60*10 00));
var expires = "; expires="+date. toGMTString();
}
else expires = "";
var temp = name+"="+value+ expires+"; path=/new1.css";
document.cookie = temp;

}
function setActiveStyleS heet(newStyle) {
var i, a, main;
for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++)
{
if(a.getAttribu te("rel").index Of("style") != -1 && a.getAttribute( "title"))
{
a.disabled = true;
if(a.getAttribu te("href") == newStyle)
{
a.disabled = false;
//Next section creates the cookie.
var days=365;
var name="Style";
var value=a.getAttr ibute("title");
if (days) {

var date = new Date();
date.setTime(da te.getTime()+(d ays*24*60*60*10 00));
var expires = ";
expires="+date. toGMTString();
}
else expires = "";
document.cookie = name+"="+value+ expires+"; path=/new1.css";
//Above section creates the cookie

}
}
}

}

function getActiveStyleS heet() {
var i, a;
for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++) {
if(a.getAttribu te("rel").index Of("style") != -1 && a.getAttribute( "title") && !a.disabled) return a.getAttribute( "title");
}
return title;
}

function getPreferredSty leSheet() {
var i, a;
for(i=0; (a = document.getEle mentsByTagName( "link")[i]); i++) {
if(a.getAttribu te("rel").index Of("style") != -1
&& a.getAttribute( "rel").indexOf( "alt") == -1
&& a.getAttribute( "title")
)
{
return a.getAttribute( "title");
}
}
//return null;
}

window.unload = function(e) {
var title = getActiveStyleS heet();
createCookie("s tyle", title, 365);

}

</script>
</head>
<body>
<a href="#" onclick="setAct ivestylesheet(' new.css'); return false;">change style to default</a>

<a href="#" onclick="setAct ivestylesheet(' new1.css'); return false;">change style </a>

<p class="aStyleCl ass1">Change Style</p>
</body>
</html>[/HTML]
/------------------------------------------------------------------------------------------------

**acoder** · Apr 26 '07, 12:03 PM

In your onload function, you need to set the stylesheet too. At the beginning, set only one stylesheet, not both. I prefer to use the id to refer to elements.

How to work with alternate stylesheet in a html page using cookies

How to work with alternate stylesheet in a html page using cookies

Comment

Comment

Comment

Comment

Comment