Question

new to jquery here and I’ve come up with an Ajax box to appear under a link. It works correctly for links on the left side of the page but when a link is on the right, the box aligns incorrectly with the page. I’m using absolute positioning for the box ATM which is why it aligns as it does.

Is there a way to have it align correctly to the right for links on the left-side and then to the left for links on the right-side of the page. Insights really appreciated! Thanks!

http://jsfiddle.net/5hUbG

Answer 1

Here is a rough method of doing it:

http://jsfiddle.net/PdCHZ/12/

[edit]: I updated it to use the tooltip’s width from the CSS:
[edit number 2:] if you add this:

 $('<div/>',{html:"", id:'tooltip'}).css({visibility:"hidden"}).prependTo( 'body' );

at the beginning of $(document).ready(function () { then the oWidth code will automatically get the width from the CSS.

$(document).ready(function () {
    $("a.link").click(function () {
        var $link = $(this);
        $.ajax({
            type: "POST",
            url: '/echo/html/',
            data: {
                html:'these would be the returned data form the <strong>AJAX</strong> call..'
            },
            success: function (response) {
                var pos = $link.position();

                // this just gts the number of pixels from the left of the screen
                // that the element is.
                var offset = $link.offset();

                //set oWidth to 300 unless you want to create a hidden tooltip
                //before this, so that it can read the width from that.
                var oWidth = $("#tooltip").width(); 

                // modifier gets set to -oWidth if the link is less than
                // pixels from the right of the screen (this makes it pop up 
                // to the left of the link instead of to the right)
                // (if the element is more than 300 from the right, then it gets set to 10, like you had it originally)
                var modifier = (offset.left>$(document).width()-oWidth)?-oWidth:10;

                   $('#tooltip').remove();

                   // all i've done here is changed your "10" to "oWidth"
                   // so that it either turns into -300 or +10 depending on
                   // where the link clicked on is on the screen.
                   $('<div/>',{html:response, id:'tooltip'}).css({left:pos.left+modifier+'px', top:pos.top+10+'px'}).prependTo( 'body' );

            }
        });
    });
});

You could replace “300” with something like $("#tooltip").width() so that you wouldn’t have to update it, but you probably get the idea.

The magic happens here:

var modifier = (offset.left>$(document).width()-oWidth)?-oWidth:10;

If you’re not familiar, this is just a shorthand if statement equivalent to this:

if(offset.left>$(document).width()-oWidth){
    var modifier = -oWidth;
} else {
    var modifier = 10;
}

Then you just add modifier to the pos.left and you have your positioning.