Jump to content

vmars316

Members
  • Content Count

    403
  • Joined

  • Last visited

Everything posted by vmars316

  1. Aha , Thanks dsonesuk : "colour" are you perhaps British ?
  2. Thanks , Oops! Forgot that one The prob that remains is: why does css borders for "myDiv" work fine but the borders for body and div .container do not work ? Thanks https://www.w3schools.com/code/tryit.asp?filename=G7CDQO1VLUTQ Thanks
  3. Thanks dsonesuk ; Got rid of // . Still probs with " width, height, left, top " see: https://www.w3schools.com/code/tryit.asp?filename=G7BTTE3FA589 Thanks
  4. Hello & Thanks: I can't seem to get "css border, margin, display" working . Would like all 4 of the "myDiv" to show side by side . Pls, what am I doing wrong ? Thanks <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> body { font-family: Comic Sans MS; background: #D3DDEB; // #bcce98 ; border-style: 12px solid navy; margin: 8px; } #container { border-style: 12px solid navy
  5. Thank you Funce ! I will study this until I understand every 'jot and tittle' . You moved me to start a Folder for w3schools-Examples . http://vmars.us/w3schools-Examples/Draggable-Div-Elements-w3Schools-FUNCE.html Thanks again
  6. OK Funce : I have poor eysite , and a learning disability , so let me absorb this , it may take a while . I have to see example first and work backwards , I realize it makes more work for you folks , and I apologize for that . so yes , an explanation would tremendously useful : https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable Thanks
  7. Here's what have so far BUT I am still getting an error: " Uncaught TypeError: Cannot set property 'onmousedown' of undefined " Pls, what am I doing wrong //Make the DIV element draggagle: //dragElement(document.getElementsByClassName("mydiv")); dragElement(document.querySelectorAll("p")); var elmnt ; var i; function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; for (i = 0; i < elmnt.length; i++) { if (this.elmnt) { break; } } elmnt[i] = document.getElementsByClassName("mydivheader"); { /* if present, the header is where you move th
  8. I think I understand what you are saying : "document.getElementsByClassName()" returns a nodeList . " So I need to parse that list , but for "document.getElementsByClassName()" returns a nodeList . " ( I get error: " Uncaught TypeError: elmnt.getElementsByClassName is not a function " . ) Once I solve that , then I can proceed with this following question about " function dragElement(elmnt) " ( So if " elmnt " is that nodeList , What does it look like ? Does it show two "mydiv" ? If so then how do I determine which "my
  9. Thanks Funce Sorry , I am confused where things should go: <!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> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move<
  10. <!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> <h1>Draggable DIV Element</h1> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div class="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DI
  11. Thanks Funce: Is this what you mean ? Code below . <!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>HelpMeDoThis-Multi-Draggable-ID-Element-w3Schools-FUNCE.html</h5> <p>Click and hold the mouse button down while moving the DIV element</p> <div class="mydiv"> <div id="mydivheader
  12. Ok , I see what you mean , and I am reading up on indexes and arrays . Thanks
  13. Hello & Thanks , I would like to take w3schools code: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable And replace the <p>Move</p> <p>this</p> <p>DIV</p> with multiple "textareas" : <textarea class="textArea" rows="4" cols="20"> </textarea> As I do here: https://www.w3schools.com/code/tryit.asp?filename=G6WWH7C8BR89 (Please note the behavior of <trextarea> , how you can Drag the textarea from the right bottom corner and resize the whole 'mydiv' . )
  14. I would like to delete this post and I'll start afresh . Thanks
  15. Sorry the editor is deleting my stuff . I'll start again : Thanks; Actually, the code should show multiple : <div class="container"> <div class="item" contenteditable="true"> This is content. </div> </div> <!-- class="container" --> Ingolme: It means that document.querySelector("container"); is not returning an element. You forgot to use a class selector "." to select the element by its class attribute. vm: I don't understand; isn't ("container") the class ? Ingolme: For the second error, document.getElementsByClassName("container"); returns
  16. Thanks; Actually, the code should show multiple : <div class="container"><div class="item" contenteditable="true"> This is content.</div></div> <!-- class="container" -->
  17. Hello & Thanks : I am getting 2 Uncaught errors (see code below): Here: container.addEventListener("touchstart", dragStart, false); And here: var clone = elmnt.cloneNode(true); Uncaught Drag-ContainerClass-CloneNode-Forum.html:73 TypeError: Cannot read property 'addEventListener' of null at Drag-ContainerClass-CloneNode-Forum.html:73 2 Uncaught Drag-ContainerClass-CloneNode-Forum.html:62 TypeError: elmnt.cloneNode is not a function at cloneByClassName (Drag-ContainerClass-CloneNode-Forum.html:62) at HTMLButtonElement.onclick (Drag-ContainerCl
  18. Great , but how can I capture that information ? I was hoping to avoid problems by setting a dual definition of 'id=' and 'class=' : .myDivClass { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } .myDivHdrClass { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; } <div id="mydiv" class="myDivClass"> <div id="mydivHdr" class="myDivHdrClass">Click here to move</div>
  19. 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 { padd
  20. Ugh (embarrassed) ! But happy that I can use 'textrea' as I had hoped . Thanks again dsonesuk
  21. 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;
  22. 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 '
  23. 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;
×
×
  • Create New...