Jump to content

vmars316

Members
  • Posts

    480
  • Joined

  • Last visited

Profile Information

  • Location
    Brownsville, Tx

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

vmars316's Achievements

Member

Member (2/7)

5

Reputation

  1. Hi Ingolme Oh , I thought you folks might have changed to a pay for '$ Help Forum' . Btw: I am glad you switched back to 'Foxy Avatar' . Thanks for your Reply...
  2. How come no Help here ? For my last few Posted Topics I have received no Help . Are you folks under new management ? Just wondering why ❓ Thanks
  3. Thanks for your Help... What I am trying to do is Modify this W3School's example codeso that I can DragDrop Multiple DivsRather than just DnD 1 Div .W3Schools online HTML editorhttps://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html Problem is I can't get past the 'function dragElement' it doesn't get to the other Functions . Please , what am I doing wrong ? Thanks for your Help... <!DOCTYPE html> <html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <style> img { margin: 5px; padding: 5px 8px; outline: none; border: none; color: white; font-size: 1em; } div:hover { // background-color: #ffa000; cursor: pointer; } #result { border:1px solid; display:inline-block; margin:5px; /* padding:5px; */ } </style> </head> <body> <div id="elemContainer" style="position: absolute; width: 1420px; height: 750px; display:inline-block; "> <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div> <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;">&nbsp;2</div> </div> <!-- id="elemContainer" --> <div id="result">result = </div> <script> var holdTargetId ; // dragElement(holdTargetId) ; const divGroup = document.getElementById("elemContainer"); const result = document.getElementById("result"); const divGroupPressed = e => { const isDiv = e.target.nodeName === 'DIV'; if(!isDiv) { return } holdTargetId = e.target.id ; console.log("holdTargetId = " + holdTargetId) ; dragElement(holdTargetId) ; } divGroup.addEventListener("click", divGroupPressed); </script> <script> var elmnt ; var timesIn = 0 ; function dragElement(holdTargetId) { console.log("function dragElement(elmnt = " + holdTargetId) ; elmnt = holdTargetId ; // var savedTargetId = event.target.id ; var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { console.log("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(); console.log("function elementDrag(e)") ; // 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:*/ console.log("function closeDragElement()") document.onmouseup = null; document.onmousemove = null; } </script> </body></html>
  4. These are the Errors I am getting : Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at drop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131:16) at HTMLTableElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:78:132) Please see video , it was to large for this Forum .Please view from my site:https://vmars.us/ShowMe/Drag-n-Drop.mp4 Thanks for your Help...
  5. Hello & TIA , Need help , Having problem with Drag n Drop ? My code seems quite simple , but I have been hung up for days : The first DnD doesnt Drop : 'div id="itemContainer" ' Tha 2nd DnD works fine . <!DOCTYPE HTML> <html> <head> <style> #div1, #div2 { float: left; width: 100px; height: 35px; margin: 10px; padding: 10px; border: 1px solid black; } .item { display: inline-block; border-radius: 50%; touch-action: none; user-select: none; counter-increment: itemCount; content: 'count' + itemCount; width: 32px; height: 32px; // background-color: #F5F5F5; // whitesmoke font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:28px; z-index: 8; } </style> </head> <body> <h2>Drag and Drop</h2> <br> <div id="itemContainer" id="dragItems" ondrop="drop(event)" ondragover="allowDrop(event)" class="POS" style=" width:100%; border: thick solid pink;"> <br> <div class="item" class="flatOne" id="flatOne" draggable="true" style=" background-color: yellow;" >b1</div> <br> <div class="item" class="one" draggable="true" ondragstart="drag(event)" style=" background-color: #FF0004;" > 1</div> <br> <div class="item" class="sharpOne" draggable="true" ondragstart="drag(event)" style=" background-color: yellow;" >♯1</div> <br> <div class="item" class="naturalOne" draggable="true" ondragstart="drag(event)" style=" background-color: yellow;" >♮1</div> </div> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br><br><br><br> <br> <div ondrop="drop(event)" ondragover="allowDrop(event)" style=" border: thick solid blue; width:100%; height: 200px;"> </div> <script> function allowDrop(ev) { ev.preventDefault(); console.log("function allowDrop(ev)") } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); console.log("function function drag(ev)") } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); console.log("function drop(ev)") } </script> </body> </html>
  6. TIA , Is this forum dead ?
  7. Hello & TIA , So far I am unable make drop(event) work : What am I doing wrong ? The original code is 600 + lines , so I have chunked down to this : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <title>Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-CLONE.html</title> <style> body { margin: 20px; background-color: #FFFFFF; } .flex-container { display: flex; } .flex-container > div { font-size: 20px; } #outerContainer{ border: 5px solid red; } #itemContainer { width: 100%; height: 100px; display: flex; align-items: center; justify-content: center; overflow: hidden; counter-reset: itemCount; } .item { display: inline-block; border-radius: 50%; touch-action: none; user-select: none; counter-increment: itemCount; content: 'count' + itemCount; width: 32px; height: 32px; background-color: #F5F5F5; // whitesmoke font-family: Arial, Helvetica, sans-serif; text-align:center; font-size:28px; z-index: 8; } .dragItems { } #tableContainer { } #fretboardContainer { background-color: #DCDCDC; // #000000; // #636363; // #DCDCDC; // #FFFBA7 } .pearlFret { background-color:#6363FF; } tbody { background-color:#636363; } .button { border: none; } #button1 { border: none; background-color: #636363; color: #FFFFFF} /*darkGrey OR LightGrey @DCDCDC */ #tbodyId { background-color:#636363; } .item:active { opacity: .75; } .item:hover { cursor: pointer; } </style> </head> <body onload="button1Clicked()"> <div id="outerContainer" style="border:4px;" ondrop="drop(event)" ondragover="allowDrop(event)" > <!-- BEGIN OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ position: absolute; border: 2px; --> <p> X: <span id="x"></span><br> Y: <span id="y"></span> <!-- ondrop="drop(event)" ondragover="allowDrop(event)" --> </p> <div id="itemContainer" id="dragItems" class="flex-container"; class="POS" style=" position: absolute; top: 40px; "> <div class="item" class="flatOne" draggable="true" ondragstart="drag(event)" style=" position: absolute; left: 100px; top: 0; background-color: yellow;" >b1</div> <div class="item" class="one" draggable="true" ondragstart="drag(event)" style=" position: absolute; left: 400px; top: 0; background-color: #FF0004;" > 1</div> <div class="item" class="sharpOne" draggable="true" ondragstart="drag(event)" style=" position: absolute; left: 700px; top: 0; background-color: yellow;" >♯1</div> <div class="item" class="naturalOne" draggable="true" ondragstart="drag(event)" style=" position: absolute; left: 1000px; top: 0; ; background-color: yellow;" >♮1</div> </div> <!-- id="itemContainer" --> <div id="tableContainer" style=" position: absolute; top: 155px; left: 55px; "> <!-- id="tableContainer" ZZZZZZZZZZZZZZZ --> <table id="fretboardContainer" ondrop="drop(event)" ondragover="allowDrop(event)" style=" position: absolute ; width: 1200px;"> <!-- <p> BEGIN OF fretContainer ZZZZZZZZZZZZ --> <!-- Start Copy Here --> <tbody id="tbodyId" style="background-color:#636363;" > <tr style="height: 40px; border-bottom: 2px solid red; border-top: 3px solid white;"> <!-- Row 1 --> <td style="vertical-align: top; border-bottom: 3px solid white; border-top: 4px solid white;"><br> </td> <td style="vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br> </td> <td style="vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br> </td> <td style="vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br> </td> </tr> </tbody> </table> <!-- <p> END OF fretContainer ZZZZZZZZZZZZZZZZZZZZZZZ </p> --> </div> <!-- <p> END OF tableContainer ZZZZZZZZZZZZZZZZZZZZZZZ </p> --> <div id="buttonContainer" style=" background-color: white; width: 240px; position: absolute ; top: 455px; Left:550px;"> <div style="background-color: white; width: 340px;"> <button class="button" id="button1" onclick="button1Clicked()">Color</button> <button class="button" id="button2" onclick="button2Clicked()">Color</button> </div> </div> <!-- id="buttonContainer" --> <p id="notes" contenteditable ="true" style=" display: block; height: 150px; width: 1200px; border-color: red; position: absolute ; top: 525px; left: 55px; border-width: 2px; border-style: solid; border-color: green; " >Notes: </p> <p class="item" class="three" onclick="alertHelp()" style=" position: absolute; top: 460px; width: 32px; left: 1280px; background-color: #FFFF0D; display: block; " >? </p> </div> <!-- <p> END OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ </p> --> <!-- <p> BEGIN SCRIPT ZZZZZZZZZZZZZZZZZ </p> --> <script> window.addEventListener('mousemove', (event) => { let x = event.clientX; let y = event.clientY; document.getElementById('x').innerHTML = x; document.getElementById('y').innerHTML = y; }); </script> <script> function button1Clicked() { //document.body.style.backgroundColor = "red"; document.getElementById("tbodyId").style.backgroundColor = "#636363" ; // document.getElementById("fretboardContainer").style.backgroundColor = "#DCDCDC" document.getElementById("fretboardContainer").style.backgroundColor = "#000000" var elements = document.getElementsByClassName("pearlFret") for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = "#636363" ; // "#333333"; } } </script> <script> function button2Clicked() { document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4" document.getElementById("fretboardContainer").style.backgroundColor = "#000000" var elements = document.getElementsByClassName("pearlFret") for (var i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = "#CFD7E4" // "#595959"; } } </script> <script> function alertHelp() { var newLine = "\r" var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop." msg += newLine; msg += "You can Download your Design , and Browser will keep everything in place!"; msg+= newLine; msg += " "; msg += newLine; msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs."; msg+= newLine; msg += " "; msg+= newLine; msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:"; msg+= newLine; msg += " "; msg+= newLine; msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412"; msg+= newLine; msg += "It takes good snapshots for Selected Regions."; msg+= newLine; msg += " "; msg+= newLine; msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49"; msg+= newLine; msg += "Your ScreenShots will be quite Large."; msg+= newLine; msg += "Irfanview can Resize these to a much smaller image."; msg+= newLine; msg += "Have Fun !"; alert(msg); } </script> <script> function allowDrop(event) { event.preventDefault(); } function drag(event) { event.dataTransfer.setData("text", event.target.id); } function drop(event) { event.preventDefault(); var data = event.dataTransfer.getData("text"); event.target.appendChild(document.getElementById(data)); } </script> </body> </html>
  8. Hello & TIA , I am trying to change a background color of a <div> backgroundColor with javascript . #fretboardContainer { background-color: #DCDCDC; <button class="button" id="button2" onclick="button2Clicked()">Color</button> <table id="fretboardContainer" style=" position: absolute ; width: 1200px;"> With this code: <script> function button2Clicked() { alert("button2 was clicled") ; document.body.style.backgroundColor = "red"; document.getElementById(fretboardContainer).style.backgroundColor = "#000000" } </script> This is the culprit: document.getElementById(fretboardContainer).style.backgroundColor = "#000000" Pls , what is the proper way to code that ?
  9. Hello , TIA , Sorry , I've for gotten how to do this . How to not run a function until "button click" ?
  10. Well I have made some headway see here :https://vmars.us/ShowMe/Fretboard-Forum.html But how can I position DCDCDC-Box image below GuitarfretboardGrayRed image ? Thanks
  11. I made some headway with this https://vmars.us/ShowMe/Fretboard-Forum.html
  12. Hmm... I am trying to do a similar thing here : https://w3schools.invisionzone.com/topic/63436-dragdrop-image-anywhere-on-screen/ See here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html I want to drop balls onto guitar fretboard . I am reading up on layers now . Lets keep in touch...
  13. Hello TIA , I am having probs with 'Drag&Drop image anywhere on screen ' . I want to drop one image on top of another image . The page example is here : https://vmars.us/ShowMe/DragDropAnyWhere-FORUM.html What am I not doing . Should I be using layers ? Here is my code: <!DOCTYPE HTML> <html> <head> <style> html,body { height:100%; } div { height:100%; border-style: double; } </style> <script type="text/javascript"> var OneBall-Charcol = null; var dragging = false; var x; var y; function window_onload() { OneBall-Charcol = document.getElementById("OneBall-Charcol"); if(window.addEventListener) { OneBall-Charcol.addEventListener('mousedown', startDrag); document.body.addEventListener('mousemove', drag); document.addEventListener('mouseout', stopDrag); document.body.addEventListener('mouseup', stopDrag); } } function startDrag(ev) { if(!dragging) { x = ev.clientX - OneBall-Charcol.offsetLeft; y = ev.clientY - OneBall-Charcol.offsetTop; dragging = true; } } function drag(ev) { if(dragging) { OneBall-Charcol.style.left = ev.clientX - x + "px"; OneBall-Charcol.style.top = ev.clientY - y + "px"; } } function stopDrag(ev) { if(dragging) { OneBall-Charcol.style.left = ev.clientX - x + "px"; OneBall-Charcol.style.top = ev.clientY - y + "px"; dragging = false; } } </script> <body onload="window_onload()"> <div> <img id="OneBall-Charcol" src="OneBall-Charcol.png" width="32" height="32" draggable="true"> <br><br> <img id="3-ScaleBoxes-Charcol" src="3-ScaleBoxes-Charcol.png" width="600" height="197" > </div> </body> </html>
×
×
  • Create New...