...

View Full Version : Drag & Drop Script Being Re Formatted for Multiple Windows



DivW
10-14-2003, 01:45 AM
I got a Script about a movable window. I'm trying to learn Javascript as i go along, and i have a couple of books on it (Javascript Bible Gold, Javascript Guide, Javascript Reference Book, Complete Idiot's Guide to Javascript) at my disposal. I've been trying to reformat this peice of code so that i can have a Cascading Style Sheet with all the different Styles on it, and the script uses arrays to hold the co-ordinates of everything. I don't think i've done a very good job of everything, and i need a few pointers. The Page is currently coming up with two errors, one of them isn't a problem, but the other, the "Object Expected" error is (i think) causing the code to stop. I'm not quite sure as to what it refers. Can anyone tell me what's wrong with this code? I'd be eternally grateful if you could. Just a few pointers would be great, i don't expect anyone to sit and debug my code for me. Thanks. Here is my code:


<html>
<head>
<title> Page Title </title>
<style>
#popup {
position: absolute;
width: 500px;
height: 350px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}
</style>
<script>
var notenumber
var popup = new Array()
var pleft = new Array()
var ptop = new Array()
var cx = new Array()
var cy = new Array()
var dragxcoor = new Array()
var dragycoor = new Array()
var newx = new Array()
var newy = new Array()
var notenumber = 1

function startDrag(cx[notenumber],cy[notenumber])
{
clicked = true;
pleft(notenumber)=parseInt(document.getElementById("popup").style.left);
ptop(notenumber)=parseInt(document.getElementById("popup").style.top);
dragxcoor(notenumber)=cx(notenumber);
dragycoor(notenumber)=cy(notenumber);
}

function stopDrag() {
clicked = false;
}

function dragBox(evt) {
e = evt || event;
if (clicked == true) {
newx(notenumber) = pleft(notenumber)+e.clientX-dragxcoor(notenumber);
newy(notenumber) = ptop(notenumber)+e.clientY-dragycoor(notenumber);
document.getElementById("popup").style.left=newx(notenumber);
document.getElementById("popup").style.top=newy(notenumber);
return false;
}
}

document.onmousemove = dragBox;
</script>
</head>


<body bgcolor="448844">
<div id="popup" style="left: 50px; top: 50px;">
<div class="toolbar" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="Notenumber = 1" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 1

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onclick="document.getElementById('popup').style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 1
</div>
</Div>
</body>
</html>


Thanks Peeps. (If you post. If not, yaa boo to you) :thumbsup:

DivW
10-14-2003, 01:48 AM
Oh great my code has smileys in it. They're ike Gremlins, cept cuter i think. ;) just ignore them, you can probably guess what's behind them. But if you can't, then replace :D with : D and :P with : P. ok?

glenngv
10-14-2003, 07:15 AM
what is this? :confused:

function startDrag(cx[notenumber],cy[notenumber])

shouldn't it be just:

function startDrag(notenumberX, notenumberY)

and you should access arrays using brackets not parentheses

dragxcoor[notenumberX]=cx[notenumberX];
dragycoor[notenumberY]=cy[notenumberY];

DivW
10-14-2003, 04:47 PM
OK, i admit it i'm a Javascript Newbie. But we all got to start somewhere, right? I cn't find a good syntax guide for Javascript, on to explain how you lie out the code. And in the script for this i'm not quite sure what's a command and what's a variable. But i'm determined, so i'll get it working eventually. Thanks for the hint...i'll take another look at my code, see if i can get anywhere with it today. I'll probably be back though...so post if you can see where i'm going wrong.

DivW
10-14-2003, 04:57 PM
Horray! That was some great advice man! It works! Don't know how it's going to handle multiple Layers, but i can work with it from here! Thanks! But i'm getting one new error message: Line 53, "clicked is undefined". Anyone know what this means? I'm guessing clicked must be a variable as it's undefined...or is it a function? I'm a little confused. Any help? :(

DivW
10-14-2003, 10:35 PM
Ok, got it. All i had to do was declare "clicked". I guessed it was a boolean-and i gussed right, too. Prob.be back if i get stuck again. watch this space.

DivW
10-14-2003, 11:36 PM
I can't believe i have to do this. I hate haing to ask for help, but i'm in unfamiliar water here and i think those "lamps" are floating mines. I've made a second window in the program to try to test it's multi window capabilities. However things have started to go downhill. Here is my current code, and i'll attach the full code with .gif's to this post. Here you go...

<html>
<head>
<title> Page Title </title>
<style>
#popup1 {
position: absolute;
width: 500px;
height: 350px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar1 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}

