JavaScript - Popstate Html 5 Event Being Fired Multiple Times.

Hi there! I need help!

Basically, I need to create a sentence and on one of the words the person accessing the site can click the word and it will change to another word and then again to a third word and so on for 5 words then it will, on click, return to the 1st word again. like a circle of various words.

I've managed to get it to work with 2 words back and forth - but I need it to have multiple states. I need the JS and how to impliment it in the HTML. JS isnt my strong point just yet

Please help me! Thanks so so much!

follow me on twitter - @robyn_90

The following code works find in firefox and chrome. In IE, it only works the first time I click on a link. Any ideas?

Thanks in advance,

// I have some div's where help is, which I make non-viewable
<div id='help_guides'>
<div id='issue1'>Help with issue 1</div>
<div id='issue2'>Help with issue 2</div>
</div>
<a href="#" id="issue_1_link">Help with issue #1</a>
<a href="#" id="issue_2_link">Help with issue #2</a>
<div id='help'></div>

// I grab the help guide div into a variable
var issue_1_help = $('issue_1').remove();
var issue_2_help = $('issue_2').remove();

// When the help link is clicked, the help DIV displays the help guide
Event.observe( $('issue_1_link'), 'click', function() {
$('help').update( issue_1_help );
});
Event.observe( $('issue_2_link'), 'click', function() {
$('help').update( issue_2_help );
});

Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative..

Code:

<script language="javascript"> 
function toggle() {
	var ele = document.getElementById("commpopup");
	if(ele.style.display == "block") {
    	ele.style.display = "none";
  	}
	else {
		ele.style.display = "block";
	}
} 
</script>

<div class="togglecomment">
     <div class="popup" id="commpopup">
          <div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
     </div>
     <div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>

Hello all,

I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another.

I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list.

This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously.....

<div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0"
alt="javascript button 1"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "img/abouth.png";
downImage = new Image();
downImage.src = "img/aboutc.png"
normalImage = new Image();
normalImage.src = "img/aboutn.png";
function changeImage()
{
document.images["aboutbutton"].src= upImage.src;
return true;
}
function changeImageBack()
{
document.images["aboutbutton"].src = normalImage.src;
return true;
}
function handleMDown()
{
document.images["aboutbutton"].src = downImage.src;
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</script></div>

Any suggestions on where I am going wrong would be wonderful.

Thanks so much in advance!

All the best

Good morning guys.

I am new to Javascript and am trying to add some functionality to a website but have come across a problem when trying to utilise two seperate Javascript onloads events. I have a text scroller to display the latest news and I also have a javascript lightbox gallery.

Both of these events work perfectly on their own but when I try to include both on one page only one of the events is executed.

My code is displayed below:

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>


<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
	<script type="text/javascript" src="js/jquery.li-scroller.1.0.js"></script>
	<script type="text/javascript">
		$(function(){ 
		    $("ul#news-scroller").liScroll({travelocity: 0.04}); 
		}); 
</script>

</head>
<body onload="clickMenu('gallery'); initLightbox()">

If anyone could tell me where my mistake is I would be so grateful.

I know it is probably a really obvious mistake but being new to this I am unsure where to start looking.

Thanks in advance!

Mack

Hi,

I have a problem in javascript, where entering a value in the textbox during onblur I am doing a refresh to bring in the
updated records from the DB , before the on blur refresh is completed if the user clicks the search button (onclick)
during the first click nothing is happening as the refresh is still going on. During the second click when the on blur refresh
is completed it will open a popup.

The problem here is I am unable to disable/inactivate the search button untill the refresh is completed as well as I dont have any control over the
refresh time as well. This is like already an event is in progress and where we are invoking another event which is not having
any effect. In such case how i can handle this scenario?

Thanks.

I have added an event listener to a LI item in the DOM:

liNode.addEventListener("mouseover", mouseOn, true);

The mouseOn function:

function mouseOn(e) {
// Test for IE or Firefox
var e = (!e)?window.event:e;
var yPos;
if (e.pageY) {
yPos = e.pageY;
} else {
yPos = e.clientY;
}
}

I would like to pass in another parameter to the mouseOn function in addition to the event that is passed in automatically. Is there a way to do this?

Every time I try to use the notEmpty function with an onClick event, the validation stops working.

I also need to implement a pop-up that gives me this information - alert("Your name is"+firstname +lastname", your G.P.A. is "+gpa "your phone number is "+phone); anytime I try to use it as a function with onClick, it interrupts the validation as well.

Please help! I'm completely lost.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
      Date: 11/12/2014
      Filename: validator.html
      Supporting files: None
-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validator</title>
<script type='text/javascript'>

function formValidator(){
	// Make quick references to our fields
	var firstname = document.getElementById('firstname');
	var lastname = document.getElementById('lastname');
	var gpa = document.getElementById('gpa');
	var phone = document.getElementById('phone');
	
	// Check each input in the order that it appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your first name")){
		if(isAlphabet(lastname, "Please enter only letters for your last name")){
			if(gpaValidator(gpa, "Please enter a valid G.P.A.")){
				if(phoneValidator(phone, "Please put a valid phone number")){
					return true;
				}
			}	
		}	
	}
	return false;
}

