Question

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;

无论我尝试哪种方式，我似乎无法做到正确，上面是我最后的尝试，然后来到这里试图获得一些帮助。我要做的是获取DOM中元素的位置，并根据其位置最终显示另一个元素。有点像工具提示但在几个方面有所不同。无论如何。我试图弄清楚如果我需要的话我可以翻转我的输出，如果我将需要显示的元素将要关闭屏幕，即使它会，我想从不同的方向显示它。。

目前触发显示隐藏元素的元素。这些元素的左上边缘是否触及触发元素左下边缘。如果它将离开屏幕，例如触发元素向下靠近页面底部并且向右，我希望元素将显示为直线，其右下边缘触及触发器的右上边缘元件。或者如果触发元素位于页面的左下角，我希望它在触发元素的左上边缘排成一行。我需要覆盖找到边缘并将元素保持在窗口中的基础。目前显示的元素是200px到550px宽，我不确定这是否会与上面代码中的整体需求相关。

任何很好的方法来计算这些东西，而不是提出十几个+逻辑来说，这将会从窗口/视图端口的任何一个边缘掉下来，我们需要重新定位它。匹配

Answer 1

好吧，在这里没有任何帮助，并且玩得很开心并且让我头疼，我想出了一个适合我的解决方案。上面的一点我最终投入了自己的功能来衡量传递内容的某些方面，然后我创建了一个函数来测量显示的元素并将其放置在屏幕上。部分问题在于，由于它被动态添加到dom中，然后样式设置为display:none，脚本无法确定在物理显示之前放置的位置，内容或方式。所以在我显示元素后，然后在它上面运行第二个函数，以便在需要时根据需要移动它。

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

是我的最终结果..总而言之，我试图为jquery创建一个工具提示插件，我可以自定义我的需求，并且当你第一次开始时，不一定需要元素中的硬编码消息。我希望在不久的将来最终的结果会更加精细，但这对我来说已经足够了。

如果元素将离开屏幕，尝试翻转输出

1 个答案: