Jump to content

vmars316

Members
  • Content Count

    368
  • Joined

  • Last visited

Community Reputation

5 Neutral

About vmars316

  • Rank
    Member

Profile Information

  • Location
    Brownsville, Tx

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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 ;}
×
×
  • Create New...