Jump to content

vmars316

Members
  • Posts

    431
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks: "Uncaught SyntaxError: Unexpected identifier" for : if imageCount = 1 { nextImage = "background-image-02.jpg" ; elem.src = nextImage ;} ? I tried various combinations including "elem.src.value" but no go ? Need help . And "Uncaught ReferenceError: changeImage is not defined at HTMLInputElement.onclick " for : <input type="button" onclick="changeImage()" value="Change Image"> I don't get how " changeImage is not defined " ? Need help . Thanks
  2. Thanks Funce and dsonesuk ; Just wanted you to know that I greatly appreciate you expert help on my project . I am working on an authoring tool , see here: http://vmars.us/w3schools-Examples/ShortStory-WheatFields-VanGogh-SCRIPT.htmlAlmost done ; just have to figure out how to : 1) duplicate this structure onButtonClick : <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> Clone causes probs (with contenteditable) upon re-opening page after a save-webpage-complete . 2) Currently this doesn't display the whole image correctly : body { font-family: Comic Sans MS; background: url(WheatFields-VanGogh.jpg) ; background-repeat: no-repeat; background-size: 100% , 100% ; } Then I think I am finished In the mean time I'll probably be back for help . Thanks again
  3. Aha , Thanks dsonesuk : "colour" are you perhaps British ?
  4. Thanks , Oops! Forgot that one The prob that remains is: why does css borders for "myDiv" work fine but the borders for body and div .container do not work ? Thanks https://www.w3schools.com/code/tryit.asp?filename=G7CDQO1VLUTQ Thanks
  5. Thanks dsonesuk ; Got rid of // . Still probs with " width, height, left, top " see: https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589 Thanks
  6. Hello & Thanks: I can't seem to get "css border, margin, display" working . Would like all 4 of the "myDiv" to show side by side . Pls, what am I doing wrong ? Thanks <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> body { font-family: Comic Sans MS; background: #D3DDEB; // #bcce98 ; border-style: 12px solid navy; margin: 8px; } #container { border-style: 12px solid navy; } .mydiv { position: absolute; display: inline-block; left: 10px; z-index: 9; background-color: lightgrey; // #495C87; // #e9f2d7 ; text-align: center; border-style: solid ; border-width: 1px; border-color: #D9B04E ; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #495C87; // darkgreen ; color: #fff; font-size: 12px; } textarea { background-color: #F1F1F1; // #D3DDEB; // #e9f2d7 ; color: black ; } #myPreDiv { position: absolute; top:350px; // display: inline-block; } .pasteInto{ // display: none; border: dotted ; } h5 { text-align: center: } #currentPage_Address { background: #495C87; // #839C4B ; // #808080 ; // #2196F3 ; // #4DABF5; // #B6DDFB ; // #BBD1E3 ; // #CCDCEA ; // #CBE6FC; // #BCCE98; font-size: 1px; color: #D9B04E ; // white ; // #FFFFF ; // #808693; } </style> </head> <body > <div id="currentPage_Address" style="text-align: center; ">myStory.html</div> <br> <button>Save This Page</button> <button>Copy into PRE</button> <button>Copy Back into textarea</button> <br><br> <div class="container" > <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> <div class="mydiv" > <div class="mydivheader"></div> <textarea class="copyFrom" rows="4" cols="12"> </textarea> </div> </div> <!-- #container --> <div id="myPreDiv" > <pre contenteditable="true" class="pasteInto" >1</pre> <pre contenteditable="true" class="pasteInto" >2</pre> <pre contenteditable="true" class="pasteInto" >3</pre> <pre contenteditable="true" class="pasteInto" >4</pre> </div> </body> </html>
  7. Thank you Funce ! I will study this until I understand every 'jot and tittle' . You moved me to start a Folder for w3schools-Examples . http://vmars.us/w3schools-Examples/Draggable-Div-Elements-w3Schools-FUNCE.html Thanks again
  8. OK Funce : I have poor eysite , and a learning disability , so let me absorb this , it may take a while . I have to see example first and work backwards , I realize it makes more work for you folks , and I apologize for that . so yes , an explanation would tremendously useful : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable Thanks
  9. Here's what have so far BUT I am still getting an error: " Uncaught TypeError: Cannot set property 'onmousedown' of undefined " Pls, what am I doing wrong //Make the DIV element draggagle: //dragElement(document.getElementsByClassName("mydiv")); dragElement(document.querySelectorAll("p")); var elmnt ; var i; function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; for (i = 0; i < elmnt.length; i++) { if (this.elmnt) { break; } } elmnt[i] = document.getElementsByClassName("mydivheader"); { /* if present, the header is where you move the DIV from:*/ elmnt[i].onmousedown = dragMouseDown; // ERROR HERE } // else { // /* otherwise, move the DIV from anywhere inside the DIV:*/ // elmnt[i].onmousedown = dragMouseDown; // } } Yes , dsonesuk and Funce : I will do everything you say : But AGAIN I ASK : What is the purpose of these two statements : dragElement(document.getElementsByClassName("mydiv")); dragElement(document.querySelectorAll("p")); AND what is that purpose called (It must have a name (Then I can study up on it .))? AND what are these statements doing ? HOW do they relate to " function dragElement(elmnt) {} " AND why is this method ok : " dragElement(document.getElementById("mydiv")); " but this is not , and how could I code it so it is useable ? : " dragElement(document.getElementsByClassName("mydiv")); " Thanks
  10. I think I understand what you are saying : "document.getElementsByClassName()" returns a nodeList . " So I need to parse that list , but for "document.getElementsByClassName()" returns a nodeList . " ( I get error: " Uncaught TypeError: elmnt.getElementsByClassName is not a function " . ) Once I solve that , then I can proceed with this following question about " function dragElement(elmnt) " ( So if " elmnt " is that nodeList , What does it look like ? Does it show two "mydiv" ? If so then how do I determine which "mydiv" was clicked ? ) //Make the DIV element draggagle: dragElement(document.getElementsByClassName("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (elmnt.getElementsByClassName("mydivheader")[0]) { /* if present, the header is where you move the DIV from:*/ elmnt.getElementsByClassName("mydivheader")[mydiv].onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } } Thanks for sticking with me !
  11. Thanks Funce Sorry , I am confused where things should go: <!DOCTYPE html> <html> <style> .mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: var elmnt = 0; var mydiv; // dragElement(mydiv[elmnt]); function dragElement(elmnt) { dragElement(mydiv[elmnt]); //for (var elmnt = elmnt; elmnt < mydivs.length; elmnt++) { // dragElement(mydiv[elmnt]); // } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.ClassName + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html>
  12. <!DOCTYPE html> <html> <style> .mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { for (var elmnt = 0; elmnt < mydivs.length; elmnt++) { dragElement(mydiv[elmnt]); } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.class + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Thanks Funce I must have something in the wrong place 'cause I am getting error: Uncaught TypeError: document.getElementByClassName is not a function <!DOCTYPE html> <html> <style> .mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { for (var elmnt = 0; elmnt < mydivs.length; elmnt++) { dragElement(mydiv[elmnt]); } var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.class + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.class + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Thanks
  13. Thanks Funce: Is this what you mean ? Code below . <!DOCTYPE html> <html> <style> .mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h5>HelpMeDoThis-Multi-Draggable-ID-Element-w3Schools-FUNCE.html</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div> <div class="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (elmnt.getElementsByClassName("mydivheader")[0]) { /* if present, the header is where you move the DIV from:*/ elmnt.getElementsByClassName("mydivheader")[0].onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> 'mydivheader' has lost its color and won't drag anymore . Thanks
  14. Ok , I see what you mean , and I am reading up on indexes and arrays . Thanks
  15. Hello & Thanks , I would like to take w3schools code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable And replace the <p>Move</p> <p>this</p> <p>DIV</p> with multiple "textareas" : <textarea class="textArea" rows="4" cols="20"> </textarea> As I do here: https://www.w3schools.com/code/tryit.asp?filename=G6WWH7C8BR89 (Please note the behavior of <trextarea> , how you can Drag the textarea from the right bottom corner and resize the whole 'mydiv' . ) And then then I want to add multiple "mydiv" structures: <div id="mydiv"> <div id="mydivheader">Click here to move</div> <textarea class="textArea" rows="4" cols="20"> </textarea> </div> So that I can drag them around . Please show me how to modify the code to make it do this . Thank you very much ! Also , dragElement(document.getElementById("mydiv")); what exactly is being put into dragElement ? A reference to "mydiv" or "mydivheader" ? How does dragElement know to only Drag "mydivheader" and not <textarea> . _______________________ I like this code very much , but it doesn't work with the < textarea> structure . https://www.w3schools.com/code/tryit.asp?filename=G6WXCFPNLL4E
  16. I would like to delete this post and I'll start afresh . Thanks
  17. Sorry the editor is deleting my stuff . I'll start again : Thanks; Actually, the code should show multiple : <div class="container"> <div class="item" contenteditable="true"> This is content. </div> </div> <!-- class="container" --> Ingolme: It means that document.querySelector("container"); is not returning an element. You forgot to use a class selector "." to select the element by its class attribute. vm: I don't understand; isn't ("container") the class ? Ingolme: For the second error, document.getElementsByClassName("container"); returns a collection of elements, not a single element. You have to select one of the elements in that collection. vm: Do you mean this sort of thing ?: var x = document.querySelectorAll(".mydiv"); var i; for (i = 0; i < x.length; i++) { ........... ; } Where would I put this code?: After this statement?: function dragStart(e){ Thanks
  18. Thanks; Actually, the code should show multiple : <div class="container"><div class="item" contenteditable="true"> This is content.</div></div> <!-- class="container" -->
  19. Hello & Thanks : I am getting 2 Uncaught errors (see code below): Here: container.addEventListener("touchstart", dragStart, false); And here: var clone = elmnt.cloneNode(true); Uncaught Drag-ContainerClass-CloneNode-Forum.html:73 TypeError: Cannot read property 'addEventListener' of null at Drag-ContainerClass-CloneNode-Forum.html:73 2 Uncaught Drag-ContainerClass-CloneNode-Forum.html:62 TypeError: elmnt.cloneNode is not a function at cloneByClassName (Drag-ContainerClass-CloneNode-Forum.html:62) at HTMLButtonElement.onclick (Drag-ContainerClass-CloneNode-Forum.html:57) Plz, what am I doing wrong ? Thanks <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Drag-ContainerClass-CloneNode-Forum.html</title> <style> body { margin: 20px; } .container { width: 400px; height: 400px; background-color: #DAE9BC; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 7px; touch-action: none; } .item { border-style: solid; border-width: 6px; touch-action: none; user-select: none; position: relative; width: 100px; height: 100px; background-color: #F3F8EA; border-color: #006400; top: 0px; left: 0px; } .item:active { opacity: .75; } .item:hover { cursor: pointer; } h1 { margin-bottom: 10px; } </style> </head> <body> <h5>Drag-ContainerClass-CloneNode-Forum.html</h5> <div class="container"> <div class="item" contenteditable="true"> This is content. </div> </div> <!-- class="container" --> <br> <button onclick="cloneByClassName()">cloneByClassName</button> <br> <script> function cloneByClassName() { var elmnt = document.getElementsByClassName("container"); var clone = elmnt.cloneNode(true); document.body.appendChild(clone); } </script> <script> var container = document.querySelector("container"); var activeItem = null; var active = false; container.addEventListener("touchstart", dragStart, false); container.addEventListener("touchend", dragEnd, false); container.addEventListener("touchmove", drag, false); container.addEventListener("mousedown", dragStart, false); container.addEventListener("mouseup", dragEnd, false); container.addEventListener("mousemove", drag, false); function dragStart(e) { if (e.target !== e.currentTarget) { active = true; // this is the item we are interacting with activeItem = e.target; if (activeItem !== null) { if (!activeItem.xOffset) { activeItem.xOffset = 0; } if (!activeItem.yOffset) { activeItem.yOffset = 0; } if (e.type === "touchstart") { activeItem.initialX = e.touches[0].clientX - activeItem.xOffset; activeItem.initialY = e.touches[0].clientY - activeItem.yOffset; } else { console.log("doing something!"); activeItem.initialX = e.clientX - activeItem.xOffset; activeItem.initialY = e.clientY - activeItem.yOffset; } } } } function dragEnd(e) { if (activeItem !== null) { activeItem.initialX = activeItem.currentX; activeItem.initialY = activeItem.currentY; } active = false; activeItem = null; } function drag(e) { if (active) { if (e.type === "touchmove") { e.preventDefault(); activeItem.currentX = e.touches[0].clientX - activeItem.initialX; activeItem.currentY = e.touches[0].clientY - activeItem.initialY; } else { activeItem.currentX = e.clientX - activeItem.initialX; activeItem.currentY = e.clientY - activeItem.initialY; } activeItem.xOffset = activeItem.currentX; activeItem.yOffset = activeItem.currentY; setTranslate(activeItem.currentX, activeItem.currentY, activeItem); } } function setTranslate(xPos, yPos, el) { el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)"; } </script> </body> </html>
  20. Great , but how can I capture that information ? I was hoping to avoid problems by setting a dual definition of 'id=' and 'class=' : .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div>
  21. Hello & Thanks : In code below , how do I tell " dragElement(document.getElementByClassName("myDivClass")); " which clone was clicked on ? <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivHdr { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div> <div contenteditable="true">Type here: </div> </div> <p>Click the button to copy the myDivClass element above, <br>including all its attributes and child elements, and append it to the document.</p> <button onclick="cloneFunction()">Try it</button> <script> function cloneFunction() { var elmnt = document.getElementsByClassName("myDivClass")[0]; var cln = elmnt.cloneNode(true); document.body.appendChild(cln); } </script> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("myDivClass")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "Hdr")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "Hdr").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Thanks
  22. Ugh (embarrassed) ! But happy that I can use 'textrea' as I had hoped . Thanks again dsonesuk
  23. Hello & Thanks for your Help : When <textarea> is enabled , it cancels drag element movement . <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h5>Draggable DIV Element</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } } </script> </body> </html> Can anyone show me how to fix it ? Thanks
×
×
  • Create New...