OZONE Asylum
Forums
DHTML/Javascript
Basic interactive "game" using javascript!
This page's ID:
32631
Search
QuickChanges
Forums
FAQ
Archives
Register
Edit Post
Who can edit a post?
The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.
Your User Name:
Your Password:
Login Options:
Remember Me On This Computer
Your Text:
Insert Slimies »
Insert UBB Code »
Close
Last Tag
|
All Tags
UBB Help
Hello to all the insane forum members, this is my first post. Can anyone care to help out? Need help on the following features: 1A) clean up all the code so it has a better CSS 1B) create a better/efficient code for the gap between the 2 rows of images. currently using paragraph breaks etc which is primitive code but Im only limited to self-taught in code design. Note the code for the gap must allow also allow the option/possibility of putting in an iFrame for another page if required. 2A) need to modify the Drag n Drop script to allow images to be dragged onto other images in any rows of tables where onDrop a new image loads up replacing both the original image and the image that was Drag n Dropped. 2B) optional the thumbnail position from which the Drag n Dropped image originated from must load another image that signifies (notifies the user/viewer) it has been moved. Or some code which changes the color of the original thumbnail position. 3) <div id="div16" thumbnail is set to > draggable=false > though if you click onto it to test if its draggable the image changes color. Is there a better code that can be added which can prevent that little bug for all images set to false? Any help with listing links to helpful code that I require will be appreciated 1000 times. [b]Here is the code[/b] <head> <style type="text/css"> #div1, #div2, #div3, #div4, #div5, #div6, #div7, #div8, #div9, #div10, #div11, #div12, #div13, #div14, #div15, #div16, #div17, #div18, #div19, #div20 {float:left; width:63px; height:87px; margin:1px;padding:1px;border:1px solid #aaaaaa;} </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data )); ev.preventDefault(); } </script> </head> <body> <div style="text-align:center;"> <table bgcolor="#000000" border="0" cellspacing="0" cellpadding="2"> <tr> <td><div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/1.png" draggable="true" ondragstart="drag(event)" id="drag1" width="63" height="87"></div></td> <td><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/2.png" draggable="true" ondragstart="drag(event)" id="drag2" width="63" height="87"></div></td> <td><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/3.png" draggable="true" ondragstart="drag(event)" id="drag3" width="63" height="87"></div></td> <td><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/4.png" draggable="true" ondragstart="drag(event)" id="drag4" width="63" height="87"></div></td> <td><div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/5.png" draggable="true" ondragstart="drag(event)" id="drag5" width="63" height="87"></div></td> <td><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/6.png" draggable="true" ondragstart="drag(event)" id="drag6" width="63" height="87"></div></td> <td><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/7.png" draggable="true" ondragstart="drag(event)" id="drag7" width="63" height="87"></div></td> <td><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/8.png" draggable="true" ondragstart="drag(event)" id="drag8" width="63" height="87"></div></td> <td><div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag9" width="63" height="87"></div></td> <td><div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/10.png" draggable="true" ondragstart="drag(event)" id="drag10" width="63" height="87"></div></tr> <td><div height="110"><p><br><p><br><p><br></div></tr> <td><div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/7.png" draggable="true" ondragstart="drag(event)" id="drag11" width="63" height="87"></div></td> <td><div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag12" width="63" height="87"></div></td> <td><div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/5.png" draggable="true" ondragstart="drag(event)" id="drag13" width="63" height="87"></div></td> <td><div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/1.png" draggable="true" ondragstart="drag(event)" id="drag14" width="63" height="87"></div></td> <td><div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/11.png" draggable="true" ondragstart="drag(event)" id="drag15" width="63" height="87"></div></td> <td><div id="div16" ondrop="drop(event)"><img src="i/12.png" draggable="false" ondragstart="drag(event)" id="drag16" width="63" height="87"></div></td> <td><div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/2.png" draggable="true" ondragstart="drag(event)" id="drag17" width="63" height="87"></div></td> <td><div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/9.png" draggable="true" ondragstart="drag(event)" id="drag18" width="63" height="87"></div></td> <td><div id="div19" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/4.png" draggable="true" ondragstart="drag(event)" id="drag19" width="63" height="87"></div></td> <td><div id="div20" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="i/3.png" draggable="true" ondragstart="drag(event)" id="drag20" width="63" height="87"></div></tr> </tr> </table> </center> <p><br> </body> [b]Below is a link to my zip file containing all of my test files and all the images which are not provided in the code listed above[/b] [url]http://www.codingforums.com/attachment.php?s=84390ffec74ed136e3998d2e7116b8de&attachmentid=11206&d=1337873829[/url] Scroll down to the bottom of that page and lookout for attached file: [b]drag_n_drop_2.zip[/b] [b]drag_n_drop_2.zip[/b] is file is the latest version of my project. Enjoy the insanity! [small](Edited by [url=http://www.ozoneasylum.com/user/7746]asylum_seeker[/url] on 06-14-2012 10:22)[/small]
Loading...
Options:
Enable Slimies
Enable Linkwords
« Backwards
—
Onwards »
Maximum Security
OZONE
DHTML/Javascript
Server-Side Scripting - Oh my!
CSS - DOM - XHTML - XML - XSL - XSLT
Stupid Basic HTML
Visual Therapy
Photoshop
Photoshop Pong, Anyone?
***WARNING*** BIG SIG APPROACHING
Photography
3D Modelling & Rendering
Multimedia/Animation
Print Graphics
Holding Pens
Philosophy and other Silliness
Outpatient Counseling
Site reviews!
Mad Scientists' Laboratory
Getting to know the Grail