// Functions that check values in input fields!

function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function gpaValidator(elem, helperMsg){
	var alphaExp = /^([0-3](\.\d\d?)?|4(.00?)?)$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}

function phoneValidator(elem, helperMsg){
	var alphaExp = /\(?(\d{3})\)?[- ]?(\d{3})[- ]?(\d{4})/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;

	}
}
</script>
</head>
<body>
<form onsubmit='return formValidator()'>
<fieldset>
<legend>Personal information:</legend><br />
First Name: <input type='text' id='firstname' /><br />
Last Name: <input type='text' id='lastname' /><br />
G.P.A.: <input type='text' id='gpa' /><br />
Phone Number: <input type='text' id='phone' /><br />
<input type='submit' value='Submit' />
</form>
</body>
</html>

I found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations?


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Mouse position</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<script language="JavaScript" type="text/JavaScript">
var posx;
var posy;

function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
}


function showP(){
document.getElementById("div2").style.visibility="visible";
document.getElementById("div2").style.top =(posy-10)+'px';
document.getElementById("div2").style.left=(posx-6)+'px';
}
</script>
<style type="text/css">
.div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5}
.div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;}
.div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;}
</style>

</head>

<body onmousemove="getMouse(event)">
<div id="div1" class="div1">
<img src="./yourImage.jpg" onclick="showP()">
</div>
<div id="div2" class="div3">
X
</div>
</body>
</html>

Hi,

I am trying to fire a mouse event in IE at a particular coordinate. All the coordinates are set right before firing the event. But when the event gets fired, the client point gets changed and gets the value same as offset point.
i.e., I created a mouse event with ClientPoint = (583,438) , offset= (585,481) and screen = (585,589). The event when it gets fired from the browser however has the client point as (585,481) - the rest are fine though. Can someone tell me how can I reliably fire a mouse event at a particular client point in IE?

TIA

srd

I have tried many conventional methods trying to get my javascript to work without using inline event handlers and for some reason the way my teacher shows us how to do it is not working for me. Any help would be much appreciated. Here is were I left off. The top part of this code is were I was trying to get the event handler to work.

