Jump to content

vmars316

Members
  • Content Count

    431
  • Joined

  • Last visited

Posts posted by vmars316

  1. WIndows 10 , Chrome

    None of the try-it links work for me , here's one:

    https://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover2 

    DeveloperTools show these errors:

    snigelweb-com.videop…om/videoloader.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    sncmp_stub.min.js:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    static.h-bid.com/w3s…m.min.js?20190327:1 Failed to load resource: net::ERR_BLOCKED_BY_CLIENT
    tryit.asp:49 Uncaught TypeError: window.__cmp is not a function
        at tryit.asp?filename=trycss_sel_hover2:49

     

    And after the 'click icon to save' , there are no additional error messages .

     

  2. Editor wouldn't let me add my code:

    So here it is now:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>Drag Multiple Elements</title>
    <style>
        body {
          margin: 20px;
        }
        #container {
          width: 100%;
          height: 200px;
          background-color: #DAE9BC;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          border-radius: 7px;
          touch-action: none;
        }
        .item:active {
          opacity: .75;
        }
        .item:hover {
          cursor: pointer;
        }
        .item {
          border-style: solid;
          border-width: 1px;
          touch-action: none;
          user-select: none;
          position: absolute;
        }
        .item4 {
          width: 100px;
          height: 100px;
          background-color: #F3F8EA;
    	  border-color: #006400;
          top: 100px;
          left: 35px;
    }
    	p.borderShowTop{
    	  background-color: yellow;
          padding: 20px;
          display: none;
    }
    	div .item4:hover +  p.borderShowTop {
    	  background-color: yellow;
          padding: 20px;
          display: block;
    }
    </style>
    </head>
    <body style="text-align: center;">
    <h5>Drag Multiple Elements</h5>
    <div id="outerContainer">
    <div id="container">
    <div class="item item4" contenteditable="true">  
    Hover over me! Contenteditable.
    <p class="borderShowTop">Click & hold down to move  :)</p>
    </div>  <!-- class="item item4"  -->
    </div>  <!-- id="container" -->
    </div>  <!-- id="outerContainer" --> 
    </body>
    </html>

    Thanks

  3. Thanks dsonesuk

    works perfectly !

    Now what I want to do is add a few more things to be more in line with I am aiming at . But I am running into a similar thing . 

    The two areas that I suspect are problematic  are  :

    	div .item4:hover +  p.borderShowTop {
    	  background-color: yellow;
          padding: 20px;
          display: block;
    }
     
    <!--  and  -->
    
    <div class="item item4" contenteditable="true">  
    Hover over me! Contenteditable.
    <p class="borderShowTop">Click & hold down to move  :)</p>

    I can't see my error .

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

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

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

     

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

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

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

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

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

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

     

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

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

×
×
  • Create New...