PDA

View Full Version : A moving layer...

ConfusedOfLife
08-28-2002, 10:35 AM
I wrote this program to simulate a simple window, I mean a window that you can move if you hold press the mouse button on the title of the window, here's the program :




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<div id="Pos" style="position : absolute; top : 10px; left : 50px; width : 100px; height : 100px; background-color : red;">
<div id="Title" style="position : relative; cursor : default; background-color :blue; width : 100px; height : 25px">
<span>Our Title</span>
</div>
<span id="cont">This is just a test.</span>
</div>

<script>
mx = 0; my = 0;
function trackmouse(evt)
{
mx = event.clientX + document.body.scrollLeft;
my = event.clientY + document.body.scrollTop;
}
function doit()
{
trackmouse();
currTop = parseInt(document.getElementById("Pos").style.pixelTop);
currLeft = parseInt(document.getElementById("Pos").style.pixelLeft);
capX1 = mx - currLeft - 2;
capY1 = my - currTop - 2;
document.getElementById("Pos").style.pixelTop = currTop + capY1 - capY0;
document.getElementById("Pos").style.pixelLeft = currLeft + capX1 - capX0;
}

document.getElementById("Title").onmousedown = function()
{
trackmouse();
capX0 = mx - document.getElementById("Pos").style.pixelLeft - 2;
capY0 = my- document.getElementById("Pos").style.pixelTop - 2;
document.getElementById("Title").onmousemove = function()
{
doit();
}
}
document.getElementById("Title").onmouseup = document.getElementById("Title").onmouseout =
function() { };
</script>

</body>
</html>



But there are several problems with my program:
1- It seems that the mouse moves faster than my layer, because most of the times the layer falls behind the mouse pointer.
2- Even though I tried to stop moving the layer after mouseup, I mean when the user leaves the mouse button, it doesn't work properly.
3- By going on the title, and trying to drag the simulated window, the text of the title get's highlighted too, that I couldn't do anything for that.

I would appreciate it if anyone can fix these bugs and also I like to hear all the suggestions for improving my program.
Many thanx in advance
ConfusedOfLife
09-08-2002, 01:14 AM
Doesn't anybody want to answer?
x_goose_x
09-08-2002, 01:46 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>

<div id="Pos" style="position : absolute; top : 10px; left : 50px; width : 100px; height : 100px; background-color : red;">
<div id="Title" style="position : relative; cursor : default; background-color :blue; width : 100px; height : 25px">
<span>Our Title</span>
</div>
<span id="cont">This is just a test.</span>
</div>

<script>
mx = 0;
my = 0;
go = false;
function trackmouse(evt)
{
mx = event.clientX + document.body.scrollLeft;
my = event.clientY + document.body.scrollTop;
}
function doit()
{
trackmouse();
if (go) {
currTop = parseInt(document.getElementById("Pos").style.pixelTop);
currLeft = parseInt(document.getElementById("Pos").style.pixelLeft);
capX1 = mx - currLeft - 2;
capY1 = my - currTop - 2;
document.getElementById("Pos").style.pixelTop = currTop + capY1 - capY0;
document.getElementById("Pos").style.pixelLeft = currLeft + capX1 - capX0;
}
}

document.getElementById("Title").onmousedown = function()
{
go = true;
trackmouse();
capX0 = mx - document.getElementById("Pos").style.pixelLeft - 2;
capY0 = my- document.getElementById("Pos").style.pixelTop - 2;
document.getElementById("Title").onmousemove = doit;
}
document.getElementById("Title").onmouseup = document.getElementById("Title").onmouseout =
function() { go = false; };
</script>

</body>
</html>


IE ONLY!
Mr J
09-08-2002, 02:49 PM
Take a look here:


www.huntingground.freeserve.co.uk/scripts/moveobj.htm


Also take a look at the resizable layer in my CCS section, these might point you in the right direction.

Don't hurt to look...........

:thumbsup:
ConfusedOfLife
09-08-2002, 11:21 PM
Thank you, at least some answers! I tried your code x_goose, but when I tried to move the mouse fast when I was draging the layer, I still had the same problem that mouse moves faster than the layer, to be honest, it's so late now that I don't have time to check the whole code, I'm gonna do that tomorrow morning, anyway thanks.
And as for as your link Mr.J, thanks, I'm gonna take a look at that:thumbsup:

Edit : It's some cool music in your site! also it's simple and beautiful, the type of site that I like!
x_goose_x
09-08-2002, 11:38 PM
change:

document.getElementById("Title").onmouseup = document.getElementById("Title").onmouseout =
function() { go = false; };

to:

document.getElementById("Title").onmouseup = document.body.onmouseout =
function() { go = false; };

if doesn't work right try:

document.getElementById("Title").onmouseup = function() { go = false; };