469,272 Members | 1,432 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,272 developers. It's quick & easy.

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

30
Hello
I have a problem with how to use alternate stylesheet in my site home page using cookies.
Normal html file is working with out using cookies.But i have to give authority to customer to use their own stylesheet for showing the home page of my site .


If any one done this plz......................
Reply me.
Thanks.
Apr 17 '07 #1
5 1732
acoder
16,027 Expert Mod 8TB
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.
Apr 17 '07 #2
snitu
30
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
Apr 18 '07 #3
acoder
16,027 Expert Mod 8TB
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.
Apr 18 '07 #4
snitu
30
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 setActivestylesheet(newStyle) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("href") == newStyle)
{
a.disabled = false;
//Next section creates the cookie.
var days=365;
var name="Style";
var value=a.getAttribute("title");
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = ";
expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/new1.css";

}
}
}

}

window.onload = function(e) {
var cookie = readCookie("Style");
if (cookie == null) {
createCookie('Style', '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(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

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 expires = "";
var temp = name+"="+value+expires+"; path=/new1.css";
document.cookie = temp;

}
function setActiveStyleSheet(newStyle) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
{
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title"))
{
a.disabled = true;
if(a.getAttribute("href") == newStyle)
{
a.disabled = false;
//Next section creates the cookie.
var days=365;
var name="Style";
var value=a.getAttribute("title");
if (days) {

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

}
}
}

}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
}
return title;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
&& a.getAttribute("rel").indexOf("alt") == -1
&& a.getAttribute("title")
)
{
return a.getAttribute("title");
}
}
//return null;
}


window.unload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);

}



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

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


<p class="aStyleClass1">Change Style</p>
</body>
</html>[/HTML]
/------------------------------------------------------------------------------------------------
Apr 21 '07 #5
acoder
16,027 Expert Mod 8TB
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.
Apr 26 '07 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

21 posts views Thread by Steel | last post: by
5 posts views Thread by User | last post: by
1 post views Thread by Eric Lindsay | last post: by
6 posts views Thread by scottyman | last post: by
4 posts views Thread by E | last post: by
9 posts views Thread by johkar | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.