Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Please help in these dynamic style sheets

Status
Not open for further replies.
tsisher

tsisher

Programmer
Sep 14, 2004
36
GB
Say I have got a dropdown list having list of different style sheet. What I want is

1) When a user select any one of these style sheets from the drop down list and it should apply to the whole page.

2) If the User closes the window the system should remember his last style sheet so that when the next time user gets on this page the last selected style sheet should be applied to the page.(some where stroing the values in the cookie and reading from the cookie)

I have tried so many things but ??????
If any one has code help that would be very helpful.
I'll appreciate your help.


Regards



 
Sort by date Sort by votes
I remember one old thread... there it is: thread216-832129.
 
Upvote 0 Downvote
Thanks a lot mate. A big big huge star to you..

Thanks all.
 
Upvote 0 Downvote
One last question

Is there any way using this example we set Intial style sheet .. I mean when this page comes up first there is no style sheet apllied to this. What I want there should be one style sheet applied to web form. Then user can change to any one one ..



example

<html>
<head>
<link id="external_style" rel="stylesheet" type="text/css">
</head>
<body onload="loadStyle()">
<script language="javascript">
var CSS_COOKIE_VAR = "LastCSS";

function changeStyle( oSel )
{ if (sCSS = oSel.value)
{ setStyle( sCSS );
var expires = new Date( 2010, 1, 1 ); // long enough :)
document.cookie = CSS_COOKIE_VAR + "=" + escape( sCSS ) +"; expires=" + expires.toGMTString() + ";" ;
}
}

function setStyle( sCSS )
{ document.getElementById("external_style").href = sCSS;
}

function loadStyle()
{ aCookie = document.cookie.split(";");
for (i=0; i< aCookie.length; i++)
{ aName = aCookie.split("=");
if (aName[0] == CSS_COOKIE_VAR )
{ setStyle( aName[1] );
document.getElementById("control").value = aName[1];
}
}
}
</script>
<form>
<select id="control" name="style" onchange="changeStyle(this)">
<option value="">-- Choose style --</option>
<option value="red.css">Red</option>
<option value="green.css">Green</option>
<option value="blue.css">Blue</option>
</select>
</form>
<hr>
Blah blah blah

</body>
</html>


Thanks alot
 
Upvote 0 Downvote
hey vongrunt--

Out of curiosity-

why does the first if statement in the code you provided have a single =, rather than a double?

Where is sCSS defined?

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
rsisher: try this (I posted changes only):
Code: 
var CSS_DEFAULT_STYLE = "green.css";
...
function loadStyle()
{	aCookie = document.cookie.split(";"); 
	style = CSS_DEFAULT_STYLE;
	for (i=0; i< aCookie.length; i++)
	{	aName = aCookie[i].split("=");
		if (aName[0] == CSS_COOKIE_VAR )
			style = aName[1];
	}
	
	setStyle( style );
   document.getElementById("control").value = style;
}
cLFlaVA: this is ol' dirty C-like shortcut technique... if (sCSS = oSel.value) performs assignment (=) but also executes code inside if{} block if assigned value is non-empty (null, 0 and "" are considered empty). So this is equivalent to:
Code: 
sCSS = oSel.value;
if( sCSS != "" ){ ...
 
Upvote 0 Downvote
figured as much. interesting, thanks.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!
 
Upvote 0 Downvote
Hi vongrunt,

Its not doing anything at all. Can You tell me what is wrong in this code..

<body onload="loadStyle()">
<script language="javascript">
var CSS_COOKIE_VAR = "LastCSS";
var CSS_DEFAULT_STYLE = "css\\file01.css";

function changeStyle( oSel )
{ if (sCSS = oSel.value)
{ setStyle( sCSS );
var expires = new Date( 2010, 1, 1 ); // long enough :)
document.cookie = CSS_COOKIE_VAR + "=" + escape( sCSS ) +"; expires=" + expires.toGMTString() + ";" ;
}
}

function setStyle( sCSS )
{ document.getElementById("external_style").href = sCSS;
}

function loadStyle()
{ aCookie = document.cookie.split(";");
style = CSS_DEFAULT_STYLE;
for (i=0; i< aCookie.length; i++)
{ aName = aCookie.split("=");
if (aName[0] == CSS_COOKIE_VAR )
style = aName[1];
}

setStyle( style );
document.getElementById("control").value = style;
}

</script>

<form id="Form1" method="post" runat="server">
<select id="control" name="style" onchange="updateStyleSheet(this)">
<option value="" selected>-- Choose style --</option>
<option value="css\file01.css">Yellow</option>
<option value="css\file02.css">Black</option>
<option value="css\file03.css">Gray</option>
</select>
<h1>Test</h1>
</form>
</body>

Regards
 
Upvote 0 Downvote
Where is function updateStyleSheet() located?

You can also delete cookies and try again.
 
Upvote 0 Downvote
Got it ..

Thanks for all your help.... Ireally appreciate that...
:)



Regards
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
951
xwb
xwb
amrmnabil
  • Locked
  • Question
Dynamic Control Name Access 1
Replies
2
Views
286
amrmnabil
amrmnabil
JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
2K
ggriffit
ggriffit
tyutghf
  • Locked
  • Question
Konami code help 3
Replies
10
Views
612
tyutghf
tyutghf
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
583
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top