Styleswitch display link(s) depending on which style is saved in cookie?

**dsontag** · 12-20-2007, 04:19 PM

Script :: http://www.dynamicdrive.com/dynamici...etswitcher.htm (Style Switch)

I have only two stylesheets -- how can I display ONLY the link to the "other" stylesheet on my pages?

Example:
style1.css
style2.css (alternate)

User has style1.css set in his/her cookie so the only link that would display is that for switching to style2.css and vice-versa.

Is this possible? If so, how?
Thanks!

**ddadmin** · 12-22-2007, 10:17 AM

There are more than 1 way to do this. I'm assuming you're using regular text links as the togglers? If so, here's one way to not sure the link that corresponds to the currently loaded style sheet when the page loads:

Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="blue-theme" href="user.css" />
<link rel="alternate stylesheet" type="text/css" media="screen" title="brown-theme" href="user2.css" />

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
</head>

<body>
<a id="defaultlink" rel="none" href="javascript:chooseStyle('none', 60)" checked="checked">Default style</a>
<a id="bluelink" rel="blue-theme" href="javascript:chooseStyle('blue-theme', 60)">Blue theme</a>
<a id="brownlink" rel="brown-theme" href="javascript:chooseStyle('brown-theme', 60)">Brown theme</a>

<script type="text/javascript">

var csslinkids=["defaultlink", "bluelink", "brownlink"]

for (var i=0; i<csslinkids.length; i++){
var currentlink=document.getElementById(csslinkids[i])
if (currentlink && currentlink.getAttribute("rel")==selectedtitle) //if current link's rel attr is equal to currently loaded CSS's title attr
currentlink.style.display="none"
}

</script>
</body>
</html>

The code in red is new. Basically, for each toggler link, give it a unqiue but arbitrary ID attribute, plus a rel attribute that contains the name of the style sheet that link is loading (the style sheet's title attribute). Then, make sure the array:

Code:

var csslinkids=["defaultlink", "bluelink", "brownlink"]

contains the ids of these links. Now if a user clicks on a link to load a stylesheet, then either revisits the page, that link is hidden.

Thread: Styleswitch display link(s) depending on which style is saved in cookie?

Thread Tools

Search Thread

Styleswitch display link(s) depending on which style is saved in cookie?

Bookmarks

Bookmarks

Posting Permissions