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

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.

newbie27

ASKER

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

ftaco96

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

newbie27

ASKER

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.

newbie27

ASKER

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

newbie27

ASKER

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

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

newbie27

ASKER

ok thanks

ftaco96

Did that actually work for you?

newbie27

ASKER

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

newbie27

ASKER

thnks

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