PDA

View Full Version : next previous buttons for style sheet switcher?



rysotope
03-01-2007, 09:31 AM
I'm using the style sheet switcher at http://www.dynamicdrive.com/dynamicindex9/stylesheetswitcher.htm

and I was wondering if theres a way to implement next/previous buttons so you can cycle through the css pages? help would be awesome. Thanks.

Blake
03-01-2007, 01:02 PM
<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- &#169; 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>
<script type="text/javascript">

var styleArray = new Array(3);
styleArray[0] = "none";
styleArray[1] = "blue-theme";
styleArray[2] = "brown-theme";

var i=0;

function prevStyle()
{
i = (i+styleArray.length-1)&#37;styleArray.length;
chooseStyle(styleArray[i], 60);
}

function nextStyle()
{
i = (i+1)%styleArray.length;
chooseStyle(styleArray[i], 60);
}

</script>
</head>

<body>
<form id="switchform">
<input type="button" name="prev" value="Prev" onClick="prevStyle()">
<input type="button" name="next" value="Next" onClick="nextStyle()">
</form>
// Rest of body here
</body>
</html>


You don't need to make any changes to the js file.

rysotope
03-01-2007, 06:43 PM
Works great man, you rock. Also....i noticed that whenever I change the stylesheet (using any interface with the script) it replays my flash movies...is there any way to stop it from doing that?

and whats the best way to replace the buttons with images? I tried using some css like

.next {
padding:0px 0px 7px 0px;
background-color:#FFF;
background-image:url(next.gif);
width:31px;
height:31px;
}

but it makes the script start acting all wonky...like the buttons randomly work/don't work.