Question

The CSS:

.flyoutdialog
{
    position: absolute;
    top:0;
    left:0;
    border: 1px solid #CCC;
    background-color: white;
    width: 250px;
    padding: 10px 10px 10px 10px;
}

The jQuery: (dialog is 1 item of $(“.flyoutdialog”), button is 1 item of $(“.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);

The 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">&nbsp;</span>
    </div>
    <p>
        Dit is de code of 'gebruikersnaam' waarmee de school inlogt. Deze is uniek.</p>

</div>

</div>

The Situation:

I have an icon .flyouticon which, when hovered or clicked should open the .flyoutdialog
the dialog should come right next to it. to do that, i thought i’d use this code. This code WORKS, but only(!!!!) when i do not scroll down or to the right.

When NOT scrolled:

    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

working perfect. but, WHEN scrolled:

    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

The TOP became smaller… why does this happen when I scroll??

The Fix:

    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);

The Question:

why did offset() not work correctly here? I’m using Firefox but I guess that doesn’t matter. (Edit: in IE8 the same. so it’s not the browser) Why do I have to use individual CSS properties when the dialog is positioned absolute anyway? and why does it go UP when I scroll down? why does ‘TOP’ become smaller?? when i just have set it with the value it should be. is this a bug in the setter of offset()?

The Edit:

well,

    dialog.offset({ top: offset.top + $(window).scrollTop() - 5, left: offset.left + 25 });

seems to work. But this doesn’t answer my question WHY? Why does the offset automatically deduct the scrollTop() value from the top value in the setter? this doesn’t make sense!

Answer 1

offset will not work as you expect when scrolling. you need to add $(window).scrollTop() to it