Tuesday, 10 September 2013

hashchange event possible bug

hashchange event possible bug

I think I've found a really unusual bug in javascript but I'm not sure.
So I have three child divs absolutely positioned inside a parent div (that
is position relative).
The three child divs are 1200px wide and are side by side inside the parent.
So the first div is left:0px the second is left:1200px and the third is
left:2400px.
Now my goal is to click and the divs shift.(the parent div is acting as a
1200px viewport)
$("#blogNav").click(function()
{
$("#blog").css( "left", "0px");
$("#software").css( "left", "1200px");
$("#about").css( "left", "2400px");
});
$("#softwareNav").click(function()
{
$("#blog").css( "left", "-1200px");
$("#software").css( "left", "0px");
$("#about").css( "left", "1200px");
});
$("#aboutNav").click(function()
{
$("#blog").css( "left", "-2400px");
$("#software").css( "left", "-1200px");
$("#about").css( "left", "0px");
});
THIS WORKS PERFECTLY.
Now here's the issue.
When I do the exact same thing with a hashchange event:
window.onhashchange = function()
{
if(window.location.hash=="#blog")
{
$("#blog").css( "left", "0px");
$("#software").css( "left", "1200px");
$("#about").css( "left", "2400px");
}
if(window.location.hash=="#software")
{
$("#blog").css( "left", "-1200px");
$("#software").css( "left", "0px");
$("#about").css( "left", "1200px");
}
if(window.location.hash=="#about")
{
$("#blog").css( "left", "-2400px");
$("#software").css( "left", "-1200px");
$("#about").css( "left", "0px");
}
};
THE POSITIONING IS ALL MESSED UP.
The 0px location of the parent div is shifted so that the 0px is no longer
the left border of the parent div. Its at some negative margin.
The only thing that has change is the hashevent.
I hope I'm explaining this well enough.
I'll try to upload some examples to my site soon.
It's really strange how the exact same logic works with a click event but
not with a hashchange event.

No comments:

Post a Comment