Question

Hi im trying to load a div next to an link/button if clicked by unauthenticated users.

i have the following:

$(function () {

    $(".unauthenticated").click(function () {
        ShowMessage($(this).attr("id"), "#unauthenticated-div")
    });

    function ShowMessage(clickedItemId, divId) {

        clickedItem = $("#" + clickedItemId);
        var pos = clickedItem.offset();
        var width = clickedItem.width();

        $(divId).css({
            "left": pos.left + width + 10,
            "top": pos.top + 10
        }).show();
    }
});

<div id="unauthenticated-div" title="Please Login" style="display: none;">
    <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;">
    </span>You must <a href="#" id="login-link">login</a>or <a href="/Account/Register/">Register</a>to do this</p>
</div>

It shown the div, but not next to the clicked link. when i step through the code, pos and width are as expected.

Answer 1

Does the element on which you’re setting the position have its position property set to absolute or relative?

If not, try setting it.

    $(divId).css({
        "left": pos.left + width + 10,
        "top": pos.top + 10,
        "position":"absolute"
    }).show();

---

Also, your updated question with the HTML doesn’t show an element with the class "unauthenticated".

Not sure if that’s part of the issue, but the click is being assigned to $(".unauthenticated").