मैं jQuery का उपयोग कर माउस पॉइंटर से संबंधित एक div को कैसे स्थितिबद्ध करूं?

Question

मान लीजिए मेरे पास मेरे पृष्ठ में एक लिंक है और मैं चाहता हूं कि जब मैं अपने माउस को सिर्फ लिंक पर रखूं, तो एक div माउस x, y के अनुसार दिखाएगा।

मैं इसे jQuery का उपयोग करके कैसे पूरा कर सकता हूं?

Answer 1

var mouseX; 
var mouseY; 
$(document).mousemove(function(e) { 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 
$(".classForHoverEffect").mouseover(function(){ 
    $('#DivToShow').css({'top':mouseY,'left':mouseX}).fadeIn('slow'); 
}); 

उपर्युक्त कार्य पृष्ठ पर जहां भी हो सकता है, लिंक पर DIV दिखाई देगा। जब लिंक छिपा हुआ है तो यह धीरे-धीरे फीका होगा। आप इसके बजाय .hover() का भी उपयोग कर सकते हैं। वहां से DIV, रहना होगा, इसलिए यदि आप DIV चाहते हैं गायब हो जब माउस दूर जाती है, तो,

$(".classForHoverEffect").mouseout(function(){ 
    $('#DivToShow').fadeOut('slow'); 
}); 

आप DIV पहले से ही स्थिति में है, तो आप बस

$('.classForHoverEffect').hover(function(){ 
    $('#DivToShow').fadeIn('slow'); 
}); 

भी उपयोग कर सकते हैं , ध्यान रखें, फीडइन या शो के लिए आपकी डीआईवी शैली को display:none; पर सेट करने की आवश्यकता है।

Answer 2

<script type="text/javascript" language="JavaScript"> 

    var cX = 0; 
    var cY = 0; 
    var rX = 0; 
    var rY = 0; 

    function UpdateCursorPosition(e) { 
    cX = e.pageX; 
    cY = e.pageY; 
    } 

    function UpdateCursorPositionDocAll(e) { 
    cX = event.clientX; 
    cY = event.clientY; 
    } 
    if (document.all) { 
    document.onmousemove = UpdateCursorPositionDocAll; 
    } else { 
    document.onmousemove = UpdateCursorPosition; 
    } 

    function AssignPosition(d) { 
    if (self.pageYOffset) { 
     rX = self.pageXOffset; 
     rY = self.pageYOffset; 
    } else if (document.documentElement && document.documentElement.scrollTop) { 
     rX = document.documentElement.scrollLeft; 
     rY = document.documentElement.scrollTop; 
    } else if (document.body) { 
     rX = document.body.scrollLeft; 
     rY = document.body.scrollTop; 
    } 
    if (document.all) { 
     cX += rX; 
     cY += rY; 
    } 
    d.style.left = (cX + 10) + "px"; 
    d.style.top = (cY + 10) + "px"; 
    } 

    function HideContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    document.getElementById(d).style.display = "none"; 
    } 

    function ShowContent(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    dd.style.display = "block"; 
    } 

    function ReverseContentDisplay(d) { 
    if (d.length < 1) { 
     return; 
    } 
    var dd = document.getElementById(d); 
    AssignPosition(dd); 
    if (dd.style.display == "none") { 
     dd.style.display = "block"; 
    } else { 
     dd.style.display = "none"; 
    } 
    } 
    //--> 
</script> 


<a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')"> 
[show on mouseover, hide on mouseout] 
</a> 
<div id="uniquename3" style="display:none; 
position:absolute; 
border-style: solid; 
background-color: white; 
padding: 5px;"> 
    Content goes here. 
</div> 

Answer 3

आपको माउस x, y को संभालने के लिए $(document).mousemove(function(e) {}) बनाने की आवश्यकता नहीं है। घटना को $.hover फ़ंक्शन में प्राप्त करें और वहां से माउस के एक्स और वाई स्थिति प्राप्त करना संभव है। नीचे दिए गए कोड को देखें:

$('foo').hover(function(e){ 
    var pos = [e.pageX-150,e.pageY]; 
    $('foo1').dialog("option", "position", pos); 
    $('foo1').dialog('open'); 
},function(){ 
    $('foo1').dialog('close'); 
}); 

Answer 4

माउस निर्देशांक पुनर्प्राप्त करने के लिए JQuery का उपयोग करने के कई उदाहरण हैं, लेकिन कोई भी मेरी समस्या को ठीक नहीं करता है।

मेरे वेबपृष्ठ का बॉडी 1000 पिक्सल चौड़ा है, और मैं इसे उपयोगकर्ता की ब्राउज़र विंडो के बीच में केंद्रित करता हूं।

body { 
    position:absolute; 
    width:1000px; 
    left: 50%; 
    margin-left:-500px; 
} 

अब, मेरे जावास्क्रिप्ट कोड में, जब उपयोगकर्ता मेरे पृष्ठ पर राइट-क्लिक किया गया, तो मैं माउस की स्थिति में एक div प्रकट करना चाहता था।

समस्या है, बस का उपयोग कर e.pageX मान बिल्कुल सही नहीं था। अगर मैं अपनी ब्राउज़र विंडो का आकार बदलकर लगभग 1000 पिक्सल चौड़ा हो तो यह ठीक काम करेगा। फिर, पॉप div सही स्थिति पर दिखाई देगा।

लेकिन अगर मेरी ब्राउज़र विंडो के आकार में 1200 पिक्सेल चौड़े, तो कहें तो div 100 पिक्सल दाएं पर दिखाई देगा जहां उपयोगकर्ता ने क्लिक किया था।

समाधान शरीर तत्व के बाध्य आयत के साथ e.pageX को गठबंधन करना है। उपयोगकर्ता अपने ब्राउज़र विंडो के आकार बदलता है, "छोड़ दिया" शरीर तत्व परिवर्तन के मूल्य, और हम इसे ध्यान में की जरूरत है:

// Temporary variables to hold the mouse x and y position 
var tempX = 0; 
var tempY = 0; 

jQuery(document).ready(function() { 
    $(document).mousemove(function (e) { 
     var bodyOffsets = document.body.getBoundingClientRect(); 
     tempX = e.pageX - bodyOffsets.left; 
     tempY = e.pageY; 
    }); 
}) 

ओह। मुझे ठीक करने में थोड़ी देर लग गई! मुझे उम्मीद है कि यह अन्य डेवलपर्स के लिए उपयोगी है!