newbie27
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.
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"> [-]</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);
);
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((($('#short list').off set().top) -110), (($('#shortlist').offset() .left)-0), 400);
$(this).animate({opacity: "0.3"}, 500);
-------------------------- ---------- ---
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((($('#short
$(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(functio n () {
$('.addToShortList').each( addToShort List);
});
But as I say I might be guesing. Please publish page that I might do some testing
$('#addAll').click(functio
$('.addToShortList').each(
});
But as I say I might be guesing. Please publish page that I might do some testing
ASKER
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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((($('#short list').off set().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
line 1: function addToShortList(anim){
line 17: $('#'+ theId + '_spg').offset((($('#short
line 40: $('.addToShortList').click
line 44: $('.addToShortList').each(
remember that now your function get argument
ASKER
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') ;
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
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.
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
// for all the elements on the page
$('#addAll').click(
$('.addToShortList').each(
);
to
$('.addToShortList').click
// for all the elements on the page
$('#addAll').click(
$('.addToShortList').each(
);
This will parse 'this' object from anonymous function to function that you will execute.
ASKER
hello wilg32,
i have added the change and still the same error comes up ...please have a look..
.thanks
i have added the change and still the same error comes up ...please have a look..
.thanks
addToShortList.call(this,f alse / true) -> you forget about .call :))
ASKER
hello wilg32:
i have changed it now as suggested above .... but still no luck....
the animation still appears from chkAll onclick
i have changed it now as suggested above .... but still no luck....
the animation still appears from chkAll onclick
ASKER
sorry my bad, it did worked ... i was missing another line in the function....
thanks for your help
cheers
sam
thanks for your help
cheers
sam
ASKER
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
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 ?:)
ASKER
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.
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
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
thanks
to $(spigot).animate({opacity
Its propably because $(this) points to all document but i might be wrong huh:]