Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 18
  1. #1
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Drag & Drop Script Being Re Formatted for Multiple Windows

    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;
    filterrogidXImageTransform.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)
    DivW

  • #2
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Gremlins?

    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 with : D and :P with : P. ok?
    DivW

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    what is this?

    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];

  • #4
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Ok, i admit it i'm a newbie

    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

  • #5
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    HOLY CRAP ITS WORKING!

    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

  • #6
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Bugger

    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>
    Attached Files Attached Files
    DivW

  • #8
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    DivW

  • #9
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    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

  • #10
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    DivW

  • #11
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still not working

    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>
    Attached Files Attached Files
    DivW

  • #12
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts

    you were so inconsistent...

    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:

    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.

  • #13
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #14
    New Coder
    Join Date
    Oct 2003
    Location
    Scotland
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    DivW

  • #15
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Post the latest codes again.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •