Jump to content

vmars316

Members
  • Content Count

    361
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks; Here is a ' mini-Tutorial: moving text to & from <textarea> & <pre> ' http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html I'll also put code here for safekeeping : <!DOCTYPE html> <html> <head> <!-- https://www.freeformatter.com/html-validator.html http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html --> <title id="titleId"></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="UTF-8"> <style> </style> </head> <body onload="documentURL() , onloadRestoreTextarea()" > <br> <button onclick="saveAs(filename, allHtml)">Save This Page</button> <br><br> <div id="inlineDiv" style="display: inline-block;"> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="sendToConcoleLog ()">sendToConcoleLog</button> <br><br> <textarea id="toConsoleLogId" rows="4" cols="12">:</textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="saveItAll()">Copy this into PRE</button> <br> <textarea class="copyFrom" rows="4" cols="12"></textarea> </div> <div style="border-style: solid; align-text: center; border-width: 1px; display: inline-block;"> <button onclick="restoreItAll()">Restore this from Pre</button> <br> <pre contenteditable="true" class="pasteInto" ></pre> </div> </div> <!-- id="inlineBlock"> --> <div style="border-style: dotted; align-text: center; border-width: 1px;"> <pre> Thought I would make a turorial so I remember what I learned from you all , and to pass on your wisdom. Hope this helps someone :) Try this: ------------------------------------------------------------------------------------------------------------------------ 1) Type something into "Copy this into Pre" textarea box . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" "pre area ' . And "Copy this into Pre" textarea box , is Cleared . Study This : function saveItAll() ------------------------------------------------------------------------------------------------------------------------ 2) The click on "Restore this from Pre" Button , Text is copied from "Restore this from Pre" area into "Copy this into Pre" area . And "Restore this from Pre" area , is Cleared . Study This: function restoreItAll() ------------------------------------------------------------------------------------------------------------------------ 3) Now Type something into "Copy this into Pre" textarea box Again . Then click "Copy this into Pre" Button . Text is copied into "Restore this from Pre" pre area . And "Copy this into Pre" textarea box , is Cleared . But this time , click the "Save This Page" Button . Study This: function saveAs(filename, allHtml) This .html page will be saved in your Browser's download area . Since the "Restore this from Pre" pre area , is coded as contenteditable="true" , the downloaded page will save the "pre area" text as innerHTML . A nifty feature of 'contenteditable' is that upon opening the saved-page the content of "pre area" is now " hardCoded " into page . Study This: function onloadRestoreTextarea() ------------------------------------------------------------------------------------------------------------------------ See code : So in the ' body ' tag we have : "onloadRestoreTextarea()" which runs the " function onloadRestoreTextarea() " code , when page is loaded . Which copies text from "pre area" to " textarea" box . Also at ' body onload="documentURL() ' page load time: The function: function documentURL() is run , which copies ' this .html ' file's address into the ' title ' tag . BTW: for example (see code) and note that : IF you want to copy what’s typed in the box use .value . console.log(toConsoleLogId.value); IF you want what was hardcoded into the text box’s HTML , use .innerHTML . console.log(toConsoleLogId.innerHTML); Hope this helps someone.... http://vmars.us/ShowMe/Tutorial-Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore-RO-VM.html </pre> </div> <script> var copyFromVar = "one"; function saveItAll() { var blankVar = ""; var fromList; // = document.getElementsByClassName("copyFrom"); var intoList; // = document.getElementsByClassName("pasteInto"); fromList = document.getElementsByClassName("copyFrom"); intoList = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromList.length; i++) { copyFromVar = fromList[i].value ; intoList[i].innerHTML = copyFromVar; fromList[i].innerHTML = blankVar; fromList[i].value = blankVar; } }// </script> <script> var copyFromVarTwo = "two"; function restoreItAll() { var blankVar = ""; var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } </script> <script> var copyFromVarOnload = "three"; function onloadRestoreTextarea() { var fromListTwo; // = document.getElementsByClassName("copyFrom"); var intoListTwo; // = document.getElementsByClassName("pasteInto"); var blankVar = ""; intoListTwo = document.getElementsByClassName("copyFrom"); fromListTwo = document.getElementsByClassName("pasteInto"); for (var i = 0; i < fromListTwo.length; i++) { copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; copyFromVarTwo = fromListTwo[i].innerHTML ; intoListTwo[i].value = copyFromVarTwo; fromListTwo[i].innerHTML = blankVar; fromListTwo[i].value = blankVar; } } // reloadTextarea </script> <script> function sendToConcoleLog() { var var01 = toConsoleLogId.value; console.log(var01); // alert(var01); var var01 = toConsoleLogId.innerHTML; console.log("If nothing after : Then no nothing was typed into this textarea => " + var01); alert("If nothing after : Then no nothing was typed into this textarea => " + var01); console.log(toConsoleLogId.value); console.log(toConsoleLogId.innerHTML); /* should be console.log(toConsoleLogId.value); if you want what’s typed in the box, or console.log(toConsoleLogId.innerHTML); if you want what was hardcoded into the text box’s HTML. */ } </script> <script> var filename = ""; function documentURL() { document_URL = document.URL; document.getElementById("titleId").innerHTML = document_URL; } </script> <script> var filename = "Textarea-Save-CopyTo-RestoreFrom-onLoad-Restore.html"; var allHtml = document.documentElement.outerHTML; function saveAs(filename, allHtml) { allHtml = document.documentElement.outerHTML; var blob = new Blob([allHtml], {type: 'text/csv'}); if(window.navigator.msSaveOrOpenBlob) { window.navigator.msSaveBlob(blob, filename); } else{ var elem = window.document.createElement('a'); elem.href = window.URL.createObjectURL(blob); elem.download = filename; document.body.appendChild(elem); elem.click(); document.body.removeChild(elem); } } </script> </body> </html>
  2. Oops yes , the first console.log() works , then no more . I am running chrome . Is there a way to turn on/off console in all browsers ? I am guessing it's always running . Thanks
  3. Oops... The 1st and 2nd alert()s both work but no console.log()s work . And no errors show up on the console . Run code from here: http://vmars.us/ShowMe/changeImage-Drag-Create-Restore.html Thanks
  4. Thanks Ingolme dragElement(MyNewDiv); Works great . I have another problem , same program: in here: <script> var copyFromVar = "one"; function saveItAll() { alert("Hello from function saveItAll()"); console.log("Hello from function saveItAll()"); var blankVar = ""; var fromList = document.getElementsByClassName("copyFrom"); var intoList = document.getElementsByClassName("pasteInto"); alert("fromList.length = " + fromList.length); for (var i = 0; i < fromList.length; i++) { alert("for (var i = 0; i < fromList.length; i++)"); console.log("fromList.length = " + fromList.length); copyFromVar = fromList[i].value ; console.log("copyFromVar = " + copyFromVar); intoList[i].innerHTML = copyFromVar; console.log("intoList[i].innerHTML = " + intoList[i].innerHTML); } } // </script> None of the console.log() statements work . And the second alert() doesn't work . Any idea why nothing works beyond the 1st alert() ? Thanks I'll Post the whole code if you wish .
  5. Hello & Thanks; I am making great progress on my project , thanks to you folks . But I do still have a problem with 'createElement' and 'appendChild' . They work fine but when I try to Drag the 'newly created div' it doesn't drag . If I saveAs the page and open the saved page , The created 'div' Drag works fine . So it seems that something is not getting updated dynamically . Pls , why does this happen , and how to fix it ? Run page here: http://vmars.us/ShowMe/changeImage-WIP-Try-Drag-Create.html Thanks
  6. Ah yes , I see , <script> should be placed just before </body> Thanks
  7. Hello & Thanks , Can't seem to get this going : targetBg.setAttribute('src', wholeUrl); <!DOCTYPE html> <html> <head> <title></title> </head> <style> body { font-family: Comic Sans MS; /* background-repeat: no-repeat ; background-size: cover ; backgroundImage: url(http://vmars.us/ShowMe/background-image-01-Ratio-600x476.jpg) ; */ } /* #spanBg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } */ /* #spanImg #spanBg{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; } /* #spanBg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; } */ #spanBg { border-style: solid ; top: 0px; width: 100% ; height: 100% ; align-text: center ; } #spanImg { width: 1000px ; // window.outerWidth ; // height: 800px ; // window.outerHeight ; // src: "http://vmars.us/ShowMe/background-image-01.jpg" ; } */ #bottomDiv { border-style: solid ; border-width: 1px; position: absolute; bottom: 0px; left: 10px; } .buttonPos { width: 140px; top: 400px ; } #divId{ text-align: center ; } </style> <script> var widthChange ; var Change ; var heightChange ; var repeatChange ; var sizeChange ; var positionChange ; var targetBg = document.getElementById("spanDiv"); function changeBackground() { widthChange = width.value; heightChange = height.value; sizeChange = size.value; // if (heightChange !== "") { alert("heightChange = " + heightChange ) ; // targetBg.style.backgroundImage = heightChange ;} ; if (sizeChange !== "") { alert("sizeChange = " + sizeChange ) ; targetBg.style.backgroundSize = sizeChange ;} ; } </script> <script> var imageCount = 1 ; var targetBg = document.getElementById("spanImg"); var bgImgUrl = "http://vmars.us/ShowMe/background-image-0" ; var bgExt = ".jpg" ; var wholeUrl ; function changeImage() { imageCount = ((imageCount % 5)+1) wholeUrl = bgImgUrl + imageCount + bgExt ; // targetBg.style.src = wholeUrl ; // doesn't work // document.getElementById("spanImg").style.src = wholeUrl ; alert("targetBg = " + targetBg) ; targetBg.setAttribute('src', wholeUrl); alert("wholeUrl = " + wholeUrl) ; var checkSrc = document.getElementById("spanImg").style.src ; alert("Img src = " + checkSrc) ; }</script> <body id="bodyId" > <!-- background = "background-image-01.jpg"> --> <!-- onload="resizeImage()" <span id="spanBg"; > --> <span id="spanBg"; > <img id="spanImg" onclick="changeImage()" src="http://vmars.us/ShowMe/background-image-01.jpg" alt="background-image" width="800px" > <center> <input type="button" class="buttonPos" onclick="changeImage()" value="Change Image"> </center> </span> <!-- id="spanBg"; --> <!-- <script> var bodyWidth ; var bodyHeight ; var imageWidth ; var imageHeight ; var img ; window.addEventListener("resize", resizeImage()); function resizeImage() { // alert("function resizeImage() {") var targetBody = document.getElementById("spanDiv"); // alert(targetBody) ; bodyWidth = window.outerWidth ; //alert("bodyWidth = " + bodyWidth + " window.outerWidth = " + window.outerWidth ) ; bodyHeight = window.outerHeight ; targetBody.setAttribute("width" , bodyWidth ) ; targetBody.setAttribute("height" , bodyHeight ) ; targetBody.setAttribute("background.img.width" , bodyWidth ) ; targetBody.setAttribute("background.img.height" , bodyHeight ) ; // alert( 'bodyWidth = ' + bodyWidth + " bodyHeight = " + bodyHeight) ; } </script> --> </body> </html> Thanks
  8. Thanks , Yes there is : function changeImage() { That's what confounds me Sorry I forgot to post code: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h5>Changing Image</h5> <img src="background-image-01.jpg" id="myImage" /> <br> <input type="button" onclick="changeImage()" value="Change Image"> <script language="javascript"> var imageCount = 0 ; var nextImage = "" ; function changeImage() { imageCount = imageCount + 1 ; elem = document.getElementById("myImage"); if imageCount = 1 { nextImage = "background-image-02.jpg" ; elem.src = nextImage ;} if imageCount = 2 { nextImage = "background-image-03.jpg" ; elem.src = nextImage ;} if imageCount = 3 { nextImage = "background-image-04.jpg" ; elem.src = nextImage ;} if imageCount = 4 { nextImage = "background-image-01.jpg" ; elem.src = nextImage ;} if imageCount = 4 { imageCount = 0;} } </script> <!-- <script> var imageCount = 0 ; function changeImage() { var image = document.getElementById('myImage'); imageCount = imageCount + 1 ; if imageCount = 1 {image.src("background-image-02.jpg")} if imageCount = 2 {image.src("background-image-03.jpg")} if imageCount = 3 {image.src("background-image-04.jpg")} if imageCount = 4 {image.src("background-image-01.jpg")} if imgCount = 4 { imageCount = 0} } </script> --> <p><strong>Note:</strong> Click on the "Change Image" button to changeImage</p> </body> </html> Oops , turns out I forgot the () around " if imageCount = 1 { }" should be : if (imageCount = 1) { nextImage = "background-image-02.jpg" ; elem.src = nextImage ;}
  9. 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
  10. 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
  11. Aha , Thanks dsonesuk : "colour" are you perhaps British ?
  12. 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
  13. Thanks dsonesuk ; Got rid of // . Still probs with " width, height, left, top " see: https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589 Thanks
  14. 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>
  15. 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
  16. 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
  17. 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
  18. 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 !
  19. 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>
  20. <!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
  21. 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
  22. Ok , I see what you mean , and I am reading up on indexes and arrays . Thanks
  23. 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
  24. I would like to delete this post and I'll start afresh . Thanks
×
×
  • Create New...