Solved

jquery - IE and FF offset

Posted on 2008-06-14
19
2,628 Views
Last Modified: 2012-08-13
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
0
Comment
Question by:newbie27
  • 12
  • 7
19 Comments
 
LVL 8

Author Comment

by:newbie27
ID: 21785611



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
 
LVL 18

Expert Comment

by:wilq32
ID: 21797578
I think that we could help you in this case only when see a page in Aciton - some link maybe ?: )
0
 
LVL 8

Author Comment

by:newbie27
ID: 21797687
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
 
LVL 8

Author Comment

by:newbie27
ID: 21797735
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
 
LVL 18

Expert Comment

by:wilq32
ID: 21797967
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
 
LVL 8

Author Comment

by:newbie27
ID: 21798028
hello wilg32,
i have made the changed as suggested but still it is doing the same, can you please have a look ...
thanks
0
 
LVL 18

Expert Comment

by:wilq32
ID: 21798072
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
 
LVL 8

Author Comment

by:newbie27
ID: 21798083
ok thanks wilg32. I hope and I am sure you will crack it.
thanks for your time.
0
 
LVL 18

Accepted Solution

by:
wilq32 earned 500 total points
ID: 21798097
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 8

Author Comment

by:newbie27
ID: 21798120
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
 
LVL 8

Author Comment

by:newbie27
ID: 21798154
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
 
LVL 18

Expert Comment

by:wilq32
ID: 21798157
Im not sure what are you asking for, I check both in FF and IE 7.0 and have similar behaviour :/
0
 
LVL 18

Expert Comment

by:wilq32
ID: 21798166
Uhh I dont have "addall" on this page that you provided :)
0
 
LVL 8

Author Comment

by:newbie27
ID: 21798239
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
 
LVL 8

Author Comment

by:newbie27
ID: 21798343
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
 
LVL 8

Author Closing Comment

by:newbie27
ID: 31467199
thanks
0
 
LVL 8

Author Comment

by:newbie27
ID: 21798411
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
 
LVL 8

Author Comment

by:newbie27
ID: 21798448
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
 
LVL 18

Expert Comment

by:wilq32
ID: 21800273
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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now