Jump to content

vmars316

Members
  • Content Count

    368
  • Joined

  • Last visited

Posts 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>

     

    • Like 1

  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>

     

    • Like 1

  7. 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 .

     


  8. 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 

     

     

     

     


  9. 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

     


  10. 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 ;} 


  11. 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


  12. 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


  13. 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>
    	


  14. 17 minutes ago, dsonesuk said:

    You are passing the identity of the specific elements to process along with the function called to do the processing. The for loop curly braces start and finish  after the first if conditioning and any code with [ i ] should be within those braces.

    Plz , what question are you responding to ?

    Thanks


  15. 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...