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

JavaScriptWeb Development

Avatar of undefined
Last Comment
newbie27

8/22/2022 - Mon
Pawel Witkowski

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:]
ASKER
newbie27

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);
---------------------------------------
               
Pawel Witkowski

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
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER
newbie27

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
Pawel Witkowski

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
newbie27

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
Pawel Witkowski

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
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
newbie27

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') ;
               
ASKER
newbie27

ok, please see now, i am getting the same error again...
Pawel Witkowski

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ASKER
newbie27

hello wilg32,
i have added the change and still the same error comes up ...please have a look..
.thanks
Pawel Witkowski

addToShortList.call(this,false / true)  -> you forget about .call :))
ASKER
newbie27

hello wilg32:
i have changed it now as suggested above .... but still no luck....
the animation still appears from chkAll onclick
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
newbie27

sorry my bad, it did worked ... i was missing another line in the function....

thanks for your help
cheers
sam
ASKER
newbie27

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
Pawel Witkowski

Yep - this is how I modified it. Is that what you want ?:)
Your help has saved me hundreds of hours of internet surfing.
fblack61
ASKER
newbie27

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.
ASKER
newbie27

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
ASKER
newbie27

thanks
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.