Link to home
Start Free TrialLog in
Avatar of newbie27
newbie27Flag for United Kingdom of Great Britain and Northern Ireland

asked on

remove animation for multiple selection

Hello Experts,
I am showing jquery animation using the DIV on onclick event over sinlge element and the same function is been triggered for multiple selection which executes for all the elements available on the page. I wanted to show the animation only when it is been called from invidividual item and not for all.  
Can someone please look into the attached  code and advice me the change I would need.
Your help is much appreciated.
Regards
Sam
PS: Hielo, if you are around please have a look into this.

function addToShortList(){ 
				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" title="'+ myTitle +'" style="background-image:url(\'\');padding-left:0"><a href="#" class="dynAdded" onclick="removeItem(this); return false;" title="Remove">&nbsp;[-]</a>' + myTitle + ' </li>');	
 
				
				$('#'+  theId + '_li').slideDown("slow");
				$('#'+ theId + '_spg').fadeOut('fast',  function(){$(this).remove()});				  
                
                 
				//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
				//$.cookie('shortlist', theId+","+myTitle+","); 
				saveShortList(theId+":"+myTitle);
			 
				
				
			}
//=====================
 
// This is how I am calling the above function 
 
$('.addToShortList').click(addToShortList);  // for single element
 
// for all the elements on the page
		$('#addAll').click(
			 			$('.addToShortList').each(addToShortList);
			 	  	);

Open in new window

Avatar of Pawel Witkowski
Pawel Witkowski
Flag of Poland image

strange code, try change this line: $(this).animate({opacity: "0.3"}, 500);


to $(spigot).animate({opacity: "0.3"}, 500);


Its propably because $(this) points to all document but i might be wrong huh:]
Avatar of newbie27

ASKER

hello wilg32,

thanks for your comments, i am using jquery script.

as you can see, function  "addToShortList()" has been called from 2 locations one on ".addShortList" and another from "#addAll" click.

All I wanted to do is to execute the following only when it is called from ".addShortList"
 -------------------------------------
                                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);
---------------------------------------
               
Long time using jQuery so i will probably do some guesing. You could also publish your page so I could try on code on site whitch you provide. First thing is that in click() function should be function or equivalent. So it might be like this:

                $('#addAll').click(function () {
                                                $('.addToShortList').each(addToShortList);
                                        });


But as I say I might be guesing. Please publish page that I might do some testing
hello wilg32,
thanks for  getting back to me on this

please follow the url below and hopefully you would get better picture of what i am trying to achieve here...
http://213.253.134.6/artism/admin/rdbm_results3.asp?SF1=keyword&ST1=media&SORT=pe_sort_name
please use user details: lau/lau

on the page, when you click on the icon in the main result set, you would notice that selected item is getting added to the shortlist menu in the left ..... ie: on onclick on individual icon, there is also a checkbox on the top, if you tick this all the items on the page will get added to the left shortlist menu,  in both the circumstances you will also notice animation which moves from the current position to the target position....I want to remove animation from the checkbox event....

thanks for your help
ASKER CERTIFIED SOLUTION
Avatar of Pawel Witkowski
Pawel Witkowski
Flag of Poland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks wilq32:
i have updated my code with your suggested change, i am now having error when i click on the clear button and also the animation still seems to be appearing when i click on the checkbox, please have a look.
thanks for your time and help
Its strange - i see the error but I dont see the changed code in script. Maybe I will show you what i changed:

line 1: function addToShortList(anim){

line 17:                                $('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), (anim)?400:1);

line 40: $('.addToShortList').click(function() {addToShortList(true);});

line 44: $('.addToShortList').each(function() {addToShortList(false);});


remember that now your function get argument
hello wilg32,
i have applied the change and rolled it back for now as there was some error in these lines,
 i have noticed your changes though. thanks for your help

var myId = $(this).attr('id');
 var theId = myId.replace('_lnk', '');
 var myTitle =  $(this).attr('title') ;
               
ok, please see now, i am getting the same error again...
I went sleep huh :))

Ok now I see that "this" points to window, not the element that was called from. So now lets do this:
change those lines:


$('.addToShortList').click(function() {addToShortList(true);});  // for single element
 
// for all the elements on the page
                $('#addAll').click(
                                                $('.addToShortList').each(function() {addToShortList(false) });
                                        );




to




$('.addToShortList').click(function() {addToShortList.call(this,true);});  // for single element
 
// for all the elements on the page
                $('#addAll').click(
                                                $('.addToShortList').each(function() {addToShortList.call(this,false) });
                                        );




This will parse 'this' object from anonymous function to function that you will execute.
hello wilg32,
i have added the change and still the same error comes up ...please have a look..
.thanks
addToShortList.call(this,false / true)  -> you forget about .call :))
hello wilg32:
i have changed it now as suggested above .... but still no luck....
the animation still appears from chkAll onclick
sorry my bad, it did worked ... i was missing another line in the function....

thanks for your help
cheers
sam
please ignore my previous comment and please visit the url below to see the effect

http://213.253.134.6/artism/admin/rdbm_results3.asp?SF1=keyword&ST1=media&SORT=pe_sort_name
Yep - this is how I modified it. Is that what you want ?:)
wilg32,
the animation still showing up on the chkAll onclick, I wanted to remove this animation and keep the individual animation as it is ...
thanks again for looking into this for me.
i think it is just showing at the elements position and not scrolling down .. yes you are right there seems to be no animation...thanks
thanks