vmars316

April 28, 2020

Hello & Thanks ;

In this example

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_grid-gap2

The "background-color: #2196F3;" is specified .

But where did the <div> background color come from ?

Thanks

April 28, 2020

25 minutes ago, dsonesuk said:

Its called being responsive, if the width of device is to to small to accommodate two column layout set column widths to 100% so they stack above each other.

But I don't want them to stack .

I am trying to prevent that .

April 28, 2020

Hello & Thanks ;

Here is my example code

http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

Happily , I can select copy paste each column .

But I have a problem when I resize browser window horizontally and make it smaller .

Column 2 gets relocated under column 1 .

What is the name of that behavior (that I want to stop) , so that I can research it .

I want to keep cols parallel (not stacked) , if column 2 gets partially hidden , during resizing , that's ok , that's what I am after .

Thanks

April 26, 2020

Thanks

Things are looking better

http://vmars.us/reads/vmTemplate-2Parallel-Tables-P-Editable-BEST.html

I can select copy paste each column .

But I still have a problem when I resize browser window horizontally and make it smaller .

Column 2 gets relocated under column 1 .

I don't remember , what is the name of that behavior (that I want to stop) .

I want to keep cols horz , if column 2 gets partially hidden , that's ok .

Thanks

April 25, 2020

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>

March 6, 2020

Quote

The best I can find it a method which allows you to do a search using Javascript: https://developer.mozilla.org/en-US/docs/Web/API/Window/find

Thanks , I'll tinker with it .

Quote

I draw my avatars myself. My old one was a videogame character, but I want to be more original so the new one is my own character.

Just as I thunk .

March 3, 2020

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 .

March 3, 2020

Thanks Ingolme

Sorry to hear that .

I see you changed your avatar .

I miss the old one .

Do you draw these yourself ?

Thanks

March 2, 2020

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

March 2, 2020

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

September 23, 2019

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>

September 23, 2019

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>

September 23, 2019

https://unminify.com/

September 23, 2019

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

September 23, 2019

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

September 22, 2019

Ok ,I'll give it a shot...

September 22, 2019

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

September 6, 2019

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>

September 5, 2019

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

September 5, 2019

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

September 4, 2019

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 .

September 4, 2019

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

September 1, 2019

Ah yes , I see , <script> should be placed just before </body>

Thanks

August 31, 2019

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

August 27, 2019

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

Sign In

vmars316

Content Count

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Posts posted by vmars316

Need help with w3schools css grid example .

Resizing browser window horz causes Table problem ?

Resizing browser window horz causes Table problem ?

How to select individual column ?

How to select individual column ?

How to capture Cntrl/F (this) highlights from browser area ?

How can I specify width/height <video controls > ?

How to capture Cntrl/F (this) highlights from browser area ?

How to capture Cntrl/F (this) highlights from browser area ?

How can I specify width/height <video controls > ?

'window.print();' print text as .pdf ?

'window.print();' print text as .pdf ?

Problems populating fields and clicking on login button

'window.print();' print text as .pdf ?

'window.print();' print text as .pdf ?

'window.print();' print text as .pdf ?

'window.print();' print text as .pdf ?

mini-Tutorial: moving text to & from <textarea> & <pre>

Update page dynamically ?

Update page dynamically ?

Update page dynamically ?

Update page dynamically ?

Need Help targetBg.setAttribute('src', wholeUrl); ?

Need Help targetBg.setAttribute('src', wholeUrl); ?

Need help with: Unexpected identifier & is not defined

Browse

Activity