Jump to content

vmars316

Members
 View Profile  See their activity

  • Posts

    480

  • Joined

  • Last visited

 Content Type 

Posts posted by vmars316

    How to select individual column ?

    in HTML/XHTML

    Posted · Edited by vmars316

    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

    How to select individual column ?

    in HTML/XHTML

    Posted · Edited by vmars316
    typo

    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>

     

     

     

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

    in HTML/XHTML

    Posted

    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 .

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

    in HTML/XHTML

    Posted

     

    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

     

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

    in JavaScript

    Posted

    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

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

    in JavaScript

    Posted

    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>

     

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

    in JavaScript

    Posted

    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

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

    in JavaScript

    Posted · Edited by vmars316

    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

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

    in JavaScript

    Posted

    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

     

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

    in JavaScript

    Posted · Edited by vmars316

    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

    Update page dynamically ?

    in JavaScript

    Posted

    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 .

     

    Update page dynamically ?

    in JavaScript

    Posted

    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 

     

     

     

     

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

    in JavaScript

    Posted

    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

     

    Need help with: Unexpected identifier & is not defined

    in HTML/XHTML

    Posted · Edited by vmars316

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

    Need help with: Unexpected identifier & is not defined

    in HTML/XHTML

    Posted

    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

    Thanks Funce and dsonesuk !

    in HTML/XHTML

    Posted · Edited by vmars316
    link

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