Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Posts posted by vmars316

  1. Hello & Thanks ;

    Please , What's the diff between these two codes ,
    other than the fact that 'my attempt' doesn't work :

    ================
    from w3Schools:

    	<!DOCTYPE html>
    <html>
    <head>
    <style>
    div {
      background-color: yellow;
      padding: 20px;
      display: none;
    }
      
    span:hover + div {
      display: block;
    }
    </style>
    </head>
    <body>
    	<span>Hover over me!</span>
    <div>I will show on hover</div>
    	</body>
    </html>
    	 

    my attempt :

     
    	<!DOCTYPE html>
    <html>
    <head>
    <style>
    p.borderShow1 {
      background-color: yellow;
      padding: 20px;
      display: none;
    }
      
    div :hover + p.borderShow1{
      display: block;
    }
    </style>
    </head>
    <body>
    	<div>Hover over me!</div>
    <p class="borderShow1">I will show on hover</p>
    	</body>
    </html>
    	
  2. Great support : 

    Quote

     

    Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.

    You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
    Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.


    ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked.

    So rather than document.getElementById, you use ev.target inside this function.


     

    Thanks

  3. On 8/2/2019 at 9:40 AM, dsonesuk said:

    They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces);

    Thanks 

    this prompted me to start an .html page for this sort of thing , called:

    QA-for-html5-css-js.html 

    Hopefully I'll remember there is such a page :)

  4. Plz , let me ask a more basic question:

    For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .)

    Quote

     

                function dragStart(ev) {

                    ev.dataTransfer.setData("text", ev.target.id);
                }


     

    That uses .id , #mydiv , I want to use .mydiv  instead . 

    And I will have multiple <div class="mydiv"> elements .

    So how can I translate ' ev.target.id)  '  into ev.target.class) ?

    How can I identify which .mydiv was actually clicked .

     Is there a different syntax or format or properties that I can use ? 

    Or is there away to set up an  ' id array ' so that when a click  on  a <div> 

    I know which was clicked ?

    Thanks 

     

  5. Hello & Thanks ,

    Sorry so many questions at once , they are all part of one project .

    Referring to the article:
    'Draggable DIV Element' here:
    https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

    I would like to have multiple movable <div>s . 
    But having problems . 
    Here is the code so far:

    <!DOCTYPE html>
    <html>
    <style>
    #mydiv {
      position: absolute;
      z-index: 9;
      background-color: #f1f1f1;
      text-align: center;
      border: 1px solid #d3d3d3;
      cursor: move;
    }
    
    #mydivheader {
      padding: 10px;
      cursor: move;
      z-index: 10;
      background-color: #2196F3;
      color: #fff;
    }
    </style>
    <body>
    
    <h1>Draggable DIV Element</h1>
    
    <p>Click and hold the mouse button down while moving the DIV element</p>
    
    <div id="mydiv">
    <!--  <div id="mydivheader">Click here to move div1</div>  -->
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
    <!-- 
    <div class="mydiv">
    <!--  <div id="mydivheader">Click here to move div2</div> 
      <p>Move</p>
      <p>this</p>
      <p>DIV</p>
    </div>
    -->
    <script>
    //Make the DIV element draggagle:
    dragElement(document.getElementById("mydiv"));
    
    function dragElement(elmnt) {
      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
      if (document.getElementById(elmnt.id)) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id).onmousedown = dragMouseDown;
      } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
      }
    
      function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
      }
    
      function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
      }
    
      function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
      }
    }
    </script>
    
    </body>
    </html>

    I tried many things:
    For one , When I tried changing '#item & id="mydiv" ' to 
    '.item & class="mydiv" .
    I don't understand why that doesn't work .
    class= vs  id=  ?

    Also , I tried adding a second <div class="mydiv"> .
    But it never displayed .

    When I do get multiple <div>s working ,
    How can I detect which one was clicked .
    There will be many <div> <>s .

    Thanks for your help !
     

  6. I tend to use my own fake Tables :

    
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <title>vmTemplate-2row2col.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"> vmTemplate-2row2col.html</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;">
    row1 col1
                    </p>
    <br>
        
                </div>  
    <!-- ---------------------End of Cell------------------ -->
    
    <!-- ---------------------NewCell------------------ -->
                <div class="Cell">
                
                    <p style="text-align:center;">
    row1 col2
                    </p>
    <br>
        
                </div>  
    <!-- ---------------------End of Cell------------------ -->
    
    <br>
            </div>  <!-- <div class="Row"  -->
    
    <!-- ============NewRow============== -->
            <p></p>
            <div class="Row">
                <p></p>
    <!-- ---------------------NewCell------------------ -->
                <div class="Cell">
                
                    <p style="text-align:center;">
    row2 col1
                    </p>
    <br>
        
                </div>  
    <!-- ---------------------End of Cell------------------ -->
    
    <!-- ---------------------NewCell------------------ -->
                <div class="Cell">
                
                    <p style="text-align:center;">
    row2 col2
                    </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>

    hth

  7. Hello & Thanks ,When typing into <input> field , I prefer its behavior . 

    It has a nice smooth scrolling effect . 

    The other examples have jumpy , stacking or stretching  behavior . 

    How can I 'Duplicate <input> behavior for <p> or <span> ?' . 

    The reason I don't use <input> is because I  need the  "contenteditable="true"

    ability so that I can I can 'SaveAs' htmlPage and all is entered data . 

    Thanks

    I tried to save this code from https://www.w3schools.com/html/tryit.asp?filename=tryhtml_elem_input 

    but it's not working .

    <!DOCTYPE html>
    <html>
    <style>
    p {
      display: inline-block;
          height: 20x;
          font-size: 12px;
    	  min-width: 100px
    }
    input {  
    width: 100px;
    }
    div { 
      display: inline-block;
    //      width: 300px;
    //      border: 1px solid black;
          height: 20px;
          font-size: 12px;
    }
    span.a {
      display: inline-block;
      overflow: hidden;
      text-align:right;
      width: 50px;
      height: 20px;
      font-size: 12px;
      }
    
     #inputColor {
      border: 1px solid black;    
      background: #ffe9cc;
    }
    
    span.b {
      display: inline-block;
      overflow: hidden;
      width: 100px;
      height: 20px;
      font-size: 12px;
      border: 1px solid black;    
      background: #ffe9cc;
      }
    </style>
    <body>
    
    
      <br>
      Input example: <br>
      Enter your name:
      <input style="background: #ffe9cc;"  name="firstname" type="text"  placeholder="First name">
      <br><br>
      span example:
      <br>
    <span class="a">Name:</span>
    <span class="b" contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">&nbsp;&nbsp;&nbsp;&nbsp;</span>
    
      <br><br>
    Paragraph example: <br>
      <p>Enter your name: </p>
      <p contenteditable="true" 
          style="  min-width: 100px; border: 1px solid black; background: #ffe9cc;">
      </p>
      <br><br>
      Div-Paragraph example: <br>
     <div> 
      <p>Enter your name: </p>
      <p contenteditable="true" style="background: #ffe9cc; border: 1px solid black;">   </p>
     </div>
    </body>
    </html>

    ForumExample-01-182x200.png.6ba44ce6f0ee8d177306187d5b940c96.png

  8. Aha you were right from the beginning .

    I uninstalled my Chrome adBlocker but that didnt solve problem .

    I didn't realize that Chrome has an internal blocker.

    Turns out Chrome has under 'Advanced Settings' something called
    'Content Settings' 
    and under there is a settings called
    'Pop-ups and redirects' 
    once I reset that to 'Allowed' all is well .


    Edge also has an 'Advanced Setting' called 'Block pops-ups' that needs to be turned off .

    Likewise InternetExplorer has a check box under
    'Internet Options' that needs to be UNchecked called 'Turn on Pop-up Blocker' .

    Having changed , the page still doesn't work properly .

    Must be something more needs to be tweaked .

     

    Anyways , Thanks for your help !

  9. Thanks 

    I uninstalled popup-blocker and

    tried 

    <!DOCTYPE HTML>
    <head>
    <title>myFavs-starter.html</title>
    <meta name="Generator" content="PureBasic">
    <meta name="Description" content="...Created by  myFavs % PureBasic...">
    <style type="text/css">
    </style> 
    </head>
    <body text="#000000" style="background-color:rgb(90,105,125); text-align:center;">
    <br> <br> <br>
    <!--dd <div style=-->
    <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0">
    <tr style="text-align:center"><td>
    <!-- EXAMPLE: <form name="Arduino"> -->   <!-- rgb(250,240,255) -->
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected value="">aaMost-Used</option>
    <option value="http://alternativeto.net/">AlternativeToSoftwares</option>
    <option value="http://www.portablefreeware.com/">Portable Freeware</option>
    <option value="www.hotmail.com/">hotmail.com</option>
    <option value="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected value="">Arduino</option>
    <option value="http://garagelab.com/">arduino electronics robotics hacking</option>
    <option value="http://www.makershed.com/category_s/211.htm">Arduino products/MakerShed</option>
    <option value="http://diydrones.com/profiles/blogs/ardupilot-main-page">ArduPilot</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="selected" value="">Best_COLOR_Sites</option>
    <option value="http://kuler.adobe.com/">Adobe colors schemes themes</option>
    <option value="http://colorschemedesigner.com/">Best Color Tool Schemes</option>
    <option value="http://www.makeuseof.com/dir/cloudcanvas-html5-image-editor/">CloudCanvas & other Editor Links</option>
    <option value="http://jrm.cc/color-palette-generator/index.php?image=rec/girl-with-umbrella.jpg&steps=3&method=precise">Color Palette Generator(upload an image)</option>
    <option value="http://www.asptemplate.net/Default.aspx">Color Schemes Palettes Codes Photos</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="selected" value="">Games-html-js</option>
    <option value="http://FreeSound.org.">FreeSound.org</option>
    <option value="https://github.com/dgsprb/quick/wiki/API#gameobject">github Quickjs Wiki API#gameobject</option>
    <option value="http://liesandcowpies.com">lies and Ccowpies Games</option>
    </select></td></tr></table><br></body></html>

    Tried it in Chrome, Edge, and IE ,  still no-go ? 

    I can't figure it out?

    Thanks for your help... 

  10. Hello & Thanks ,

    I am having a prob with Years old html5 page  stopped working ?

    html5 'select dropDown menu, go to site : 

    I have been using this code with success for years , now no-go ?

    I need help to figure it out , Thanks. 

    <!DOCTYPE HTML>
    <head>
    <title>myFavs-starter.html</title>
    <meta name="Generator" content="PureBasic">
    <meta name="Description" content="...Created by  myFavs % PureBasic...">
    <style type="text/css">
    </style> 
    </head>
    <body text="#000000" style="background-color:rgb(90,105,125); text-align:center;">
    <br> <br> <br>
    <!--dd <div style=-->
    <table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0">
    <tr style="text-align:center"><td>
    <!-- EXAMPLE: <form name="Arduino"> -->   <!-- rgb(250,240,255) -->
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="0" value="">aaMost-Used</option>
    <option value="http://alternativeto.net/">AlternativeToSoftwares</option>
    <option value="http://www.portablefreeware.com/">Portable Freeware</option>
    <option value="www.hotmail.com/">hotmail.com</option>
    <option value="http://jsdo.it/vmars316/8D5g/edit">jsdo.it javascript</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="0" value="">Arduino</option>
    <option value="http://garagelab.com/">arduino electronics robotics hacking</option>
    <option value="http://www.makershed.com/category_s/211.htm">Arduino products/MakerShed</option>
    <option value="http://diydrones.com/profiles/blogs/ardupilot-main-page">ArduPilot</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="0" value="">Best_COLOR_Sites</option>
    <option value="http://kuler.adobe.com/">Adobe colors schemes themes</option>
    <option value="http://colorschemedesigner.com/">Best Color Tool Schemes</option>
    <option value="http://www.makeuseof.com/dir/cloudcanvas-html5-image-editor/">CloudCanvas & other Editor Links</option>
    <option value="http://jrm.cc/color-palette-generator/index.php?image=rec/girl-with-umbrella.jpg&steps=3&method=precise">Color Palette Generator(upload an image)</option>
    <option value="http://www.asptemplate.net/Default.aspx">Color Schemes Palettes Codes Photos</option>
    </select>
    <select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(211,221,235);" name="menu" onchange="window.open(this.value); window.location.reload();">
      <option selected="0" value="">Games-html-js</option>
    <option value="http://FreeSound.org.">FreeSound.org</option>
    <option value="https://github.com/dgsprb/quick/wiki/API#gameobject">github Quickjs Wiki API#gameobject</option>
    <option value="http://liesandcowpies.com">lies and Ccowpies Games</option>
    </select></td></tr></table><br></body></html>

     

  11. Thanks Ingolme

    I checked it out , but I don't want to dabble with tabindex .

    I came up with a workaround that works for me:

    <!DOCTYPE html>
    <html>
       <head>
          <meta charset="UTF-8">
          <!--  https://www.freeformatter.com/html-validator.html  -->
          <title>How to do lots of stuff:</title>
          <style type="text/css">
          </style>
       </head>
       <!--  -->
       <!-- body onload="documentURL()" .  -->
       <!-- Get & Display Current page's address .  -->
       <body onload="documentURL()">
          <!--  -->
          <p  contenteditable="" id="currentPage_Address" style="font-size: 8px; color: #34495E;" onclick='{has_Focus = "currentPage_Address"; whohasFocus();};'> </p>
          <p contenteditable="" style="color: darkgreen;" id="examplesIntro" onclick='{has_Focus = "examplesIntro"; whohasFocus();};'>
             These examples (work in progress) demonstrate 'How to': 
             <br>
             <br>body onload="documentURL()" .
             <br>Get & Display Current page's address .
             <br>Make a paragraph contentEditable .
             <br>Change Paragraph content innerHTML (press Enter_Key) .
          </p>
          <!-- Make a paragraph contentEditable .  -->
          <br>
          <p contenteditable="" id="p_tgh1" onclick='{has_Focus = "p_tgh1"; whohasFocus();};'>This is Paragraph id= p_tgh1</p>
          <p contenteditable="" id="p_ah1" onclick='{has_Focus = "p_ah1"; whohasFocus();};'>This is Paragraph id= p_ah1</p>
          <br>
          <p style="color: darkgreen;" id="showMe" onclick='{has_Focus = "showMe"};'>Show'em Who has Focus ?</p>
          <script>
             var  someDots = "....";
             var origContents = ".";
             var newContents = ".";
             var  document_URL;
             var  has_Focus = "none-yet";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", checkForEnterKeyDown, false);
             }
          </script>
          <script>
             function whohasFocus() {
               var focusPocus = ".";
               
               console.log("49 has_Focus= " + has_Focus);
               
    //           document.getElementById(showMe).innerHTML = "."; 
               focusPocus = has_Focus + "  has focus.";
    
               console.log("54 has_Focus= " + has_Focus);
    
               document.getElementById("showMe").innerHTML = "Paragraph&nbsp; &nbsp;" + has_Focus + "&nbsp; &nbsp;Has Focus"; 
          }
          </script>
          <script>
             function checkForEnterKeyDown(event){
               var keyPressed = event.keyCode || event.which;
               if(keyPressed==13)
               { 
             // Change Paragraph content (innerHTML) .
             
               console.log("66 has_Focus= " + has_Focus);
               
               origContents = document.getElementById(has_Focus).innerHTML ; 
               newContents = origContents + someDots; 
               document.getElementById(has_Focus).innerHTML = newContents; 
             // Cancel onEnterKeyDown .
               event.preventDefault();
               event.stopImmediatePropagation();
               }
               else
               {
                   return false;
               }
             } 
          </script> 
       </body>
    </html>

    Thanks

  12. https://www.w3schools.com/code/tryit.asp?filename=G19MDT6C3HPE

    Thank you for doing that !

    Now we are getting somewhere , I think . 

    Note image below: This is what I see from same html . 

    Perhaps it has something to do with you are connected with a Server , I am not .

    In debugging , I find that : 

    If I copy my code from  the 'w3schools link' you gave me , I get my same results , not yours .

    However , 

    If while at your 'w3schools link' , I click 'RUN'

    and then click [Add Text] a couple times ,

    Then click  [Save This Page]  , and let it download to my computer .

    Then it does show exactly as yours does .

     How can we account for that ??

    Thanks 

     

    MyStory-Heading-FromW3C-Shrink-300x139.png

  13. Thanks,

             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             background: #FF0000  ;
             }

    Hmm...

    Sorry , I have to ask , did you test my whole code ?

    I am confused .

    On Chrome what it does is make a red line at the bottom ,  just below  id="Row3Cell1"  .

    And the rest of the page is blank .

    I want to fill up the whole visible screen .

    You are saying I can use vh to fill up the whole visible page ? 

    Thanks

     

  14. How to tell which <p> 'id=' has focus ?
    Hello & Thanks ,
    The problem with  'document.activeElement.tagname' is that
    for p element it returns 'BODY' .
    But I want to know which p has focus .
    Pls, How can this be done ?
    Here is the prototype function I was working on .

    <!DOCTYPE html>
    <html>
    <title>Which Element Has Focus</title>
    <!--
    -->
    <body onload="documentURL()" onclick="myFunction()" >
    
    <p>Click anywhere in the document to display the active element.</p>
    <input type="text" value="An input field">
    <button>A Button</button>
    
        <p id="demo">Who dunnit ?</p>
        <br>
        <p id="currentPage_Address" style="fontsize: 12px; color: #34495E;">Current Page Address</p>
    <script>
    function myFunction() {
      var x = document.activeElement.tagName;
      document.getElementById("demo").innerHTML = x;
    }
    </script>
          <script>
             var  p_tgh = "";
             var  pp_tgh = "";
             var  p_tghCount = 1;
             var  p_ah = "";
             var  pp_ah = "";
             var  p_ahCount = 1;
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text Paragraph";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             const  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
    //         window.addEventListener("keydown", onPress_ENTER, false);
             }
          </script>
    
    </body>
    </html>

    And I would like to put some working code in here:
        'function onPress_ENTER(event)'
    Triggered by this:
        'window.addEventListener("keydown", onPress_ENTER'
    Here is the full code where I want to put "WhichParaHasFocus".

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }
             #mainHeading {
             color: #566573 ; 
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: left;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             .p_bn {
             text-align: left;
             }
             .p_ah {
             color: DarkGreen;
             text-align: left;
             font-size: 16px
             }
             .p_tgh {
             color: #566573; 
             text-align: left;
             font-size: 14px
             }
             #left_note {
             color:#5886BC;
             }
             #left_note {
             color:#576C15;
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading">MainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" class="p_ah">Heading</p>
                      <p contenteditable="" class="p_tgh">Text</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <br>
                   <button onclick="createLeftNote()">Add Left Note</button>
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <button onclick="createRightNote()">Add Right Note</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
             var  LeftNote = "LeftNote";
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text";
             var  RightNote = "RightNote";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             var  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("class","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("class","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             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> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

  15. Ouch !  

    Been there done that ,

    it doesn't help .

             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }

    As a matter of fact I tried  min-height:100% ; in Body , Html and Table .

    None of it works !

    I must be cancelling it out in other ways .

    Speaking of your common sense remark reminds me of an incident with my dad when I was 10yrs old .

    He had just purchased a mechanical lawn trimmer  .

    Each time he sent me out I came back saying . "It doesn't work" . 

    So finally I said "Why don't you show me how". 

    So he tried and tried , cursing all time . Finally , he threw it down and said "This piece of **** doesn't work".

    Anyways , here is the full code:

    <!DOCTYPE  html>  
    <html>
       <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>MyStory.html</title>
          <!--   
             file:///C:/Users/vmars/Desktop/myPrograms/HeyBuddy/~~Hey-Buddy-WIP/MyStory.html
             https://www.dummies.com/web-design-development/css3/using-the-div-tag-to-create-tables/
             https://www.freeformatter.com/html-validator.html 
             <a href="https://developer.mozilla.org/en-US/" target="_blank">
             <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"alt="MDN logo" />
             </a>
             still to do: intercept 'enter-key' replace with 8 spaces ELSE just cancel it .
             -->  
          <style type="text/css">
             body {
             font-family: Comic Sans MS;
             height: 100%;
             margin: 0 auto;
             padding:0;
             }
             html {
             height: 100%; 
             margin: 0 auto;
             padding:0;
             border: 0;
             }
             .Table {/*  wrapper  */
             min-height:100%;
             text-align: center;    
             margin: 0 auto;
             padding:0;
             }
             #mainHeading {
             color: #566573 ; 
             text-align: center;
             width: 100%;
             background: #BCCE98;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #container {
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             overflow: hidden;
             margin: 0 auto;
             padding:0;
             }
             #Row1
             {
             display: block;
             width: 100%;
             vertical-align: top;
             margin: 0 auto;
             padding:0;
             }
             #Row2
             {
             display: block;    
             width: 100%;
             margin: 0 auto;
             padding:0;
             }
             #Row3
             {
             width: 100%;    
             margin: 0 auto;
             padding:0;
             display: inline;   
             }
             #Row1Cell1
             {
             color: #4C4C4C; 
             display: inline-block;   
             text-align: center;
             width: 100%;
             font-size: 18px
             }
             #Row2Cell1
             {
             display: inline-block;   
             background-color: #DAE9BC;
             width: 20%;
             margin: 0 auto;        
             float: left;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell2
             {
             display: inline-block;   
             text-align: left;
             width: 60%;
             background-color:#F8F8FF;
             margin: 0 auto;         
             float:left; 
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row2Cell3
             {
             display: inline-block;   
             width: 20%;
             background: #e9f2d7; 
             margin: 0 auto;         
             float: right;
             padding-bottom: 1001em;
             margin-bottom: -1000em;
             }
             #Row3Cell1
             {
             display: inline-block;   
             width: 100%;
             background: #BCCE98;
             margin: 0 auto;    
             overflow: auto;      
             text-align: center;         
             }
             div{ 
             text-align: left;
             font-size: 14px
             }
             .p_bn {
             text-align: left;
             }
             .p_ah {
             color: DarkGreen;
             text-align: left;
             font-size: 16px
             }
             .p_tgh {
             color: #566573; 
             text-align: left;
             font-size: 14px
             }
             #left_note {
             color:#5886BC;
             }
             #left_note {
             color:#576C15;
             }
             #currentPage_Address {
             color:#e9f2d7;
             }
          </style>
       </head>
       <body onload="documentURL()">
          <!-- Run me 1st -->
          <div class="Table">
             <!-- ============NewRow============== -->
             <div id="Row1">
                <div id="Row1Cell1">
                   <p contenteditable="true" id="mainHeading">MainHeading</p>
                </div>
                <!-- <div class="Cell"  -->
             </div>
             <!-- <div class="Row"  -->
             <!-- ============NewRow============== -->
             <div id="container">
                <div id="Row2">
                   <div id="Row2Cell1">
                      <p contenteditable="" class="left_note" style="color:#5886BC;">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell2">
                      <p contenteditable="" class="p_ah">Heading</p>
                      <p contenteditable="" class="p_tgh">Text</p>
                   </div>
                   <!-- <div class="Cell"  -->
                   <div id="Row2Cell3">
                      <p contenteditable="true" class="right_note" style="color:#576C15">notes</p>
                   </div>
                   <!-- <div class="Cell"  -->
                </div>
                <!-- <div class="Row"  -->
             </div>
             <!--  id="container"  -->
             <!-- ============NewRow============== -->
             <div id="Row3">
                <div id="Row3Cell1">
                   <br>
                   <button onclick="createLeftNote()">Add Left Note</button>
                   <button onclick="createArticleHeading()">Add Heading</button>
                   <button onclick="createTextArea()">Add Text Paragraph</button>
                   <button onclick="createRightNote()">Add Right Note</button>
                   <form action="http://google.com" target="_blank" style="display: inline;">
                      <input type="submit" value="Search Google" />
                   </form>
                   <button onclick="saveAs(filename, allHtml)">Save This Page</button>
                   <p id="currentPage_Address" > </p>
                </div>  <!-- id="Row3Cell1"  -->
             </div>  <!-- <div class="Row"  -->
          </div>  <!--  <div class="Table">  -->
          <script>
             var  LeftNote = "LeftNote";
             var  ArticleHeading = "Heading";
             var  TextParagraph = "Text";
             var  RightNote = "RightNote";
             var  ButtonParagraph = "New Link";
             var  document_URL;
             var  filename = "myStory.html";
             var allHtml =  document.documentElement.outerHTML; 
             var  document_URL;
             function documentURL() {
             document_URL = document.URL;
             document.getElementById("currentPage_Address").innerHTML = document_URL;  
             window.addEventListener("keydown", onPress_ENTER, false);
    
             }
          </script>
          <script>
          function onPress_ENTER(event){
            var keyPressed = event.keyCode || event.which;
            //if ENTER is pressed
            if(keyPressed==13)
            {
    //            alert('enter pressed');
                event.preventDefault();
                stopImmediatePropagation();
            }
            else
            {
                return false;
            }
    } 
          </script>
          <script contenteditable="">
             function createTextArea() {
                       var p_tgh = document.createElement("p");
                       p_tgh.innerHTML = TextParagraph;
                       p_tgh.setAttribute("contenteditable", "true");
                       p_tgh.setAttribute("class","p_tgh");
                       var content = document.getElementById("Row2Cell2");
                       content.appendChild(p_tgh);
                     }	
          </script>	
          <script contenteditable="">
             function createArticleHeading() {
               var p_ah = document.createElement('p');
               p_ah.innerHTML = ArticleHeading;
               p_ah.setAttribute('contenteditable', 'true');
               p_ah.setAttribute("class","p_ah");
               var content = document.getElementById('Row2Cell2');
               content.appendChild(p_ah);
             }
          </script> 
          <script>
             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> 
          <script contenteditable=""> 
             function createNewButton() {
               var p_bn = document.createElement("li");
               p_bn.innerHTML = ButtonParagraph;
               p_bn.setAttribute('contenteditable', 'true');
               p_bn.setAttribute("id","li-Default");
               var content = document.getElementById("nav-01");
               content.appendChild(p_bn);
             }
          </script> 
       </body>
    </html>

    Thanks

     

     

×
×
  • Create New...