#popup2 {
position: absolute;
width: 300px;
height: 250px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar2 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}
</style>
<script>
var clicked
var notenumber
var popup = new Array()
var pleft = new Array()
var ptop = new Array()
var notenumbery
var notenumberx
var dragxcoor = new Array()
var dragycoor = new Array()
var newx = new Array()
var newy = new Array()
var popup = new Array()
var toolbar = new Array()

function startDrag(notenumberx,notenumbery)
{
clicked = true;
pleft[notenumber]=parseInt(document.getelementbyid[popup[notenumber]].style.left);
ptop[notenumber]=parseInt(document.getelementbyid[popup[notenumber]].style.top);
dragxcoor[notenumber]=notenumberx;
dragycoor[notenumber]=notenumbery;
}

function stopDrag() {
clicked = false;
}

function dragBox(evt) {
e = evt || event;
if (clicked == true) {
newx[notenumber] = pleft[notenumber]+e.clientX-dragxcoor[notenumber];
newy[notenumber] = ptop[notenumber]+e.clientY-dragycoor[notenumber];
document.getelementbyid[popup[notenumber]].style.left=newx[notenumber];
document.getelementbyid[popup[notenumber]].style.top=newy[notenumber];
return false;
}
}

document.onmousemove = dragBox;
</script>
</head>


<body bgcolor="448844">
<div id="popup1" style="left: 50px; top: 50px;">
<div class="toolbar1" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="Notenumber = 1" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 1

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onclick="document.getElementById('popup[notenumber]').style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 1
</div>
</Div>

<div id="popup2" style="left: 80px; top: 80px;">
<div class="toolbar2" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="Notenumber = 2" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 2

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onclick="document.getElementById('popup[notenumber]').style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 2
</div>
</Div>

</body>
</html>

DivW
10-14-2003, 11:39 PM
never finished my post last time...right, what i'm looking for is anyone who can tell me where i'm going wrong. I know this code is a little too advanced for me but i know that i can do this because i've done similar movement scripts before. Just not one like this. Anyone got any idea what i'm doing wrong, and how i can make this code work? Thanks you.

glenngv
10-16-2003, 05:31 AM
I haven't seen the attached code. But I saw some syntax errors in the posted codes

onmouseover="Notenumber = 1"

javascript is case-sensitive, you declared it as notenumber so you should use it that way.

onclick="document.getElementById('popup[notenumber]').style.display = 'none';"

popup is a variable (Array) not a literal string, so you should not put it in between quotes

DivW
10-17-2003, 12:28 AM
Hey thanks for those pointers. Like i said, i'm still having trouble with a decent Javascript Syntax guide. HTML is easy enough, it's just Head Body Tail, but all this Script, Then Script References, and all these different sorts of brackets, and all these quotation marks and so on are really kinda overwhelming. I knew Javascript was case sensitive, and i had checked it-obviously not thouroughly enough, however. Thanks Glen. If i get it working then i'll post the code for peeps. :thumbsup:

DivW
10-19-2003, 02:49 PM
Ok, corrected that i think and it still isn't working. Here's a re-post of the code, and an attachment of the full source. I'm not quite sure what "getelementbyID" is for. I typed it into some online stuff and had a look in my books and i can only find usage examples and not any actual explination of what it does. If i was to hazard a guess i'd say it's calling the Style-Sheet. Any one got the time to help me out? the error message says something about this object not supporting this property or method. Thanks.

<html>
<head>
<title> Page Title </title>
<style>
#popup1 {
position: absolute;
width: 500px;
height: 350px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar1 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}

#popup2 {
position: absolute;
width: 300px;
height: 250px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar2 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}
</style>
<script>
var clicked
var notenumber
var popup = new Array()
var pleft = new Array()
var ptop = new Array()
var notenumbery
var notenumberx
var dragxcoor = new Array()
var dragycoor = new Array()
var newx = new Array()
var newy = new Array()
var popup = new Array()
var toolbar = new Array()

