Solved

Simple Javascript Loop

Posted on 2010-09-14
4
208 Views
Last Modified: 2012-05-10
I have a list of five anchors.
On page load, I want to cycle through this list and add/remove an underline to each anchor, one at a time.
I want to delay the adding/removing of the underline by about 1000ms.
The cycling process should traverse twice through the list (1-2-3-4-5, 1-2-3-4-5) and then stop at 1.

<a href="#1">1</a> | <a href="#2">2</a>  | <a href="#3">3</a>  | <a href="#4">4</a>  | <a href="#5">5</a>  

Open in new window

0
Comment
Question by:aznprncritic
  • 2
4 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33678973
try this simple version first, and let me know if there is any prob
<style>
   nounderline 
   {
	text-decoration: none;
   }
</style>
<script>
	var anchors;
	var currentIndex = 0;
	var cycleNumber = 0;

   $(document).ready(function()
   {
	currentIndex = 0;
      	anchors = $("a");
      	cycleThoughOnce();
   });
   
   function removeUnderline(obj)
   {
         obj.addClass("nounderline ");
   }
   
   function addUnderline(obj)
   {
         obj.removeClass("nounderline ");
   }
   
   function cycleThough()
   {
   	if ( currentIndex == anchors.length )
   	{
   		if ( cycleNumber == 1)
   		{
   			return;
   		}
   		currentIndex = 0;
   		cycleNumber = 0;
   	}
   	if( cycleNumber == 0 )
   	{
	   	$(anchors[currentIndex++]).addClass("nounderline");
   	}
   	else
   	{
	   	$(anchors[currentIndex++]).removeClass("nounderline");
   	}
   	setTimeOut("cycleThough()", 100);
   }
  
  
</script>

<body>
<a href="#1">1</a> | <a href="#2">2</a>  | <a href="#3">3</a>  | <a href="#4">4</a>  | <a href="#5">5</a>  
</body>

Open in new window

0
 
LVL 22

Accepted Solution

by:
kadaba earned 500 total points
ID: 33678993
I created a small plugin for this...
usage is very simple and you can see it in the attached 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" lang="en" xml:lang="en">
<head>
    <title>Loop It - Kadaba</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script>
		(function($){
			$.fn.extend({ 
				loopThis: function(options) {

					var defaults = {
						toLoop:-1,
						loopDelay:1000
					};
					
					var options = $.extend(defaults, options);
				
					this.each(function() {
						
						var _self = this;
						var timer;
						var loopCount = 0;
						this._init = function(){
							timer = setTimeout(function(){ _self._loop(); },options.loopDelay);
						};						

						/**
						 * loop
						 */
						this._loop = function () {
							var shallLoop = options.toLoop == -1?true: (loopCount < (options.toLoop * $(this).find('a').length)?true:false);
							if(shallLoop)
							{
								var active = $(this).find('a.active');
								if ( active.length == 0 ) active = $(this).find('a:first');
								var next = active.next().length ? active.next(): $(this).find('a:first');
   								next.addClass('active');
								active.removeClass('active');
								loopCount++;
								timer = setTimeout(function(){ _self._loop(); },options.loopDelay);
							}
						};  
						
						this._init();	
					});
				}
			});
		})(jQuery);
	
	</script>
	
	<script type="text/javascript">
	$(document).ready(function() {
		$('#loopThisTwice').loopThis({toLoop:2});
		$('#loopThisMyWay').loopThis({toLoop:10,loopDelay:500});
		$('#loopThisForEver').loopThis();
	});	
	</script>
	<style>
	  .active{
		text-decoration:underline;
	  }
	  
	  a{
		text-decoration:none;
		color:black;
	  }
	</style>
</head>   
<body>

<b>This loops twice:</b>
<div id="loopThisTwice">
	<a href="#1" class="active">Link 1</a> | <a href="#2">Link 2</a>  | <a href="#3">Link 3</a>  | <a href="#4">Link 4</a>  | <a href="#5">Link 5</a>  
</div>

<br>
<b>This loops ten times with shorter duration of 500 ms:</b>
<div id="loopThisMyWay">
	<a href="#1" class="active">Link 1</a> | <a href="#2">Link 2</a>  | <a href="#3">Link 3</a>  | <a href="#4">Link 4</a>  | <a href="#5">Link 5</a>  
</div>

<br>
<b>This loops for ever:</b>
<div id="loopThisForEver">
	<a href="#1" class="active">Link 1</a> | <a href="#2">Link 2</a>  | <a href="#3">Link 3</a>  | <a href="#4">Link 4</a>  | <a href="#5">Link 5</a>  
</div>

</body>
</html>

Open in new window

0
 

Author Comment

by:aznprncritic
ID: 33684588
gurvinder372: your solution doesn't work at all.  You have misspellings in your code and even when corrected, it crashes my browser...

kadaba: very impressive, albeit slightly overkill.  would prefer this to be a simple function rather than a plugin.
0
 
LVL 22

Expert Comment

by:kadaba
ID: 33684669
Thanks.
:)

Here is the simplified version.

<!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" lang="en" xml:lang="en">
<head>
    <title>Loop It - Kadaba</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		timer = setTimeout(function(){ loop(); },1000);
	});	
	
	var loopCount = 0;
	var timer;
	function loop(){
		var shallLoop = (loopCount < (2 * $("#loopThisTwice").find('a').length)?true:false);
		if(shallLoop)
		{
			var active = $("#loopThisTwice").find('a.active');
			if ( active.length == 0 ) active = $("#loopThisTwice").find('a:first');
			var next = active.next().length ? active.next(): $("#loopThisTwice").find('a:first');
			next.addClass('active');
			active.removeClass('active');
			loopCount++;
			timer = setTimeout(function(){ loop(); },1000);
		}
	}
	</script>
	<style>
	  .active{
		text-decoration:underline;
	  }
	  
	  a{
		text-decoration:none;
		color:black;
	  }
	</style>
</head>   
<body>
<div id="loopThisTwice">
	<a href="#1" class="active">Link 1</a> | <a href="#2">Link 2</a>  | <a href="#3">Link 3</a>  | <a href="#4">Link 4</a>  | <a href="#5">Link 5</a>  
</div>
</body>
</html>

Open in new window

0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

813 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now