Avatar of newbie27
newbie27Flag for United Kingdom of Great Britain and Northern Ireland asked on

offset in IE is wrong

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
screenshot.JPG
Web Languages and StandardsHTMLCSS

Avatar of undefined
Last Comment
hielo

8/22/2022 - Mon
ftaco96

Here are some functions for you from this link:
http://www.webreference.com/dhtml/diner/realpos1/7.html

function DL_GetElementLeft(eElement)
{
    var nLeftPos = eElement.offsetLeft;          // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nLeftPos += eParElement.offsetLeft;      // appending left offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nLeftPos;                             // return the number calculated
}
 
function DL_GetElementTop(eElement)
{
    var nTopPos = eElement.offsetTop;            // initialize var to store calculations
    var eParElement = eElement.offsetParent;     // identify first offset parent element  
    while (eParElement != null)
    {                                            // move up through element hierarchy
        nTopPos += eParElement.offsetTop;        // appending top offset of each parent
        eParElement = eParElement.offsetParent;  // until no more offset parents exist
    }
    return nTopPos;                              // return the number calculated
}

Open in new window

ftaco96

The link is part of a good tutorial on element positioning.
ASKER
newbie27

hello ftaco96,
thanks for your comments, i have been to your suggested links above to see if i can make use of any in my code but that does not helped me, can you please look into the attached code which I am using to display the said animation above.
may be i just need few changes here.
thanks for your hlep.
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!
			       
				

Open in new window

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
ftaco96

I'd need to see how this fits into the rest of the code to know what the problem is.
ASKER
newbie27

hello ftaco96,
thanks for getting back to me on this
please follow the url below
http://213.253.134.6/artism/admin/rdbm_results3.asp?SF1=keyword&ST1=media&SORT=pe_sort_name
user details: lau/lau

when you are there, please click on the icon in the resultset, on onclick event the item clicked will get added to the short list menu in the left nav, during this process you will see an animation scolling down to left menu. It is animation which is not showing up properly in IE.

thanks for your help
regards
s
ftaco96

I would reevaluate the need for the 110(at least in IE) in this line:
$('#'+ theId + '_spg').offset((($('#shortlist').offset().top)-110), (($('#shortlist').offset().left)-0), 400);

The animation seems to be starting 110px lower than it's supposed to. It may have something to do with the way IE does offsetTop.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ASKER
newbie27

would you recommend me to check for the browser and then write this line in javascript   ..
if so can you please let me know how this could be accomplished ...  
many thanks for your help
regards
s
ASKER
newbie27

would you recommend me to check for the browser and then write this line in javascript   ..
if so can you please let me know how this could be accomplished ...  
many thanks for your help
regards
s
ASKER CERTIFIED SOLUTION
ftaco96

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

ok thanks
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ftaco96

Did that actually work for you?
ASKER
newbie27

hello ftaco96,
i am sorry i was occupied in something else and i have not tested this yet. will let you know.
thanks
sam
ASKER
newbie27

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

Hi Sam,

After fiddling with your code, I finally found the problem. For IE, you need to change this:
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>');
 
with this:
 
	var spigot = $(this).after('<div id="' + theId + '_spg" style="left:' + $(this).offset().left + 'px; top:' + $(this).offset().top + 'px; position: absolute; background:#fef8a5; z-order: 6000; ">' + myTitle + '</div>');
	if($.browser.msie)
   		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>');

Open in new window