jquery - IE and FF offset

Hello Experts,
I have an animation on the page which triggers when the user click on the icon, it is working fine in FF however, the offset in IE is incorrect, I mean the starting position of the animation.
If you could please see the attached IE screenshot, you would know what I mean here.
Animation for "highfield,ashley" should start from its position (where the name is printed) however, it is starting from some vague position, its target position is in the left Short List Menu where it will go and sits.
Please can you advice me what needs to be done to make it work in both the browsers.
thanks for your help
regards
sam
LVL 8
newbie27Asked:
Who is Participating?
 
Pawel WitkowskiConnect With a Mentor Senior Javascript DeveloperCommented:
As I understand correctly this element is created two times because of this lines:

var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-100) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
80 if($.browser.msie===true)
81 spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-80) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
82



change this to:


var spigot;
 if($.browser.msie===true)
{
spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-100) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
}
else
{
 spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-80) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
}
0
 
newbie27Author Commented:



hello,
i have used the following to make the offset work in IE

var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-100) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
        if($.browser.msie===true)
                spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + ($(this).offset().top-80) + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');

 the animation have started appearing from the correct position, however, it is leaving the yellow background behind in IE ....


please can someone advice
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
I think that we could help you in this case only when see a page in Aciton - some link maybe ?: )
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
newbie27Author Commented:
hello wilg32,
thanks for looking into this,
please follow the link
http://213.253.134.6/artism/admin/rdbm_results.asp?SF1=keyword&ST1=media&SORT=pe_sort_name
user details for authorisation:  lau/lau
0
 
newbie27Author Commented:
once you are there, please click on the icon to see the action, it works fine in Firefox but in IE it is leaving the yellow backgroung behind ... i wanted to remove complete animation for the addAll icon  which is in the header ...

thanks for your help

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
try change this line:

$('#'+ theId + '_spg').fadeOut('fast', function(){$(this).remove()});


to:


$('#'+ theId + '_spg').fadeOut('fast', function(){$('#'+ theId + '_spg').remove() ;});


hmm... and if this do not work then do alert(theId); before this function to see does the id is parsed correctly
0
 
newbie27Author Commented:
hello wilg32,
i have made the changed as suggested but still it is doing the same, can you please have a look ...
thanks
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Hmm this alert just show me one thing -> removing element is ok, problem lying in colorizing element when created -> both new and old element got changed color. I try to figure out from where it comes from
0
 
newbie27Author Commented:
ok thanks wilg32. I hope and I am sure you will crack it.
thanks for your time.
0
 
newbie27Author Commented:
Great thanks, we almost there, if you please noticed that fade out property has lost on the icon after getting added to the list. Earlier soon after the list being added the selected icon will go fade out .. so that we know that it is selected.....

thanks for your help
0
 
newbie27Author Commented:
Well I think I have to add  
 $(this).animate({opacity: "0.3"}, 500);
and it has made the fading out feature on the icon. ...

i am sorry if i have misguided you earlier by saying I wanted to completely remove the animation !?!

what I meant by this was for addAll button,  I do not want to show animation when you click addAll button on the top .... otherwise for the single selection it should the animation ....

i am sorry but this is what it is desired....
thanks
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Im not sure what are you asking for, I check both in FF and IE 7.0 and have similar behaviour :/
0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
Uhh I dont have "addall" on this page that you provided :)
0
 
newbie27Author Commented:
wilg32,
i have reverted back the changes for now just to show you the effects I had earlier, I mean, you can either click on individual icons to add the record to the list or you can also add all the record ids to the short list by clicking on the icon in the table header....
i wanted the animation to remove completely for this .addAll event and IE offset, these were the two desired changes ...

hope this helps to understand the situation?

thanks for your help
0
 
newbie27Author Commented:
i must take this as a solution for this question, can you please follow
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23475572.html
for further few changes please...

thanks for your help and time !
0
 
newbie27Author Commented:
thanks
0
 
newbie27Author Commented:
wild32,
while you are there please if you have another few minutes to look into another issue i am having on the next page, after adding few items to the lists please click on save which will take you to the list_admin.asp, there you will see the temporary list you have selected will be shown in the Flexigrid, you can save this it as a list in the xml file by giving some list name and notes.

if you see in the drop down you will find couple of existing list and when you pick any and click on view list button it should show you the details of the selected item, this however is working only for the first click, when you pick another item from the list and click view , the view_proxy.asp is not been called at all ... although it is doing fine for first time but for some reason is failing in the second call...

please wilg32, can you also look into this ...i am completely stuck with this since yesterday ...

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23487530.html
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23486091.html
your help is much much appreciated.
many thanks for your help
regards
sam

0
 
newbie27Author Commented:
ok this has been fixed, i have applied your changes and added
$('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), (anim)?400:1);  
$(this).animate({opacity: "0.3"}, 500);

it worked !

thanks for your help can you please post your comment on the above similar issue ... i will close it ...and please if you get the chance , please have a look at the flexigrid issue.

0
 
Pawel WitkowskiSenior Javascript DeveloperCommented:
I would help you with pleasure with your problems with flexigrid, If I only could. Unfortunately, I have to idea about this plugin for jQuery (just never used) so I cant help you in this case :((( but I hope that some other expert know a little more about that, and will help you! Good luck!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.