troubleshooting Question

jquery for each loop

Avatar of newbie27
newbie27Flag for United Kingdom of Great Britain and Northern Ireland asked on
JavaScript
3 Comments1 Solution24329 ViewsLast Modified:
Hello Experts,
I am trying to implement list manager using jquery, so far i have managed to create a short list by allowing users to add or remove items with the animation. I am attaching both the screenshot and jquery code, hopefully it may make sense looking at it.
I need couple of more things in it and I am completely stuck as it is proving to be difficult to add or delete all lists at once, i learnt that there is for each loop in jquery but dont know how to use it.
I will add a separate question for my other few issues, please can someone assist me in this?
your help is much appreciated.
regards
sam
<script>//<![CDATA[   
$(document).ready(function(){
	// Extend offset function
	jQuery.fn._offset = jQuery.fn.offset;
	jQuery.fn.extend({
	    offset: function() {
	        var a = arguments;
	        return (a.length) ? this.animate({ top: a[0].top || a[0], left: a[0].left || a[1] }, (a[0].top ? a[1] : a[2]) || 1) : this._offset();
	    }
	});
	// end
	
	// First thing will be to load items from the cookie showShortList()
	// Store as array [RefNo: Title, etc.] then construct <li></li> etc. from this
	
	$('.addToShortList').click(function () { 
	
		var myId = $(this).attr('id') ;
		var theId = myId.replace('_lnk', '');
		var myTitle =  $(this).attr('title') ;
		
		//Don't add the same item again.. [i think that there is a cooler wya to do this]
		var myLi = $('#' + theId + '_li').html();
		if (myLi){
			//this doesn't work on the first click?! we need a better test
			$('#'+myId).mousedown(function(){$('#' + theId + '_li').css('background','#fef8a5')});
			$('#'+myId).mouseup(function(){$('#' + theId + '_li').css('background','')});
			return;
		}
		
		// create div for the animation
		var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + '; top:' + $(this).offset().top + '; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
		$('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);
		$(this).animate({opacity: "0.3"}, 500);
		
		//I.E seems to require display:none; followed by .show/slideDown event. FF is OK without!
		$('#shortlist').prepend('<li id="' + theId + '_li" style="display:none;">' + myTitle + ' <a href="#" onclick="removeItem(this); return false;" title="Remove">[-]</a></li>');
		$('#'+  theId + '_li').slideDown("slow");
		$('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});
		
		
		//alert($(this).offset().top + ', ' + $(this).offset().left + ' >>> ' + $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left);
		//var msg = $('#shortlist').offset().top + ', ' + $('#shortlist').offset().left + '\n';
		//msg += $('#'+ theId + '_spg').offset().top + ', ' + $('#'+ theId + '_spg').offset().left;
		//alert(msg);
		
		//N.B. The page should load the cookie and then set the Add2ShortList buttons to opacity 0.3 - so's you know.. :) use .each fn
		
	});
 
	
 });
 
 
function removeItem(el){
 
	var myId = $(el).parent().attr('id') ;
	var theId = myId.replace('_li', '');
	
	$('#'+myId).slideUp("slow", function(){$(this).remove()});
	$('#'+theId+'_lnk').animate({opacity: "1.0"}, 500);
	
}
screenshot.JPG
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 3 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 3 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros