Jump to content

vmars316

Members
  • Content Count

    401
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks : 1) How can I create parallel tables (ie. side by side) . 2) How can I select 1 column in a table (or table like structure) . 3) And I want Tables to be width-20% and width=80% respectively . 4) Also he rows need to line up . Because eventually the borders will be eliminatad . I am doing that here with fake Tables: http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable.html (It is contenteditable so you can see what I mean) But the problem comes in when I enter text that overflows , the tables get stacked on top of each other . Thanks <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>2Parallel-Tables-P-Editable.html</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> body { font-family: "Tahoma", Times, serif; font-size: 14px; } .Table { border-style: solid; text-align: center; border-color: #282A36; border-width: 2px; padding: 24px; */ } .Title { text-align: center; } .Heading { font-weight: bold; text-align: center; } .Row { border-style: solid solid solid solid; border-width: 2px; border-color: #D9B04E; } .Cell { text-align: left; vertical-align: middle; display: inline-block; padding-left: 5px; padding-right: 5px; border-style: solid solid solid solid; border-width: 1px; border-color: #D9B04E; } .StackCell {} .StackRow {} .button { background-color: #282A36; border: none; color: #C8982B; color: #D9B04E; text-align: center; text-decoration: none; display: inline-block; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; font-family: "Comic Sans MS", cursive, sans-serif; font-size: 24px; cursor: pointer; } span.RedTxt { color: red; } </style> </head> <body style="background-color:#EbE8E4; font-family: Tahoma; font-size:18px; color:black;"> <br> <div class="Table"> <div class="Title"> <p> <button class="button">Main Table</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> <div class="Table"> <div class="Title"> <p> <button class="button">TABLE 1</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 1 row1 col1 </p> <br> </div> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 1 row2 col1 </p> <br> </div> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <!-- ---------------------NewCell------------------ --> <div class="Cell"> <p style="text-align:center;"> <div class="Table"> <div class="Title"> <p> <button class="button">TABLE 2</button> <br> </p> </div> <!-- <div class="Title"> --> <p></p> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 2 row1 col1 </p> <br> </div> </div> <!-- <div class="Row" --> <!-- ============NewRow============== --> <p></p> <div class="Row"> <p></p> <!-- ---------------------NewCell-----------DancingMan - mp4 ------- --> <div class="Cell"> <p contenteditable="true" style="text-align:center;"> TABLE 2 row2 col1 </p> <br> </div> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> </p> </p> <br> </div> <!-- ---------------------End of Cell------------------ --> <br> </div> <!-- <div class="Row" --> </div> <!-- div class="Table"> --> <div> <p style="text-align:center;"> <span style="font-size: 14pt; font-family: &quot;Avenir Next&quot;;"> <br><br> <a href="http://vmars.us/"> http://vmars.us/ </a> </span> <br> <br>"All things in moderation , except for love and forgiveness" <br> </p> </div> </body></html>
  2. Thanks , I'll tinker with it . Just as I thunk .
  3. Ah yes , <style type="text/css"> #video1{ object-fit: initial; width: 800px; height: 600px; } </style> Works great ! THANKS PS: Here's what I am working on: http://vmars.us/freeware/HtmlCodeAssist/Html-Color-Names-Tutorial.html A friend asked me to help with an Acrobat prob : There is apparently no pdf-editor 'known to mankind' that can convert 'highlighted .pdf TEXT' into 'highlighted .html TEXT' , properly . Most turn text into images . Anyways , my little program HtmlCodeAssist.exe makes that task easier . As Always , Thanks for your help .
  4. Thanks Ingolme Sorry to hear that . I see you changed your avatar . I miss the old one . Do you draw these yourself ? Thanks
  5. Hello & Thanks ; When I issue Cntrl/F (this) in browser , the browser highlights all "this" occurences . If I saveas the webpage , all that highlighting is gone . How do I gain access to the area where this page is highlighted . Hopefully , I can capture the highlighted page . Thanks
  6. Hello & Thanks ; <video controls > <source src="./Html-Color-Names-Tutorial-Files/Html-Color-Names-Tutorial.html.mp4" type="video/mp4"> <source src="../Html-Color-Names-Tutorial-Files/Html-Color-Names-Tutorial.html.ogg" type="video/ogg"> Your browser does not support the video tag. </video> This video is so wide that I can not see it all without moving bottom bar . How can I specify width/height ? I see no such option in video controls . Thanks
  7. 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>
  8. 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>
  9. 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
  10. 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
  11. 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
  12. 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>
  13. 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
  14. 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
  15. 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 .
  16. 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
  17. Ah yes , I see , <script> should be placed just before </body> Thanks
  18. 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
  19. 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 ;}
  20. 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
  21. 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
  22. Aha , Thanks dsonesuk : "colour" are you perhaps British ?
  23. 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
×
×
  • Create New...