重新定位窗口中的div，如果它重疊

我在jQuery上動態地在頁面上創建div。如果鼠標點擊位置位於屏幕的下方，div將部分顯示在屏幕外。基本上屏幕680px，鼠標點擊600px，div高度300，div的較低的220px將會溢出屏幕，因爲溢出屬性被設置爲隱藏。重新定位窗口中的div，如果它重疊

我想要實現的是，將計算多少迴向上移動它，以確保在div是完全可見的功能。

不幸的是，它不工作。任何幫助表示讚賞，甚至通過CSS或其他替代解決方案。

這個功能應該在PX返回值top。基本上它應該計算div超過屏幕高度的多少，並從當前鼠標位置移除它以使div適合。

的Javascript：

var mousex; 
var mousey; 
var currshowingid; 
var mousepos; 

$(document).on("mousemove", function(event) { 
    mousex = event.pageX; 
    mousey = event.pageY; 
    //console.log("pageX: " + event.pageX + ", pageY: " + event.pageY); 
}); 

function xfromtop(el) { 
    if ((mousey + $(el).height()) > $(window).height()) { 
     fromtop = mousey - ((mousey + $(el).height()) - $(window).height())*1.1; 
     fromtop = fromtop.toString() + "px"; 
    } else { 
     fromtop = mousey.toString() + "px"; 
    } 
    return fromtop; 
}

這將創建DIV運行時間和使用xfromtop（）所涉及的top CSS屬性

function showdriverdetails(id) { 
    $('div[id^="driver_"]').remove(); 
    // Add div and place in at mouse position 
    $("#main").append("<div class='driverdetails dets' id='driver_" + id + "'>"); 
    $("#driver_" + id).load("ajax/driver_info.php?id=" + id).fadeIn().draggable(); 
    $("#driver_" + id).css("top", xfromtop($("#driver_" + id))); 
}

CSS：

div.driverdetails { 
    width: 70%; 
    height: auto; 
    min-height: 300px; 
    max-height: 400px; 
    left: 18%; 
} 

.dets { 
    z-index: 1000; 
    position: fixed; 
    padding: 2px; 
    border: solid #5c6cb0 2.5px; 
    background-color: white; 
    border-radius: 12px; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    display: none; 
}

HTML：

<button onclick="showdriverdetails(100)">SHOW</button>

來源

2015-05-01 Fabrizio Mazzoni

您可以指定哪些是不工作？ – Jeff

基本上'頂值'的計算方式不正確。根據xfromtop（）函數，每次div太低都應該使其恢復。 –

你試過 'window.innerHeight'直接而不是jQuery hight（）？ – Jeff

height屬性不考慮保證金，填充和邊界。你應該使用jQuery的outerHeight來獲得你div的全部高度。

function xfromtop(el) { 
    var elHeight = $(el).outerHeight(); 
    var windowHeight = $(window).height(); 

    if ((mousey + elHeight) > windowHeight) { 
     fromtop = windowHeight - elHeight; 
     fromtop = fromtop.toString() + "px"; 
    } else { 
     fromtop = mousey.toString() + "px"; 
    } 
    return fromtop; 
}

來源

2015-05-01 16:58:02 Grax

重新定位窗口中的div，如果它重疊

回答

相關問題