1
var $elem = elem;
var position = $elem.position();
var output = {};
var winX = $(window).height();
var winY = $(window).width();

output.width = $elem.width();
output.height = $elem.height();
output.bottomLeftX = position.left;//left top
output.bottomLeftY = position.top + output.height;//left bottom
output.bottomRightX = position.left + output.width;//right top
output.bottomRightY = position.top + output.height;//right bottom


if(position.left > 0 && position.top > 0 && position.left+output.width < winY && position.top+output.height < winX)
{
    //something
}
else
{
    alert('not gonna fit')
}

return output;

No matter which way I try this, I can't seem to get it right, above is my last attempt before coming here trying to get some help on this. What I am tring to do is get the position of an element in the DOM, and based on its position ultimately show another element. Kind of like a tool tip but different in a few aspects. Anyway. I am trying to figure out how I can flip my outputs around if I need to in the event that the element that will show up is going to go off screen and in the even it will, I want to show it from a different direction..

Currently the element that triggers showing the hidden element. Has that elements top left edges touching the trigger elements bottom left edges. In the event it is going to go off screen such as the trigger element being down near the bottom of the page and to the right I want the element thats going to be showing line up with its bottom right edge touching the top right edge of trigger element. Or if the trigger element is on the left bottom of the page I would want it to line up left top edge of the trigger element.. Eseentially I need to cover the bases of finding the edge and keeping the element in the window. Currently the element that is being shown is 200px by 550px wide, and Im not sure if that in particular will tie into the overall need in the code above.

Any good ways to figure this stuff out without coming up with a dozen+ logics to say hey this is going to fall off any one of the edges of the window/view port, we need to reposition it. to match

1 Answer 1

0

Alright, with no help from here, and much playing around and getting a headache I came up with a solution that works for me. The above bit I ended up putting into its own function to gauge certain aspects of what was being passed around, and then I created a function to measure the elements thats being show and get its placement on the screen. Part of the problem was that due to it being added dynamically to the dom, and then having a style setting of display:none the script was unable to determin where or what or how it was placed until it was physically showing. So after I show the element I then run the second funciton over it to move it as needed when needed.

function tippedOffElemPosition(elem)
{
    var $elem = elem;
    var $msg_elem = $elem.next('.tippedOff_msg');
    var position = $elem.position();
    var offset = $elem.offset();

    var output = {};
    var win_height = $(window).height();
    var win_width = $(window).width();

    output.win_height = win_height;
    output.win_width = win_width;
    //hover trigger
    output.elem_width = $elem.width();
    output.elem_height = $elem.height();
    output.elem_left_top = position.left;//left top
    output.elem_left_bottom = position.top + output.elem_height;//left bottom
    output.elem_right_top = position.left + output.elem_width;//right top
    output.elem_right_bottom = position.top + output.elem_height;//right bottom
    output.elem_offset_left = offset.left;
    output.elem_offset_top = offset.top;
    //final position (default)
    output.setting_top = output.elem_left_bottom;
    output.setting_left = output.elem_left_top;

/*
    debugStr = '';
    debugStr += 'ref = '+$elem.data('ref')+'<br>';
    debugStr += 'win_height = '+win_height+'<br>';
    debugStr += 'win_width = '+win_width+'<br>';
    debugStr += 'output.elem_width = '+output.elem_width+'<br>';
    debugStr += 'output.elem_height = '+output.elem_height+'<br>';
    debugStr += 'output.elem_left_top = '+output.elem_left_top+'<br>';
    debugStr += 'output.elem_left_bottom = '+output.elem_left_bottom+'<br>';
    debugStr += 'output.elem_right_top = '+output.elem_right_top+'<br>';
    debugStr += 'output.elem_right_bottom = '+output.elem_right_bottom+'<br>';
    debugStr += 'output.elem_offset_left = '+output.elem_offset_left+'<br>';
    debugStr += 'output.elem_offset_top = '+output.elem_offset_top+'<br>';
    debugStr += 'output.setting_top = '+output.setting_top+'<br>';
    debugStr += 'output.setting_left = '+output.setting_left+'<br><br>';
    $('#debug').html(debugStr);
*/

    return output;
}
function tippedOffMsgElemPos(msg_elem, elPos)
{
    $msg_elem = msg_elem;
    var msg_position = $msg_elem.position();
    var msg_offset = $msg_elem.offset();
    var msg_width = $msg_elem.width();
    var msg_height = $msg_elem.height();
    var msg_right_side = msg_offset.left + msg_width;
    var msg_bottom = msg_offset.top + msg_height;
    //$('#debug').append('<br><br>msg_right_side = '+msg_right_side+'<br>msg_bottom = '+msg_bottom+'<br>elPos.elem_right_top ='+elPos.elem_right_top);

    var final_top = elPos.setting_top;
    var final_left = elPos.setting_left;

    if(msg_right_side > elPos.win_width)
    {
        final_left = elPos.setting_left-(msg_width-elPos.elem_width);
    }
    if(msg_bottom > elPos.win_height)
    {
        final_top = elPos.elem_offset_top-(msg_bottom+elPos.elem_height);
    }
    //$('#debug').append('<br>final_left = '+final_left);
    $msg_elem.css({"top":final_top, "left":final_left}).show();
}

is my final result.. All in all I am attempting to make a tooltip plugin for jquery that I can custom tailor to my needs, and one that doesn't necessarily need hard coded messages in the elements when you first start out. The end result which I hope to have in the near future will be much more elabort but this serves the purpose for me well enough for now.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.