function startDrag(notenumberx,notenumbery)
{
clicked = true;
pleft[notenumber]=parseInt(document.getelementbyid[popup('notenumber')].style.left);
ptop[notenumber]=parseInt(document.getelementbyid[popup('notenumber')].style.top);
dragxcoor[notenumber]=notenumberx;
dragycoor[notenumber]=notenumbery;
}

function stopDrag() {
clicked = false;
}

function dragBox(evt) {
e = evt || event;
if (clicked == true) {
newx[notenumber] = pleft[notenumber]+e.clientX-dragxcoor[notenumber];
newy[notenumber] = ptop[notenumber]+e.clientY-dragycoor[notenumber];
document.getelementbyid[popup('notenumber')].style.left=newx[notenumber];
document.getelementbyid[popup('notenumber')].style.top=newy[notenumber];
return false;
}
}

document.onmousemove = dragBox;
</script>
</head>


<body bgcolor="448844">
<div id="popup1" style="left: 50px; top: 50px;">
<div class="toolbar1" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 1" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 1

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onclick="document.getElementById('popup[notenumber]').style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 1
</div>
</Div>

<div id="popup2" style="left: 80px; top: 80px;">
<div class="toolbar2" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 2" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 2

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onclick="document.getElementById('popup[notenumber]').style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 2
</div>
</Div>

</body>
</html>

glenngv
10-20-2003, 02:23 AM
As I said in my earlier post, js is case-sensitive and you access arrays using brackets not parentheses

so change this:

pleft[notenumber]=parseInt(document.getelementbyid[popup('notenumber')].style.left);

to:

pleft[notenumber]=parseInt(document.getElementById(popup[notenumber]).style.left);

You're still putting single quotes in this line: :rolleyes:

onclick="document.getElementById('popup[notenumber]').style.display = 'none';"

Get rid of that single quotes. You only put them if you're using a literal string not a variable.

BTW, document.getElementById gets the reference to an element by its id attribute.

I think you should read more of your JS books.

DivW
10-20-2003, 02:39 PM
Yeah, i should. But they're big and intimidating. I've had a look through them but it's a bit confusing getting my head round everything. I'm not exactly an HTML master, though i'm prety good at it. I think i'll be able to do this in a couple of weeks though if i stick in. Thanks for all your help Glenn.

DivW
10-22-2003, 03:14 PM
Hmm...it still isn't working. In fact, it's working a little less than it was before. I think the problem lies in the functions. I'm not trying to get you write my code for me, but i'm stumped. Can someone explain what's wrong with this code? Because i'm not exactly sure.

glenngv
10-23-2003, 02:47 AM
Post the latest codes again.

DivW
10-23-2003, 12:32 PM
Ok. Here is the latest code. I wonder if the problem is the array with variables? The other arrays work but i wonder if the problem is the array with "document.getElementById(popup[notenumber])". I'd guess that this method doesn't support arrays? I'm not really sure. I'm too used to Visual Basic, and i'm having trouble understanding exactly what this line of code does. The syntax help in Dreamworks comes up empty handed. I think i might have to comletely reformat the code, using CSS and instead of using an array just using basic sraightforward names, like popup1 and popup2. This however means duplicating the actual script part of the code some amount of times. Any ideas on the best course of action? I know mostly what the script does, and i can see how all the math works, but i'm still having trouble with that last part. I'll attach the latest version of the code as well.

<html>
<head>
<title> Page Title </title>
<style>
#popup1 {
position: absolute;
width: 500px;
height: 350px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar1 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}

#popup2 {
position: absolute;
width: 300px;
height: 250px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar2 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}
</style>
<script>
var clicked
var notenumber
var popup = new Array()
var pleft = new Array()
var ptop = new Array()
var notenumbery
var notenumberx
var dragxcoor = new Array()
var dragycoor = new Array()
var newx = new Array()
var newy = new Array()
var popup = new Array()
var toolbar = new Array()

function startDrag(notenumberx,notenumbery)
{
clicked = true;
pleft[notenumber]=parseInt(document.getElementById(popup[notenumber]).style.left);
ptop[notenumber]=parseInt(document.getElementById(popup[notenumber]).style.top);
dragxcoor[notenumber]=notenumberx;
dragycoor[notenumber]=notenumbery;
}

function stopDrag() {
clicked = false;
}