Code:

  
		  function setClock() {
			document.getElementById('custname').focus();
			digitalClock();
		  }
		  var digital;
			
		  function stop(){
			clearTimeout(digital);
		  }

		  function digitalClock(){
			var newDate = new Date();
			var hour, minute;
			var second;
			var time = " ";
			hour = newDate.getHours();
			minute = newDate.getMinutes();
			second = newDate.getSeconds();
			if (hour <= 9) hour = "0" + hour;
			if (minute <= 9) minute = "0" + minute;
			if (second <= 9) second = "0" + second;
			time += hour + ":" + minute + ":" + second;
			document.getElementById('dClock').value = time;
			digital = setTimeout("digitalClock()", 1000);
		  }
		  
		  var validated=true;
		  
		  function validateForm(f) {
				
			validated=isEmpty(f.custname, "customer name");  
			if (!validated) {
				return validated;
			}

			validated=isEmpty(f.phone, "phone");  
			if (!validated) {
				return validated;
			}

			validated=isEmpty(f.email, "email");  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.address, "address");  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.city, "city");  
			if (!validated) {
				return validated;
			}
			
			validated=isSelect(f.state);  
			if (!validated) {
				return validated;
			}
			
			validated=isEmpty(f.zip, "zip");  
			if (!validated) {
				return validated;
			}
			
			validated=isNumber(f.qty);  
			if (!validated) {
				return validated;
			}
			
			validated=checkRadio(f.pizza);
			if (!validated) {
				return validated;
			}

			return validated;
		  }
		  
		  var radPizza = 0;
		  
		  function checkRadio(radiobuttons) {
			var i=0;
			while (i<=4 && !radiobuttons[i].checked) {
				if (i==4) {
				alert("Please choose a Pizza.");
				return false;
				}
				i++;
			}
			return true;
		  }
		  
		  function isEmpty(textbox, textString) {
			//match null or blank space
			if (textbox.value.match(/^\s*$/) || textbox.value.match(/^null$/)) {
				alert("Data is not valid for " + textString);
				textbox.style.backgroundColor = "#f4f8b4";
				textbox.focus();
				return false;     
			}
			else {
				textbox.style.backgroundColor = "white";
			}
			if (textString=="customer name") {
				//does not match name format
				if (!textbox.value.match(/^[\w\.\']{2,}([\s][\w\.\']{2,})+$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="email") {
				//does not match email format
				if (!textbox.value.match(/^[a-zA-Z]{1}[a-zA-Z0-9]+(\.|\_)?[a-zA-Z]+@[a-zA-Z]{1}[a-zA-Z0-9]{0,62}\.(com|net|org)$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="address") {
				//does not match address format
				if (!textbox.value.match(/^[a-zA-Z0-9\s,'-]*$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="city") {
				//does not match city format
				if (!textbox.value.match(/^[A-Za-z. ]+$/)) {
					alert("Data is not valid for " + textString);
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="phone") {
				//does not match phone format
				if (!textbox.value.match(/^\(?(\d{3})\)?[-](\d{3})[-](\d{4})$/) || textbox.value.match(/^xxx-xxx-xxxx$/)) {
					alert("Please enter a correct phone number.");
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			if (textString=="zip") {
				//does not match zip format or starting format
				if (!textbox.value.match(/^(?!0{5})(\d{5})(?!-?0{4})(-?\d{4})?$/) || textbox.value.match(/^xxxxx or xxxxx-xxxx$/)) {
					alert("Please enter a correct zip number.");
					textbox.style.backgroundColor = "#f4f8b4";
					textbox.focus();
					return false;  
				}
			}
			return true;  
		  }
		  
		  function isSelect(selected) {
			if (selected.value=="Select State") {
				alert("Please select a state.");
				selected.style.backgroundColor = "#f4f8b4";
				selected.focus();
				return false;
			}
			else {
				selected.style.backgroundColor = "white";
			}
			return true;
		  }
		  
		  function isNumber(textbox) {
			//match negative number and not equal to a number
			if (textbox.value.match(/^-\d*\.{0,1}\d+$/) || !textbox.value.match(/^((\d+(\.\d *)?)|((\d*\.)?\d+))$/)) {
				alert("Drinks value cannot be negative and has to be a number.");
				textbox.style.backgroundColor = "#f4f8b4";
				textbox.focus();
				textbox.value=0;
				return false;     
			}
			return true;   
		  }
		  
		  function calcPizza() {

			var rad = document.getElementsByName('pizza');				
			for (var i=0; i<rad.length;i++) {
				if (rad[i].checked) {
					radPizza = parseFloat(rad[i].value);
				}
			}	
			
			if (document.getElementById('cheese').checked) {
				var extraCheese = parseFloat(document.getElementById('cheese').value);
			}
			else {
				extraCheese = 0;
			}

		    if (document.getElementById('mushrooms').checked) {
				var addShrooms = parseFloat(document.getElementById('mushrooms').value);
			}
			else {
				addShrooms = 0;
			}
			
			if (document.getElementById('anchovies').checked) {
				var addAnchovies = parseFloat(document.getElementById('anchovies').value);
			}
			else {
			  addAnchovies = 0;
			}
			
			if (document.getElementById('wings').checked) {
				var addWings = parseFloat(document.getElementById('wings').value);
			}
			else {
			  addWings = 0;
			}
			
			if (document.getElementById('dessert').checked) {
				var addDessert = parseFloat(document.getElementById('dessert').value);
			}
			else {
				addDessert = 0;
			}
			
			var qtyDrinks = parseFloat(document.getElementById('qty').value * 1.50);
			if (qtyDrinks<0) {
				qtyDrinks=0;
				document.getElementById('qty').value = 0;
				alert("Drinks amount cannot be negative.");
			}
			
			var total = (radPizza + extraCheese + addShrooms + addAnchovies + addWings + addDessert + qtyDrinks);
			document.getElementById('pizzaPrice').value = total.toFixed(2);

		  }

HTML Code :
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Pizza To Go</title>
	<script type="text/javascript" src="PizzaCookies.js"></script>
    <script type="text/javascript" src="cookieLib.js"></script>
	<link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
	<link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
	<link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
	<script type="text/javascript" src="Validation.js"></script>
</head>

<div class="styleLinks">
<a href="#" id="style1" onclick="setStyleSheets('style1'); return false;">Style 1</a>
<a href="#" id="style2" onclick="setStyleSheets('style2'); return false;">Style 2</a>
<a href="#" id="style3" onclick="setStyleSheets('style3'); return false;">Style 3</a>
</div>

<body id="body_main" onload = "setClock(), testCookies();" onunload = "stop()">
  <script type="text/javascript" src="DigiClock.js"></script>
  <h1>Pizza To Go</h1>
  <form name="pizzaList" id="form1" onsubmit="return validateForm(this)" onreset="return resetForm()" action="#" method="get" >
	<label for="dClock">Digital Clock:</label><input type="text" name="dClock" id="dClock" />
	<fieldset id="customer"><legend>Customer Info</legend>
        <label for="custname">Customer Name: </label><input type="text" name="custname" id="custname" value="" size = "50" maxlength = "48" /><br/>
        <label for="phone">Phone: </label><input type="text" name="phone" id="phone" value="xxx-xxx-xxxx" size = "14" maxlength = "12" /><br/>
        <label for="email">Email: </label><input type="text" name="email" id="email" value="" size = "70" maxlength = "68" /><br/>
		<label for="address">Address: </label><input type="text" name="address" id="address" value="" size = "50" maxlength = "48" /><br/>
		<label for="city">City: </label><input type="text" name="city" id="city" value="" size = "30" maxlength = "28" /><br/>
		<label for="state">State: </label>
		<select name="state" id="state" >
			<option value="Select State">Select State</option>
			<option value="AL">AL</option>
			<option value="AK">AK</option>
			<option value="AZ">AZ</option>
			<option value="AR">AR</option>
			<option value="CA">CA</option>
			<option value="CO">CO</option>
			<option value="CT">CT</option>
			<option value="DE">DE</option>
			<option value="DC">DC</option>
			<option value="FL">FL</option>
			<option value="GA">GA</option>
			<option value="HI">HI</option>
			<option value="ID">ID</option>
			<option value="IL">IL</option>
			<option value="IN">IN</option>
			<option value="IA">IA</option>
			<option value="KS">KS</option>
			<option value="KY">KY</option>
			<option value="LA">LA</option>
			<option value="ME">ME</option>
			<option value="MD">MD</option>
			<option value="MA">MA</option>
			<option value="MI">MI</option>
			<option value="MN">MN</option>
			<option value="MS">MS</option>
			<option value="MO">MO</option>
			<option value="MT">MT</option>
			<option value="NE">NE</option>
			<option value="NV">NV</option>
			<option value="NH">NH</option>
			<option value="NJ">NJ</option>
			<option value="NM">NM</option>
			<option value="NY">NY</option>
			<option value="NC">NC</option>
			<option value="ND">ND</option>
			<option value="OH">OH</option>
			<option value="OK">OK</option>
			<option value="OR">OR</option>
			<option value="PA">PA</option>
			<option value="RI">RI</option>
			<option value="SC">SC</option>
			<option value="SD">SD</option>
			<option value="TN">TN</option>
			<option value="TX">TX</option>
			<option value="UT">UT</option>
			<option value="VT">VT</option>
			<option value="VA">VA</option>
			<option value="WA">WA</option>
			<option value="WV">WV</option>
			<option value="WI">WI</option>
			<option value="WY">WY</option>
		</select>
		<br/>
		<label for="zip">Zip: </label><input type="text" name="zip" id="zip" value="xxxxx or xxxxx-xxxx" size = "14" maxlength = "12" />
    </fieldset>
    <fieldset><legend>Pizza</legend>
        <input type="radio" name="pizza" id="veggie" value="12.95" onclick="calcPizza()"/>Vegetarian ($12.95)<br />
        <input type="radio" name="pizza" id="hawaiian" value="14.95" onclick="calcPizza()"/>Hawaiian ($14.95)<br />
        <input type="radio" name="pizza" id="meatlovers" value="16.95" onclick="calcPizza()"/>Meat Lovers ($16.95)<br />
        <input type="radio" name="pizza" id="works" value="18.95" onclick="calcPizza()"/>The Works ($18.95)<br />
        <input type="radio" name="pizza" id="fourcheese" value="15.95" onclick="calcPizza()"/>Four Cheese ($15.95)
    </fieldset>
    <fieldset><legend>Extras</legend>
        <input type="checkbox" name="cheese" id="cheese" value="2" onclick="calcPizza()"/>Extra cheese ($2.00)
        <input type="checkbox" name="mushrooms" id="mushrooms" value="2.5" onclick="calcPizza()"/>Mushrooms ($2.50)
        <input type="checkbox" name="anchovies" id="anchovies" value="3" onclick="calcPizza()"/>Anchovies ($3.00)
    </fieldset>
    <fieldset><legend>Sides</legend>
        <input type="checkbox" name="wings" id="wings" value="2.75" onclick="calcPizza()"/>Wings ($2.75)
        <input type="checkbox" name="dessert" id="dessert" value="6.95" onclick="calcPizza()"/>Dessert pizza ($6.95)
    </fieldset>
    <fieldset><legend>Drinks ($1.50)</legend>
        <label for="qty">Quantity: </label><input type="text" name="qty" id="qty" size="5" value="0" onkeyup = "calcPizza()"/>
    </fieldset>
    <p><label for="pizzaPrice">Order total: $</label><input type="text" name="pizzaPrice" id="pizzaPrice" value="0" /></p>
    <input type="submit" value="Place Order" /><input type="reset" value="Clear Form" />
  </form>
</body>
</html>

I'm trying to figure out a way to put this in all js code with the onclick event handlers and the parameters. I have 3 links that switch the style of my page. Right now I have them working with inline event handlers. Here are my code snippets below.

HTML:

Code:

<head>
    <link rel="stylesheet" href="style1.css" type="text/css" title="style1"/>
    <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2" />
    <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3" />
</head>
		<div class="styleLinks">
		<a href="#" id="style1" onclick="setStyleSheets('style1'); return false;">Style 1</a>
		<a href="#" id="style2" onclick="setStyleSheets('style2'); return false;">Style 2</a>
		<a href="#" id="style3" onclick="setStyleSheets('style3'); return false;">Style 3</a>
		</div>

JS:

Code:

function setStyleSheets(title) {
	//set styles and set cookie
	var i; 
	var attribute;
	var today = new Date();
	var expDate = new Date(today.getTime() + 7*24*60*60*1000);
	var styleSelected = "";
	if (title=="style2"){
		styleSelected = "style2";
	}
	else if (title=="style3"){
		styleSelected = "style3";
	}
	for(i=0; (attribute = document.getElementsByTagName("link")[i]); i++) {
		if(attribute.getAttribute("rel").indexOf("style") != -1 && attribute.getAttribute("title")) {
			attribute.disabled = true;
			if(attribute.getAttribute("title") == title) attribute.disabled = false;
			SetCookie ('style', styleSelected, expDate, "/");
		}
	}
}