Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

JQuery cycling list

Posted on 2014-03-30
3
293 Views
Last Modified: 2014-03-30
Hi all.

I'm wondering if someone can fix this issue.
Please refer to http://dev.delphicoding.com/appcdw_present.php.

You can see a blue shaded rounded rectangle with a dark-red caption where users' comments to my software should cycle one by one... but they cycle two by two!

I used this code found on the web:

		$('ul#comments li').hide();
		var i = 0;
		var delay = 3000; //millisecond delay between cycles
		function cycleThrough(){
			 var imax = $("ul#comments li").length -1;
			 $("ul#comments li:eq(" + i + ")")
					 .fadeIn(400)
					 .delay(delay)
					 .fadeOut(400, function(){
							 (i === imax) ? i=0 : ++i;
							 cycleThrough();
					 });
			 };

		cycleThrough();

Open in new window


Then, seeing the problem, I tried to write a new different code:

	$('ul#comments li').hide();
	var cycleThrough = function()
	{
		var el = $('ul#comments li:first');
		el.fadeIn(400)
			.delay(3000)
			.fadeOut(400)
			.parent().append(el);
	};
	setInterval(cycleThrough, 4000);

Open in new window


But the problem remains the same :( I can't see any wrong in the markup nor in styling, so I ask help to you.

This question is related to http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Jquery/Q_28400697.html

Thanks to all
0
Comment
Question by:Marco Gasi
  • 2
3 Comments
 
LVL 24

Accepted Solution

by:
mankowitz earned 500 total points
ID: 39964852
Again, I think you are loading you event handler twice. Try loading your jquery first and then your custom script.
0
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 39964858
Thanks
0
 
LVL 31

Author Comment

by:Marco Gasi
ID: 39964860
I put an explanation here for future readers: the problem has been fixed moving all links to external resource into the head section from the body, where Google suggested to put them in order to speed up the page.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery when a text link is clicked? 16 37
Alert after MVC form submitted 1 22
jquery tab header text 1 23
Only allow one check box 17 25
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question