Obvious jumping of element from original position to new positon after loading of new page
Hi Guys,
If you go on my test site: http://www.awais-muzaffar.co.uk/test/index.php
You will see a navigation menu at the top, with an animated ball. Every time you click on one of the links in the navigation menu, you will notice that after a new page is loaded there is a sudden jump from the balls original position to it's new position. (Not that obvious in Firefox but very obvious in IE and Safari)
My question is how can I resolve this.
I assumed that wrapping the code in the $(document).ready function would elimate this issue as everything inside it will load before the page contents are loaded.
This is the code I am using to set the balls position:
$(document).ready(function() {
var
pageLocation = window.location.toString().split("/");
var
pageName = pageLocation[pageLocation.length - 1];
var
selectedLink = $("li:has(a[href^="+pageName+"])");
var
linkPosition = selectedLink.position();
var
aWidth = selectedLink.width();
var
aHalf = aWidth / 2;
var
aCenter = aHalf - 8;
var
selectedLinkLeft = linkPosition.left + aCenter;
$(
".circle").css("left",selectedLinkLeft);
$(
"a[href="+pageName+"]").addClass("selected");
});