Advertisement

05.21.2008 at 04:37AM PDT, ID: 23420340
[x]
Attachment Details

jquery for each loop

Asked by newbie27 in JavaScript

Tags:

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
samStart Free Trial 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:

<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);
	
}
Attachments:
 
screenshot.JPG (77 KB) (File Type Details) 
screenshot
screenshot
 
[+][-]05.21.2008 at 10:08AM PDT, ID: 21617034

View this solution now by starting your 7-day free trial. Setting up your free trial is quick, easy, and secure. We will return you to this solution, unlocked, when you're done.

 

About this solution

Zone: JavaScript
Tags: jQuery, javascript
Sign Up Now!
Solution Provided By: hielo
Participating Experts: 1
Solution Grade: A
 
 
 
Loading Advertisement...
20080716-EE-VQP-32 / EE_QW_2_20070628