jQuery Cycle Plugin pager problem

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Thread Solved

•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster

jQuery Cycle Plugin pager problem

 
0
  #1
Oct 14th, 2009
Hello,

I am having a problem with the jQuery Cycle plugin. I am trying to create a slideshow of images that change(fade) when an element in the pager nav is hovered on. (This is supposed to be possible as per the jQuery Cycle Plugin docs <http://malsup.com/jquery/cycle/pager2.html>)

My setup:
I have one div holding the images and the div on the right of it is the navigation div that holds the pager elements.

The navigation/pager div is made up of an ul that contains <a> & <img> tags. So like this <ul><li><a><img>.

Need:
1. I want the background image of the <a> tag to change when I hover over a nav element.
2. However, as an additional requirement I need the background image to remain changed even when I hover off.
i.e. my initial background image is white. When I hover over a nav element the background of that and only that element changes to green and I want it to stay green even when I hover off (untill I hover on some other nav element)

I can perform Need 1. by using the jQuery .hover function.

Need 2. is what I can't get to work.

According to the Cycle plugin docs, when you hover over a nav element, the cycle plugin gives it a "activeSlide" class and you can supposed to be able to manipulate the style of the element using this class. I have tried to do this but it doesn't work.

I have tried not using the jQuery hover function and doing this in CSS. But nothing. Here is my css
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. $("#Nav a").css("background-image","Hover.gif");
  2.  
  3. $("#Nav a.activeSlide").css("background-image","Normal.gif");


Any help is highly appreciated as I have spent hours and hours trying to figure this out.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 883
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 142
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #2
Oct 15th, 2009
•
•
•
•
Originally Posted by baltazar View Post
According to the Cycle plugin docs, when you hover over a nav element, the cycle plugin gives it a "activeSlide" class and you can supposed to be able to manipulate the style of the element using this class. I have tried to do this but it doesn't work.
Can you provide a link to where you read this ? I can't find this statement. I thought it only responds to click events.
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster
 
0
  #3
Oct 15th, 2009
•
•
•
•
Originally Posted by pritaeas View Post
Can you provide a link to where you read this ? I can't find this statement. I thought it only responds to click events.
Here is the demo with hover:
http://malsup.com/jquery/cycle/pager5.html

Here is the config options sheet:
http://malsup.com/jquery/cycle/options.html
Last edited by baltazar; Oct 15th, 2009 at 2:14 pm.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 883
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 142
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #4
Oct 16th, 2009
Try this example:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
  3. 	<head> 
  4. 		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  5. 		<meta http-equiv="Content-Style-Type" content="text/css" /> 
  6. 		<title>JQuery Cycle Plugin - pagerEvent Demo</title> 
  7. 		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/jq.css" /> 
  8. 		<link rel="stylesheet" type="text/css" media="screen" href="http://malsup.com/jquery/cycle/cycle.css" /> 
  9. 		<style type="text/css"> 
  10. 			#nav { margin: 5px; }
  11. 			#nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: url(http://www.kledingbank-limburg.nl/favicon.ico); text-decoration: none }
  12. 			#nav a.activeSlide { background: url(http://www.pritaeas.net/favicon.ico) }
  13. 			#nav a:focus { outline: none; }
  14. 		</style> 
  15. 		<script type="text/javascript" src="http://malsup.com/jquery/jquery-1.2.6.js"></script> 
  16. 		<script type="text/javascript" src="http://malsup.com/jquery/chili-1.7.pack.js"></script> 
  17. 		<script type="text/javascript" src="http://malsup.com/jquery/cycle/jquery.cycle.all.js?v2.23"></script> 
  18. 		<script type="text/javascript"> 
  19. 			$(function() {
  20. 			    $('#slideshow').cycle({
  21. 			        speed:       200,
  22. 			        timeout:     0,
  23. 			        pager:      '#nav',
  24. 			        pagerEvent: 'mouseover'
  25. 			    });
  26. 			});
  27. 		</script> 
  28. 	</head> 
  29. 	<body> 
  30. 		<div><a id="logo" href="http://jquery.com" title="Powered By jQuery"></a></div> 
  31. 		<h1 id="banner"><a id="backnav" href="./">&lsaquo;&lsaquo; cycle home</a>jQuery Cycle Plugin - pagerEvent demo</h1> 
  32. 		<div id="main"> 
  33. 			<div id="demos"> 
  34. 		    <p>Hover over links to trigger slide changes.</p> 
  35. 		    <table cellspacing="20">
  36. 					<tr> 
  37. 				    <td>
  38. 							<div id="nav"></div> 
  39. 			        <div id="slideshow" class="pics"> 
  40. 		            <img src="http://malsup.com/jquery/cycle/images/beach1.jpg" width="200" height="200" /> 
  41. 		            <img src="http://malsup.com/jquery/cycle/images/beach2.jpg" width="200" height="200" /> 
  42. 		            <img src="http://malsup.com/jquery/cycle/images/beach3.jpg" width="200" height="200" /> 
  43. 		            <img src="http://malsup.com/jquery/cycle/images/beach4.jpg" width="200" height="200" /> 
  44. 		            <img src="http://malsup.com/jquery/cycle/images/beach5.jpg" width="200" height="200" /> 
  45. 		            <img src="http://malsup.com/jquery/cycle/images/beach6.jpg" width="200" height="200" /> 
  46. 		            <img src="http://malsup.com/jquery/cycle/images/beach7.jpg" width="200" height="200" /> 
  47. 			        </div> 
  48. 				    </td>
  49. 					</tr> 
  50. 		    </table> 
  51. 			</div> 
  52. 		</div> 
  53. 	</body> 
  54. </html>
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster
 
0
  #5
Oct 19th, 2009
I have already tried that. It didn't fix my problem. Thank you though.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 883
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 142
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #6
Oct 19th, 2009
Can you provide a link to your code ? I got it working:

http://www.pritaeas.net/public/jquery/cycle/hover.html
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster
 
0
  #7
Oct 20th, 2009
Are you able to get the navigation to be icons of your chosing as opposed to letting the plugin build it for you.

I have looked at your code and have analysed mine thereafter and the problem seems to be there.

I was able to get my code working if I let the plugin build my navigation. However, I need this app to have custom navigation icons.

You are "THE DUDE" if you manage to figure this out.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 883
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 142
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #8
Oct 21st, 2009
Am I correct that you want to change the 1 2 and 3 into icons ? If that is so then I completely missed it before, sorry about that. I'll see if I can find a solution.

Is this what you mean?
http://www.pritaeas.net/public/jquery/cycle/hover2.html
Last edited by pritaeas; Oct 21st, 2009 at 4:56 am.
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster
 
0
  #9
Oct 21st, 2009
Oh please don't apologise. Your demo got me thinking and made me have one of those Eureka moments.

Actually this is what I am looking to do: http://malsup.com/jquery/cycle/pager3.html

But I was trying to create my own hover using the jQuery Hover function which wasn't working out too well.

I also tried writing the CSS using jQuery but that didn't work either.

So I decided to take a step back and turns out that doing the hover in CSS would be the best bet. I dismissed that before because I tought it wouldn't degrade gracefully. But it turns out that it does.

I'm working on it now and will post if it does work out.

Thanks for your time pritaes. Appreciate it.
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2007
Posts: 34
Reputation: baltazar is an unknown quantity at this point 
Solved Threads: 0
baltazar baltazar is offline Offline
Light Poster
 
0
  #10
Nov 2nd, 2009
Oops!! totally forgot to update this thread.

Yes!! the above approach worked great. Thanks again for your help.
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread has been marked solved.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 1318 | Replies: 9
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
acid2 ajax ajaxexample ajaxjspservlets array autoplay blackjack browser captcha captchaformproblem cart close codes css date debugger decimal dependent design developer disablefirebug dom download element embed engine enter error events ext file firefox flash focus form frameworks game gears getselection google gxt hiddenvalue highlightedword hint html ie7 iframe index java javascript javascripthelp2020 javascripts jquery jsp libcurl listbox maps margin marquee masterpage media menu mp4 onerror onmouseoutdivproblem onmouseover parameters paypal pdf php player position post problem programming prototype rated rating redirect safari scale scriptlets scroll search security size software solutions sources starrating synchronous toggle tweet unicode variables w3c web webkit webservice window
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC