Combine these two scripts

**FrickenTrevor** · 09-12-2011, 10:39 PM

I have an image toggle and a style sheet toggle script that's supposed to change the style sheet and toggle the image via onclick. But for some reason its not working.

I'm trying to get it so the first image will be set to off.png, and then upon clicking the image, the style sheet will change to the seconed one and the image will also change to on.png. Sort of like a toggle.

I have attached all the files bellow

**jscheuer1** · 09-13-2011, 06:50 AM

The stylesheets on the index page (styles1.css and styles2.css) are not in the zip file. There are style1.css and style2.css stylesheets in the zip file.

The changeImage() function will always set the image's src to on.png and although the style switching code sets a cookie and remembers which stylesheet to activate on reload, nothing is done to remember which image to show.

If you're using jQuery anyway, why not put the code for the image in the $(function())?

The markup isn't valid for the DOCTYPE.

With these all in mind, changing nothing else in the archive, use this as the index page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>style switcher toggle</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<link rel="stylesheet" type="text/css" href="style1.css" title="styles1" media="screen">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="styles2" media="screen">	

	
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/styleswitch/stylesheetToggle.js"></script> 


	<script type="text/javascript"> 
	$(function()
		{
		var imageURL = "off.png";

		if (document.images) {
		     var on = new Image();
		     on.src = "on.png";
		
		     var off = new Image();
		     off.src = "off.png";
		}
		
		function changeImage() {
		     if (document.images) {
		          if (imageURL == "off.png") imageURL = "on.png";
		          else imageURL = "off.png";
		
		         document.images.myImage.src = imageURL;
		         createCookie('imageURL', imageURL, 365);
		     }
		}
		if(readCookie('imageURL') === 'on.png'){
			changeImage();
		}


			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					changeImage();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);

</script>
</head><body>

<a href="#" id="toggler"><img src="off.png" name="myImage" alt=""></a>


</body></html>

However, be aware that the style switcher script will not work as expected in Safari 5.x (the current version at this typing).

**FrickenTrevor** · 09-13-2011, 10:56 PM

Originally Posted by jscheuer1

although the style switching code sets a cookie and remembers which stylesheet to activate on reload, nothing is done to remember which image to show

Could there be a cookie for which image to show?

And ive added the code to my site, but nothing works. I have the fade slideshow from DD on my page and jquery 1.3.2 on my page, do you think there's a conflict between them and the image changer?

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript" src="http://www.kelvinluck.com/assets/jquery/styleswitch/stylesheetToggle.js"></script>
<script type="text/javascript" src="fadeslideshow.js"></script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({
	wrapperid: "fadeshow1", 
	dimensions: [740, 300],
	imagearray: [
		["images/electronics.jpg", "", "", ""],
		["images/19_5_orig.jpg"],
		["images/chips_3_bg_102602.jpg", "", "", ""]
	],
	displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 2000, //transition duration (milliseconds)
	descreveal: "ondemand",
	togglerid: ""})
</script>
<script type="text/javascript"> 
	$(function()
		{
		var imageURL = "off.png";

		if (document.images) {
		     var on = new Image();
		     on.src = "on.png";
		
		     var off = new Image();
		     off.src = "off.png";
		}
		
		function changeImage() {
		     if (document.images) {
		          if (imageURL == "off.png") imageURL = "on.png";
		          else imageURL = "off.png";
		
		         document.images.myImage.src = imageURL;
		         createCookie('imageURL', imageURL, 365);
		     }
		}
		if(readCookie('imageURL') === 'on.png'){
			changeImage();
		}


			// Call stylesheet init so that all stylesheet changing functions 
			// will work.
			$.stylesheetInit();
			
			// This code loops through the stylesheets when you click the link with 
			// an ID of "toggler" below.
			$('#toggler').bind(
				'click',
				function(e)
				{
					$.stylesheetToggle();
					changeImage();
					return false;
				}
			);
			
			// When one of the styleswitch links is clicked then switch the stylesheet to
			// the one matching the value of that links rel attribute.
			$('.styleswitch').bind(
				'click',
				function(e)
				{
					$.stylesheetSwitch(this.getAttribute('rel'));
					return false;
				}
			);
		}
	);
</script>

**jscheuer1** · 09-14-2011, 01:15 AM

The code in my last post takes care of all of the problems identified in it, including making a cookie for the image.

As far as a conflict with fadeslideshow.js goes, in a way yes. Update to jQuery 1.6.2 and comment out the the jQuery.noConflict() line in the fadeslideshow.js file.

Also, unless they specifically said to do it like you are doing you should host the stylesheetToggle.js file on your own server. I'm pretty sure kelvinluck.com doesn't want you hotlinking to them for the script.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**FrickenTrevor** · 09-14-2011, 04:02 AM

Ok thanks everything works, but I did notice that when you change the style sheet to style2.css and refresh the page or restart your browser it will always revert to style1.css and not stay on the current one, like the cookie in the style sheet switcher is supposed too.

On the kevinluck website, the js works and remembers what style you have it set too but when i add it to may page it doesn't remember anything. Cookie issues?

**jscheuer1** · 09-14-2011, 04:21 AM

I made a mock up with Ufade just to test it and the cookies work fine. It's probably either cookies turned off in your browser or some error in the code. If it's not cookies turned off in your browser and you can't find the code glitch, post a link to your page.

**FrickenTrevor** · 09-15-2011, 12:00 AM

Originally Posted by jscheuer1

If it's not cookies turned off in your browser and you can't find the code glitch, post a link to your page.

Actually I wont be needing to post a link. I uploaded the pages to my host and made a few tweaks. Everything works as it should

Thread: Combine these two scripts

Thread Tools

Search Thread

Combine these two scripts

Bookmarks

Bookmarks

Posting Permissions