Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-31-2013, 09:38 AM   PM User | #1
lewisstevens1
New Coder

 
Join Date: Apr 2008
Posts: 22
Thanks: 3
Thanked 0 Times in 0 Posts
lewisstevens1 is an unknown quantity at this point
jQuery Fade

Index.php
Code:
	
<div id="fp_nav">
<ul>
	<a href="#"	id="fade2_link" class=""><li>Industrial Cleaning</li></a>
	<a href="#" id="fade3_link" class=""><li>Agricultural</li></a>
	<a href="#" id="fade4_link" class=""><li>Streets</li></a>
	<a href="#" id="fade5_link" class=""><li>Marine</li></a>
	<a href="#" id="fade6_link" class=""><li>Forestry</li></a>
	<a href="#" id="fade7_link" class=""><li>Fire Brigade</li></a>
</ul>
</div>
<div id="fader_img">
	<img id='fade1' src="images/fader/1_1.jpg" alt="Fader"/>
	<img id='fade2' src="images/fader/1_2.jpg" alt="Fader"/>
	<img id='fade3' src="images/fader/1_3.jpg" alt="Fader"/>
	<img id='fade4' src="images/fader/1_4.jpg" alt="Fader"/>
	<img id='fade5' src="images/fader/1_5.jpg" alt="Fader"/>
	<img id='fade6' src="images/fader/1_6.jpg" alt="Fader"/>
	<img id='fade7' src="images/fader/1_7.jpg" alt="Fader"/>
</div>
Jquery Fader

Code:
$(document).ready(function() {

	$('#fade2').hide();
	$('#fade3').hide();
	$('#fade4').hide();
	$('#fade5').hide();
	$('#fade6').hide();
	$('#fade7').hide();

//Default's
var default_image = 0;

//Hovers
var i = 0;

if (i == 0 && default_image != 1){
	$('#fade2_link').hover(
		function(){
			$('#fade2').show();
		},
		function(){
			$('#fade2').hide();
		}
	);
}


});

Im really not sure what i could do here,
I just wanted a simple fader, which does work if i hover over,
although when i click them i just wanted it to stay that image and not change that image. So it changes the default displayed picture.

Any help would be appreciated.
Thanks
lewisstevens1 is offline   Reply With Quote
Old 01-31-2013, 09:44 AM   PM User | #2
lewisstevens1
New Coder

 
Join Date: Apr 2008
Posts: 22
Thanks: 3
Thanked 0 Times in 0 Posts
lewisstevens1 is an unknown quantity at this point
Ps. i tried adding / removing the class selected on the images.
lewisstevens1 is offline   Reply With Quote
Old 01-31-2013, 02:34 PM   PM User | #3
DanInMa
Senior Coder

 
DanInMa's Avatar
 
Join Date: Nov 2010
Location: Salem,Ma
Posts: 1,307
Thanks: 12
Thanked 204 Times in 204 Posts
DanInMa is on a distinguished road
need mroe info. please show an example of the html you are working with. Also how is the image changing do you have another function doing that onclick? Im not sure I understand
__________________
- Firebug is a web developers best friend! - Learn it, Love it, use it!
- Validate your code! - JQ/JS troubleshooting
- Using jQuery with Other Libraries - Jslint for Jquery/other JS library users
DanInMa is offline   Reply With Quote
Old 01-31-2013, 02:41 PM   PM User | #4
DanInMa
Senior Coder

 
DanInMa's Avatar
 
Join Date: Nov 2010
Location: Salem,Ma
Posts: 1,307
Thanks: 12
Thanked 204 Times in 204 Posts
DanInMa is on a distinguished road
oh alos you can change this

Code:
	$('#fade2').hide();
	$('#fade3').hide();
	$('#fade4').hide();
	$('#fade5').hide();
	$('#fade6').hide();
	$('#fade7').hide();
to this:

Code:
$('elementtaghere[id^="fade"]').hide();
elementtaghere I imagine in your case might be img or div, depending on what the fade elements
__________________
- Firebug is a web developers best friend! - Learn it, Love it, use it!
- Validate your code! - JQ/JS troubleshooting
- Using jQuery with Other Libraries - Jslint for Jquery/other JS library users
DanInMa is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 06:20 AM.


Advertisement
Log in to turn off these ads.