vmars316

August 6, 2019

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 .

August 5, 2019

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

August 5, 2019

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 .

August 5, 2019

No I am just adding to the code .

And I have tried many times .

??

August 4, 2019

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>

August 4, 2019

dsonesuk

Here's what I mean , see image :

August 4, 2019

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

August 4, 2019

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

August 1, 2019

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

August 1, 2019

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 !

July 31, 2019

Hello & Thanks ,

In the "howto/tryit.asp?" page the

'Your Code has Been Saved
File has been saved to:'

pop doesn't give any filename.

Is there something I am doing wrong

What do I need to do to get it working ??

Thanks

July 29, 2019

Thanks Ingolme ,

Very cool !

I scooped it .

I use KompoZerPortable to create tables .

& still using Notepad++

July 29, 2019

dsonesuk

Just curious , how does one know if something has been answered successfully ?

There doesn't seem to be an 'answered icon' any where .

Thanks

July 29, 2019

<!DOCTYPE html>
<html>
    <head>
        <title>
            Test
        </title>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
    </head>
    <body>
  <div style="border: 4px solid blue ; min-width: 200px; max-width:350px;">
        <table  style="border: 4px solid red ;">
            <tr>
                <td width="200" bgcolor="#F0f0f0">asdfgh
                </td>
            </tr>
        </table>
   </div>
    </body>
</html>

July 29, 2019

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

July 29, 2019

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

March 3, 2019

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 !

March 2, 2019

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

March 2, 2019

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>

February 18, 2019

Hmm...

This is pretty cool too (double whamy):

<p contenteditable="" id="p_ah1" onfocus="{has_Focus = 'p_ah1'}; console.log(has_Focus); " onclick="{has_Focus = 'p_ah1'}">Heading</p>

February 18, 2019

Thanks

February 18, 2019

Please let me know if you find out why it acts that way .

Thanks

February 18, 2019

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

February 16, 2019

Notepad++

February 16, 2019

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

Sign In

vmars316

Content Count

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Posts posted by vmars316

"Your Code has Been Saved" page Isn't working ??

Plz , help me spot my error :

Plz , help me spot my error :

"Your Code has Been Saved" page Isn't working ??

Plz , help me spot my error :

Multiple Dragable DIV Elements ?

Multiple Dragable DIV Elements ?

Multiple Dragable DIV Elements ?

Multiple Dragable DIV Elements ?

Multiple Dragable DIV Elements ?

"Your Code has Been Saved" page Isn't working ??

Favourite html editors...

Adding div side by side

dsonesuk

When displaying a simple table of one cell, the table displays roughly twice the size it should.

Sections within <td> of a table

How to Duplicate <input> behavior for <p> & <span> ?

html5 'select dropDown menu, go to site stopped working ?

html5 'select dropDown menu, go to site stopped working ?

html5 'select dropDown menu, go to site stopped working ?

How to tell which <p> 'id=' has focus ?

How to Make <body> Take Up 100% of the Browser Height ?

How to Make <body> Take Up 100% of the Browser Height ?

How to tell which <p> 'id=' has focus ?

How to Make <body> Take Up 100% of the Browser Height ?

How to Make <body> Take Up 100% of the Browser Height ?

Browse

Activity