function dragBox(evt) {
e = evt || event;
if (clicked == true) {
newx[notenumber] = pleft[notenumber]+e.clientX-dragxcoor[notenumber];
newy[notenumber] = ptop[notenumber]+e.clientY-dragycoor[notenumber];
document.getElementById(popup[notenumber]).style.left=newx[notenumber];
document.getElementById(popup[notenumber]).style.top=newy[notenumber];
return false;
}
}

document.onmousemove = dragBox;
</script>
</head>


<body bgcolor="448844">
<div id="popup1" style="left: 50px; top: 50px;">
<div class="toolbar1" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 1" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 1

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onmouseover="notenumber = 2" onclick="document.getElementById(popup[notenumber]).style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 1
</div>
</Div>

<div id="popup2" style="left: 80px; top: 80px;">
<div class="toolbar2" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 2" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 2

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onmouseover="notenumber = 2" onclick="document.getElementById(popup[notenumber]).style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 2
</div>
</Div>

</body>
</html>

DivW
10-23-2003, 12:43 PM
Sorry. Same code, no smileys.

<html>
<head>
<title> Page Title </title>
<style>
#popup1 {
position: absolute;
width: 500px;
height: 350px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar1 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}

#popup2 {
position: absolute;
width: 300px;
height: 250px;
display: show;
border: 1px solid #000000;
background-color: #fafafa;
font: 10px verdana;
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=2, OffY=2, Color=#444444, Positive=true);
}
.toolbar2 {
font: 10px verdana;
border-bottom: 1px solid black;
background-color: #bbbbbb;
padding: 2px;
}
</style>
<script>
var clicked
var notenumber
var popup = new Array()
var pleft = new Array()
var ptop = new Array()
var notenumbery
var notenumberx
var dragxcoor = new Array()
var dragycoor = new Array()
var newx = new Array()
var newy = new Array()
var popup = new Array()
var toolbar = new Array()

function startDrag(notenumberx,notenumbery)
{
clicked = true;
pleft[notenumber]=parseInt(document.getElementById(popup[notenumber]).style.left);
ptop[notenumber]=parseInt(document.getElementById(popup[notenumber]).style.top);
dragxcoor[notenumber]=notenumberx;
dragycoor[notenumber]=notenumbery;
}

function stopDrag() {
clicked = false;
}

function dragBox(evt) {
e = evt || event;
if (clicked == true) {
newx[notenumber] = pleft[notenumber]+e.clientX-dragxcoor[notenumber];
newy[notenumber] = ptop[notenumber]+e.clientY-dragycoor[notenumber];
document.getElementById(popup[notenumber]).style.left=newx[notenumber];
document.getElementById(popup[notenumber]).style.top=newy[notenumber];
return false;
}
}

document.onmousemove = dragBox;
</script>
</head>


<body bgcolor="448844">
<div id="popup1" style="left: 50px; top: 50px;">
<div class="toolbar1" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 1" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 1

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onmouseover="notenumber = 2" onclick="document.getElementById(popup[notenumber]).style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 1
</div>
</Div>

<div id="popup2" style="left: 80px; top: 80px;">
<div class="toolbar2" style="display: table">
<table border="0" cellpadding="0" cellspacing="0" width="100%"><td width="11px"><img src="icon.gif" style="border: 0px; width: 11px; height: 11px; cursor:move;" onmouseover="notenumber = 2" onmousedown="startDrag(event.clientX,event.clientY)" onmouseup="stopDrag()"></td><td style="padding-left: 5px; font: 10px tahoma;">

Page Title 2

</td><td style="width: 11px"><span style="display: table-cell; width: 11px;"><img src="close.gif" style="border: 0px; width: 11px; height: 11px; cursor:hand;" onmouseover="notenumber = 2" onclick="document.getElementById(popup[notenumber]).style.display = 'none';"></span></td></tr></table>
</div>
<div style="padding: 5px;">
hi. put your webpage here. 2
</div>
</Div>

</body>
</html>

glenngv
10-24-2003, 03:18 AM
I've got no time to re-implement what you have right now. Just go to my Tower of Hanoi (http://www.dynamicdrive.com/dynamicindex12/hanoi.htm) script featured in Dynamic Drive. It has Drag n Drop capabilities, you may get some idea on how to implement it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum