Jump to content

vmars316

Members
  • Posts

    435
  • Joined

  • Last visited

Everything posted by vmars316

  1. Hello & Thanks : In code below , how do I tell " dragElement(document.getElementByClassName("myDivClass")); " which clone was clicked on ? <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivHdr { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } .myDivHdrClass { 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" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div> <div contenteditable="true">Type here: </div> </div> <p>Click the button to copy the myDivClass element above, <br>including all its attributes and child elements, and append it to the document.</p> <button onclick="cloneFunction()">Try it</button> <script> function cloneFunction() { var elmnt = document.getElementsByClassName("myDivClass")[0]; var cln = elmnt.cloneNode(true); document.body.appendChild(cln); } </script> <script> //Make the DIV element draggagle: dragElement(document.getElementByClassName("myDivClass")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "Hdr")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "Hdr").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> Thanks
  2. Ugh (embarrassed) ! But happy that I can use 'textrea' as I had hoped . Thanks again dsonesuk
  3. Hello & Thanks for your Help : When <textarea> is enabled , it cancels drag element movement . <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</p> </div> <!DOCTYPE html> <html> <style> #mydiv { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } </style> <body> <h5>Draggable DIV Element</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div id="mydiv"> <div id="mydivheader">Click here to move</div> <!-- <textarea rows="4" cols="10"> --> <p contenteditable="true">paragraph 2</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 + "header")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "header").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> Can anyone show me how to fix it ? Thanks
  4. 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 .
  5. 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
  6. 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 .
  7. No I am just adding to the code . And I have tried many times . ??
  8. 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>
  9. dsonesuk Here's what I mean , see image :
  10. 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
  11. 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 .) 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
  12. 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 !
  13. 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
  14. Thanks Ingolme , Very cool ! I scooped it . I use KompoZerPortable to create tables . & still using Notepad++
  15. 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
  16. <!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>
  17. 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
  18. 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>
  19. 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 !
  20. 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...
  21. 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>
  22. 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>
×
×
  • Create New...