Jump to content

vmars316

Members
  • Content Count

    373
  • Joined

  • Last visited

Posts posted by vmars316


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


  2.  

    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

     


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

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

     


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


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


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

     


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

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

     


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


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


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

×
×
  • Create New...