Please Help - How to add two Javascript events/functions to one button.

[Iconic_creator]

1) Script Title: Style Sheet Switcher (v1.1)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...etswitcher.htm

3) Describe problem:
Basically I have a button that calls the function, or the way I see it, it makes something happens.

This button fires up an event that makes the page switch style sheets.

This is the button.

<input name="choice" type="button" value="brown-theme" onClick="chooseStyle(this.value, 60);" />

When I click this button, it pulls up the reference style sheet.


Here's my problem:

I must have more then one button to call up the different style sheets.


I was thinking it would be nice to have one button that calls up the two style sheets I want to switch or have the user choose.

So if I click the button, it calls the first style sheet, if I press the same button again, it calls another style sheet.

So making one button performs two events/function.

I have no idea how to get this done.


Any help or ideas will be greatly appreciated.

Thanks everyone.

IC

[ddadmin]

Sure, Firstly, just as a reminder, the main function you call to change the stylesheet is:

chooseStyle('themename', 60)

Where "themename" is the name of the stylesheet based on its "title" attribute to change to. So what you want is basically a way to call this function with a different "themename" each time, in sequential order. What you'd so is first store all the names of the themes you wish to rotate through in a JavaScript array:

var mystylesheets=["none", "blue-theme", "brown-theme"]

Then, use a script like the following to change to each one sequentially when a function is called. Here's the complete script:

<script type="text/javascript">

var mystylesheets=["none", "blue-theme", "brown-theme"]
var cursheet=0

function rotateStyle(){
	chooseStyle(mystylesheets[cursheet], 60)
	cursheet=(cursheet<mystylesheets.length-1)? cursheet+1 : 0
}

</script>

<a href="javascript:rotateStyle()">Change Theme</a>

[Iconic_creator]

First of all I want to say thank very much for the help and effort.
I was just about to give up and abandon the whole plan when I saw that you had replied!

Anyway, I applied the code and everything appears to be working very well.

However, I have only two style sheets and not three.
So when I first load the page I have to click on the link twice to get the first style switch.

I have two style sheets - one is named normal.css and the other is zoom.css.

So when the user first visits the page - they get the normal.css controlling everything.

Then they can hit the link and get the zoom, this makes the page bigger, image text, everything.

For some reason I have to click the link twice.

Even thought I have this.

<script type="text/javascript">

var mystylesheets=["normal", "zoom"]
var cursheet=0

function rotateStyle(){
	chooseStyle(mystylesheets[cursheet], 60)
	cursheet=(cursheet<mystylesheets.length-1)? cursheet+1 : 0
}

</script>

Also, I not sure how to do this or if it's possible.

How can I get the link/button to show two different labels.

Example: The button will say Normal and then when the user hits the button, it changes to zoom and switches. This way the user know what state the page is in just from seeing the different names on the button.

Any ideas on this?

Thanks for all your help.

IC

[Iconic_creator]

Hi, I change this.

var cursheet=0

to this:

var cursheet=1

and now it works on the first click.
Now all I have to do is get different labels or name on the link.

IC

[Iconic_creator]

Now that I've been help to get one button to trigger two events, I'm still trying to make the buttons change label when click.

Anybody have an idea on this?

IC

[ddadmin]

Try modifying the original mod I had posted above to something like:

<script type="text/javascript">

var mystylesheets=["none", "blue-theme", "brown-theme"]
var cursheet=0

function rotateStyle(button){
	button.innerHTML=mystylesheets[cursheet]
	chooseStyle(mystylesheets[cursheet], 60)
	cursheet=(cursheet<mystylesheets.length-1)? cursheet+1 : 0
}

</script>

<a href="#" onClick="rotateStyle(this); return false">Change Theme</a>

Notice rotateStyle() is now called onClick, and also, passed the parameter this, which references the button it's associated with.

[Iconic_creator]

Try modifying the original mod I had posted above to something like:

<script type="text/javascript">

var mystylesheets=["none", "blue-theme", "brown-theme"]
var cursheet=0

function rotateStyle(button){
	button.innerHTML=mystylesheets[cursheet]
	chooseStyle(mystylesheets[cursheet], 60)
	cursheet=(cursheet<mystylesheets.length-1)? cursheet+1 : 0
}

</script>

<a href="#" onClick="rotateStyle(this); return false">Change Theme</a>

Notice rotateStyle() is now called onClick, and also, passed the parameter this, which references the button it's associated with.

Okay it's all working well. The only problem is how to create cookies so that the label stay even when the page is refreshed.

Right now the label and text changes with the style when the user make a selection which is fine, the problem is when you refresh the page - the style remains the same but the label changes back to the default label.

I am trying to learn this stuff but I fell it's a little advance for me at this point.

So how do I create cookies for this so when someone changes the style and refreshes the page the label does not change.

Thanks very, very much.

IC

[ddadmin]

Hmm that's a bit more complicated to do. This is untested, but try adding the below code to your page:

<script type="text/javascript">
window.onload=function(){
	document.getElementById('mybutton').innerHTML=selectedtitle
}
</script>

Where "mybutton" should be the ID of the button toggler:

<a href="#" id="mybutton" onClick="rotateStyle(this); return false">Change Theme</a>