CSS:
.flyoutdialog { position: absolute; top:0; left:0; border: 1px solid #CCC; background-color: white; width: 250px; padding: 10px 10px 10px 10px; }
jQuery: (dialog - 1 element $ (". flyoutdialog"), button - 1 element $ (". flyouticon"))
var offset = button.offset(); alert("top: " + offset.top + " left: " + offset.left); // dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); dialog.css("top", offset.top - 5 + "px"); dialog.css("left", offset.left + 25 + "px"); dialog.show("blind", { direction: "horizontal" }, 1000); var off2 = dialog.offset(); alert("top: " + off2.top + " left: " + off2.left);
HTML:
<div class="editor-label"> <label for="Gebruikerscode">Gebruikerscode</label> </div> <div class="editor-field"> <input id="gebruikerscode" name="gebruikerscode" type="text" value="" /> <a href="#" class="flyouticon"> <img src="/img/help.png" alt="Flyout" width="16" /></a> <div class="flyoutdialog grayicon" title="Gebruikerscode"> <div class="title"> <h4> Gebruikerscode</h4> <span class="closedialog ui-icon ui-icon-closethick"> </span> </div> <p> Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p> </div> </div>
Situation:
I have a .flyouticon icon, which when hovering or clicking should open the .flyoutdialog dialog should appear next to it. for this, I thought I would use this code. This code WORKS, but only (!!!!) when I do not scroll down or to the right.
When NOT scrolling:
var offset = button.offset(); alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875 dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); dialog.show("blind", { direction: "horizontal" }, 1000); var off2 = dialog.offset(); alert("top: " + off2.top + " left: " + off2.left); //top: 370 left: 313.29998779296875
works perfect. but WHEN it scrolls:
var offset = button.offset(); alert("top: " + offset.top + " left: " + offset.left); //top: 375 left: 288.29998779296875 dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); dialog.show("blind", { direction: "horizontal" }, 1000); var off2 = dialog.offset(); alert("top: " + off2.top + " left: " + off2.left); //**top: 142** left: 313.29998779296875
TOP has become smaller ... why does this happen when I scroll
Correction:
var offset = button.offset(); alert("top: " + offset.top + " left: " + offset.left); //dialog.offset({ top: offset.top - 5, left: offset.left + 25 }); dialog.css("top", offset.top - 5 + "px"); dialog.css("left", offset.left + 25 + "px"); dialog.show("blind", { direction: "horizontal" }, 1000); var off2 = dialog.offset(); alert("top: " + off2.top + " left: " + off2.left);
Question:
Why is offset() not working correctly? I use Firefox, but I think it does not matter. (Edit: The same in IE8, so this is not a browser). Why do I need to use individual CSS properties when the dialog is completely free? and why does this happen when i scroll down? why is the "TOP" getting smaller? when I just set it with the value that it should be. Is this an error in the offset() installer?
Edit:
OK,
dialog.offset({ top: offset.top + $(window).scrollTop() - 5, left: offset.left + 25 });
seems to work. But this does not answer my question WHY? . Why does the offset automatically subtract the scrollTop() value from the top value in the setter? it does not make sense!