Jump to content

vmars316

Members
  • Content Count

    368
  • Joined

  • Last visited

Everything posted by vmars316

  1. Ah , at last , it works: Ok Funce , I finally see what you meant . Thanks All . <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>FreshDraft.StrippedDown></title> <style> @media print { .pageBreak{ page-break-after: always; } } </style> </head> <body id="bodyId" > <div> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">textarea 1 line 1 textarea 1 line 2 </textarea> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">textarea 2 line 1 textarea 2 line 2 </textarea> <br> <pre class="pageBreak">.</pre> <pre class="pageBreak">.</pre> </div> <br> <div> <br> <button id="printThisBtn" onclick="printAllThis()" style="display: block">Print This</button> </div> <script> var copyFrom = document.getElementsByClassName("copyFrom"); var pageBreak = document.getElementsByClassName("pageBreak"); var printThisBtn = document.querySelector("#printThisBtn"); function printAllThis() { collectedTextareas = ""; for (var i = 0; i < copyFrom.length; i++) { pageBreak[i].innerHTML = copyFrom[i].value ; } for (var i = 0; i < copyFrom.length; i++) { copyFrom[i].style.display = "none"; } printThisBtn.style.display = "none"; window.print(); console.log("window.printing"); for (var i = 0; i < copyFrom.length; i++) { copyFrom[i].style.display = "block"; } printThisBtn.style.display = "block"; } </script> </body></html>
  2. Thanks; Corrected , but still no go: <script> var printBox = document.querySelector('#printBox'); var collectedTextareas ; function printAllThis() { collectedTextareas = ""; copyFrom = document.getElementsByClassName("copyFrom"); for (var i = 0; i < copyFrom.length; i++) { collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; } printBox.style.border = "none"; printBox.innerHTML = collectedTextareas ; window.print(); console.log("window.printing"); printBox.style.border = "solid"; } </script>
  3. I got rid of the Border around printBox , but still no multiple pages: https://www.w3schools.com/code/tryit.asp?filename=G80SDRE1RQ1M <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>FreshDraft.StrippedDown></title> <!-- https://www.freeformatter.com/html-validator.html The saveAs Button , saves only html , no Links to images , no images ! The Browser more 'Tools / savepage as' option saves Links to images . http://vmars.us/ShowMe/ShortStory-Color-VM.html http://thiscouldbebetter.neocities.org/texteditor.html https://www.w3schools.com/code/tryit.asp?filename=G80SDRE1RQ1M --> <style> @media print { .copyFrom { page-break-after: always; } } @media print { #pageBreak{ page-break-after: always; } } @media print { #printBox{ page-break-after: always; } } </style> </head> <body id="bodyId" > <div> <br> <pre id="printBox"style="border-style: solid;">printBox</pre> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">This is textarea 1 line 1 textarea 1 line 2 </textarea> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">textarea 2 line 1 textarea 2 line 2 </textarea> <br> <pre id="pageBreak" style="border-style: dotted;">pre pageBreak area line 1 pre pageBreak area line 2 </pre> </div> <br> <div> <br> <button id="printThis" onclick="printAllThis()" >Print This</button> <button id="cancelPrint" onclick="cancelAllPrint()" >Cancel</button> </div> <script> var printBox = document.querySelector('#printBox'); var collectedTextareas ; function printAllThis() { copyFrom = document.getElementsByClassName("copyFrom"); for (var i = 0; i < copyFrom.length; i++) { collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; } printBox.style.border = "none"; printBox.innerHTML = collectedTextareas ; window.print(); console.log("window.printing"); printBox.style.border = "solid"; } </script> <script> function cancelAllPrint() { console.log("Nuttin to cancel !"); } </script> </body></html> Thanks
  4. Hmm... Cant seem to get this puppy going , need help . <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta charset="utf-8" /> <title>FreshDraft.StrippedDown></title> <!-- https://www.freeformatter.com/html-validator.html The saveAs Button , saves only html , no Links to images , no images ! The Browser more 'Tools / savepage as' option saves Links to images . http://vmars.us/ShowMe/ShortStory-Color-VM.html http://thiscouldbebetter.neocities.org/texteditor.html https://www.w3schools.com/code/tryit.asp?filename=G807IALLC2Y6 --> <style> @media print { .copyFrom { page-break-after: always; } } @media print { #pageBreak{ page-break-after: always; } } @media print { #printBox{ page-break-after: always; } } </style> </head> <body id="bodyId" > <div> <br> <pre id="printBox"style="border-style: solid;">printBox</pre> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">This is textarea 1 textarea 1 line 2 </textarea> <br> <textarea class="copyFrom" spellcheck="false" rows="4" cols="12">textarea 2 line 1 textarea 2 line 2 </textarea> <br> <pre id="pageBreak" style="border-style: dotted;">pre pageBreak area line 1 pre pageBreak area line 2 </pre> </div> <br> <div> <br> <button id="printThis" onclick="printAllThis()" >Print This</button> <button id="cancelPrint" onclick="cancelAllPrint()" >Cancel</button> </div> <script> var printBox = document.querySelector('#printBox'); var collectedTextareas ; function printAllThis() { copyFrom = document.getElementsByClassName("copyFrom"); for (var i = 0; i < copyFrom.length; i++) { collectedTextareas = collectedTextareas + copyFrom[i].value + pageBreak.innerHTML; } printBox.innerHTML = collectedTextareas ; window.print(); console.log("window.printing"); } </script> <script> function cancelAllPrint() { return; } </script> </body></html> https://www.w3schools.com/code/tryit.asp?filename=G807IALLC2Y6 Thanks
  5. Hello & Thanks: I have several <textarea> s and I am using 'window.print();' to print them out as .pdf . So I dump them all into a <pre> area . Problem is , I want to print each as a 'new page' . In '.txt' files I can use a character sequence 'CRLF' to force a 'new line' . ? Is there a character sequence I can insert into <pre> to force a 'new page' for 'window.print();' ? That would surely make things a lot easier Thanks
  6. 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>
  7. 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
  8. 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
  9. 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 .
  10. 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
  11. Ah yes , I see , <script> should be placed just before </body> Thanks
  12. 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
  13. 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 ;}
  14. 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
  15. 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
  16. Aha , Thanks dsonesuk : "colour" are you perhaps British ?
  17. 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
  18. Thanks dsonesuk ; Got rid of // . Still probs with " width, height, left, top " see: https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589 Thanks
  19. 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>
  20. 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
  21. 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
  22. 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
×
×
  • Create New...