Member Avatar for 7gakki

Here how it's work.
Hold down the mouse click make the popup show, release will hidden. Continuing hold down the mouse click and moving the mouse around will make the popup follow the mouse.

The problem is how to make the popup (<div id="popup") move follow the mouse cursor, onmouseover inside div?


Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Page</title>
<style>
#popup{
font-family: Monaco;
font-size: 11pt;
width: 200px;
background-color: #E2EBED;
border: 1px dotted #000;
padding: 2px;
height: 100px;
position: absolute;
cursor: hand;
cursor: pointer;
display: none;
}
</style>
<script type="text/javascript">
<!--
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (IE) { // grab the x-y pos.s if browser is IE
tempX = event.clientX + document.body.scrollLeft
tempY = event.clientY + document.body.scrollTop
} else {  // grab the x-y pos.s if browser is NS
tempX = e.pageX
tempY = e.pageY
}  
// catch possible negative values in NS4
if (tempX < 0){tempX = 0}
if (tempY < 0){tempY = 0}  
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
return true
}
//-->

function movepop() {

}

function showpop() {
document.getElementById("popup").style.display = "inline";
document.getElementById("popup").style.left = 20 + tempX + "px";
document.getElementById("popup").style.top = 20 + tempY + "px";

document.getElementById('popup').onmouseover=movepop;
}

function hidepop() {
document.getElementById("popup").style.display = "none";
}
</script>
</head>
<body onmousedown="showpop()" onmouseup="hidepop()">
<div id="popup" onmouseover="movepop()" onmouseout="">
<h3>Menu</h3>
Testing.
</div>
</body>
</html>
  • 2 Contributors
  • 2 Replies
  • 249 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by 7gakki
Member Avatar for 7gakki

I already implemented this.

// Simple follow the mouse script
var divName = 'popup'; // div that is to follow the mouse
                       // (must be position:absolute)
var offX = 15;          // X offset from mouse position
var offY = 15;          // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {if (document.getElementById) {var obj = document.getElementById(divName).style; obj.visibility = 'visible';
obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}

But I confused, how to make when onmousedown and onmousemove, fire the div to follow?

Something like this is not working

document.onmousedown = function() {
document.onmousemove = follow;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.