|
What are the limits of HTML? Can you build anything with HTML and CSS that you can build with Java Script?
|
|
|
|
|
Not necessarily as HTML/CSS and Javascript are totally different products.
|
|
|
|
|
how to validate date in calender 15 days before & after
|
|
|
|
|
You're going to have to describe what you mean by "validate" in this context.
Like, are you using todays date and trying to get the date 15 days before that and after?
|
|
|
|
|
|
It's been long enough, so even if this was a homework question, it was probably due already. Soooooo, here ya go. I haven't tested this, but there shouldn't be a bug. Either way, it should at least you get started.
const DATE_OFFSET = 1080000000;
const someDate = Date.parse('25 Dec 2022 00:00:00');
const now = new Date();
const fifteenDaysAgo = new Date(now.getTime() - DATE_OFFSET);
const fifteenDaysFromNow = new Date(now.getTime() + DATE_OFFSET);
console.log((someDate >= fifteenDaysAgo) && (someDate <= fifteenDaysFromNow));
Jeremy Falcon
|
|
|
|
|
If you haven't checked out MDN yet, it's an awesome resource. It's always worth a search or read to see what a built-in JavaScript object can do...
MDN Web Docs
Jeremy Falcon
|
|
|
|
|
Hello & TIA ;
Create a Draggable Clone from id="elem1" , where id="elem1" is draggable="false"; .
The coding problem is here : clone.classList.add('draggable="true"')
Please What is the proper coding ?
Thanks
function cloneElem1(){
var elem = document.querySelector('#elem1');
var clone = elem.cloneNode(true);
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable='true';")
elem.after(clone);
}
</script>
********
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html</title>
<!-- https:
<style>
body {
margin: 20px;
background-color: #FFFFFF;
}
.flex-container {
display: flex;
}
.flex-container > div {
font-size: 20px;
}
#container {
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;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}
.flatOne , .sharpOne , .naturalOne { background-color: #DCDCDC;
z-index: 5;
}
td {margin: auto;
}
#elem1 , #elem2 , #elem3 , #elem4(
)
.flatOne , .one , .sharpOne , naturalOne {
}
#itemContainer { }
#tableContainer { }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}
</style>
</head>
<body>
<div id="outerContainer" ondrop="drop(event)" ondragover="allowDrop(event)" style="background-color: pink; top: 4px; left: 4px; height:200px; border: 4px;"> <!-- BEGIN OF id="outerContainer -->
<div>
X: <span id="x"></span><br>
Y: <span id="y"></span>
</div>
<!-- BEGIN of id="itemContainer" -->
<div id="itemContainer" class="flex-container POS" style=" position: absolute; left: 500px; top; 40px; ">
<div class="item flatOne" id="elem1" onclick="cloneElem1()" style=" z-index:5; left: 100px; background-color: #DCDCDC" > b</div>
<p> </p>
<div class="item one" id="elem2" style=" z-index:5; left: 400px; background-color: #FF0004;" > 1</div>
<p> </p>
<div class="item sharpOne" id="elem3" style=" z-index:5; left: 700px; background-color: #DCDCDC;" > ♯</div>
<p> </p>
<div class="item naturalOne" id="elem4" style=" z-index:5; left: 1000px; background-color: #DCDCDC;" > ♮</div>
</div> <!-- END of id="itemContainer" -->
<div id="tableContainer" style=" position: absolute; top: 155px; left: 55px; "> <!-- BEGIN of id="tableContainer" -->
<table id="fretboardContainer" style=" position: absolute ; width: 1200px;"> <!-- BEGIN of id="fretContainer" -->
<!-- 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 id="r1f1" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 3px solid white; border-top: 4px solid white;"><br>
</td>
<td id="r1f2" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br>
</td>
<td id="r1f3" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br>
</td>
<td id="r1f4" ondrop="drop(event)" ondragover="allowDrop(event)" style="margin: auto; vertical-align: top; border-bottom: 2px solid white; border-top: 4px solid white;"><br>
</td>
</tr>
</tbody>
</table> <!-- END OF fretContainer -->
</div> <!-- END OF tableContainer -->
</div> <!-- END OF id="outerContainer -->
<div style='text-align: center; position:absolute; bottom: 40px;'>Drag and Drop</div>
<!-- BEGIN SCRIPT ZZZZZZZZZZZZZZZZZ -->
<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>
var elemNumber = 0;
</script>
<script>
function cloneElem1(){
var elem = document.querySelector('#elem1');
var clone = elem.cloneNode(true);
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable="true"")
elem.after(clone);
}
</script>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
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>
|
|
|
|
|
|
Instructions:
Go to here: https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html
Open up Console
Click on the 'b' grey circle
Drag the Cloned 'b' grey circle onto the Dark Grey Fretboard .
See Errors in Console.log .
Thanks
These are Errors I am getting .
Code:Copy to clipboard
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
at HTMLTableCellElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:108:171)
Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13)
at HTMLDivElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:82:160)
|
|
|
|
|
|
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" ' , getting Errors:
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)
The Second DnD runs fine .
<pre><!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;
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();
}
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>
https://vmars.us/ShowMe/Drag-n-Drop.mp4
modified 21-Dec-22 20:34pm.
|
|
|
|
|
Only one of your draggable elements has an id. For any of the others, you set the dataTransfer data to an undefined value. When you drop that, you call getElementById(undefined), which returns null. You then pass null to appendChild, which throws the error.
Add a unique id to every element you want to drag, and validate the element when you drop it.
let uid = 0;
function drag(ev) {
const id = e.target.id;
if (!id) {
id = `_auto_generated_id_${uid}`;
e.target.id = id;
uid++;
}
ev.dataTransfer.setData("text", id);
console.debug("drag", e.target, id);
}
function drop(ev) {
ev.preventDefault();
const id = ev.dataTransfer.getData("text");
if (!id) {
console.warn("Drop with no ID", ev.dataTransfer);
return;
}
const element = document.getElementById(id);
if (!element) {
console.warn("Element not found", id);
return;
}
ev.target.appendChild(element);
}
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Ah yes , id="" .
Originally , I used this code:
<script>
var container = document.querySelector("#itemContainer");
var activeItem = null;
var active = false;
container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);
container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);
function dragStart(e) {
if (e.target !== e.currentTarget) {
active = true;
activeItem = e.target;
if (activeItem !== null) {
if (!activeItem.xOffset) {
activeItem.xOffset = 0;
}
if (!activeItem.yOffset) {
activeItem.yOffset = 0;
}
if (e.type === "touchstart") {
activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
} else {
console.log("Dragging something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function drag(e) {
if (active) {
if (e.type === "touchmove") {
e.preventDefault();
activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
} else {
activeItem.currentX = e.clientX - activeItem.initialX;
activeItem.currentY = e.clientY - activeItem.initialY;
}
activeItem.xOffset = activeItem.currentX;
activeItem.yOffset = activeItem.currentY;
setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
}
}
function setTranslate(xPos, yPos, el) {
el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}
</script>
But the Cursor keeps loosing the Target , as you can view here ,
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html
Forcing me to keep going back and Grabbing Target again & again .
Which forces me to Drag at a sloth's pace .
Otherwise it works fine for class= .
So I was trying to find a better/FASTER solution , as in RedDot code above ;
unfortunately , I forgot the id= business .
Why not use id= as in here :
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
If you view the html source , you will see that every .item has 6-duplicates ;
which turns out to be 7 x 7 = 49 .items .
So if I use id= I'll have to code 49 unique id='s .
So , I plan to Post a new thread , asking 'For a.js vs b.js , why is a.js so much Faster than b.js ? ' .
Faster meaning , "NOT Grabbing Target again & again " .
Sound reasonable ?
Thanks for your Help...
|
|
|
|
|
So... I'm using notepad++ for my codes and this is the code i am trying to run. It returns a blank alert everytime. How can i fix this?
document.cookie="Firstname=Spongebob";
alert(document.cookie);
|
|
|
|
|
It's most likely how you're viewing the page. Most browsers don't support cookies over the file:/// protocol. Which is to say, you may wish to spin up a local web server for development. Will make your life a lot easier.
Jeremy Falcon
|
|
|
|
|
Did you check this in the Developer tool of your browser?
|
|
|
|
|
why javascript onchange not triggered for textbox when characters are in persian? but it triggers when characters are in english.
here are the codes:
javascript codes :
function field_changed(nvalue,fid){
alert("hello");
}
|
|
|
|
|
There's probably something wrong with the way you've wired up the event handler. But since you haven't shown that part of your code, we can't tell you.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
why html tag not posted ?
|
|
|
|
|
You need to escape it. Don't use a < when typing out tags. Use < instead.
<strong>I'm HTML!</strong> Has to be entered like <strong>I'm HTML!</strong>.
Jeremy Falcon
|
|
|
|
|
Hello everyone
I’m practicing eventListener() with This dodger game
how ever when I try to move the dodger to the right side without going off the container(The dodger width is 40px) it doesn’t work here is my codepen https://codepen.io/bluesky1992-web/pen/PoeLrzJ[^]
any hint will be greatly appreciated .
|
|
|
|
|
You don't have the game object being defined. You should have a const game = document.getElementById("game"); in there. There's also a syntax error of const const causing problems. Once you define game you should see it working as expected.
Jeremy Falcon
|
|
|
|
|
Can anyone please help me. I have sidebar there are list of form fields. when I drag a field it will not fired outer drop event instead it fires the inner drop event.Inside the drop area I have added Drag and Drop Sortable List for sort the fields when the user drag the fiels.I have also added event propergation event handling but can't work. Here I attached the code
<template>
<div>
<v-card tile>
<v-row>
<v-col cols="2" class="pa-0">
<div id="component-section">
<v-expansion-panels focusable v-model="expandedPanel">
<v-expansion-panel v-for="(item, propertyName, index) in listOfFields" :key="index">
<v-expansion-panel-header style="background-color:grey;color:white">
<span> {{propertyName}} </span>
</v-expansion-panel-header>
<v-expansion-panel-content class="pa-0 drag-el" v-for="(item, Itemindex) in
listOfFields[propertyName]" :key="Itemindex">
<v-chip outlined draggable label small @dragstart="startDrag($event ,item)"
color="primary" class="ma-0 hover--class" style="border-radius:0px">
{{item.text}}
</v-chip>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</v-col>
<v-col cols="10">
<div class="parent-div">
<div class="drop-zone"
<a href="https://www.codeproject.com/Members/drop">@drop</a>="onDrop($event, 1)"
@dragover.prevent @dragenter.prevent style="height:inherit;width:100%">
<v-row v-if="listOfAddedFields && listOfAddedFields.length" id='fieldDroppingArea' class="ma-2">
<template v-for="(item, index) in listOfAddedFields">
<v-col class="pa-1" :id="item.name" cols="6" :key="index">
<template v-if="item.type === 1">
<v-text-field dense outlined hide-details :label="item.name"></v-text-field>
</template>
<template v-if="item.type === 2">
<v-textarea outlined :label="item.name" dense>
</v-textarea>
</template>
</v-col>
</template>
</v-row>
</div>
</div>
</v-col>
</v-row>
</v-card>
<v-dialog v-model="dialog" fullscreen hide-overlay transition="dialog-bottom-transition">
<v-card>
<v-toolbar dense dark color="primary">
<v-btn icon fixed left="" <a href="https://www.codeproject.com/Members/cLick">@click</a>="dialog = false">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-toolbar>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog: false,
dragging: false,
showText: true,
dropAreaHeight: 100,
expandedPanel: 0,
isDragging: false,
listOfFields: {
standard: [{
text: 'Text field',
value: 1,
showText: true
}, {
text: 'Text area',
value: 2,
showText: true
}, {
text: 'Checkbox',
value: 3,
showText: true
}, {
text: 'Radio',
value: 4,
showText: true
}, {
text: 'Select',
value: 5,
showText: true
}, {
text: 'Date',
value: 6,
showText: true
}, {
text: 'Time',
value: 7,
showText: true
}]
},
listOfAddedFields: [{
type: 1,
name: 'text1',
},
{
type: 1,
name: 'text2',
},
{
type: 2,
name: 'texarea1',
},
{
type: 2,
name: 'texarea2',
},
{
type: 2,
name: 'texarea3',
}
],
getChildrens: []
}
},
mounted() {
this.sortingList(document.getElementById('fieldDroppingArea'))
},
methods: {
startDrag(event, item) {
this.showText = false
event.dataTransfer.dropEffect = 'move'
event.dataTransfer.effectAllowed = 'move'
event.dataTransfer.setData('itemID', item.value)
this.dragging = true
},
onDrop(event) {
console.log('mainDrop')
const itemID = event.dataTransfer.getData('itemID')
if (itemID) this.dialog = true
},
sortingList(target) {
this.getChildrens = target.children
let current = null
if (this.getChildrens.length) {
for (let i of this.getChildrens) {
i.draggable = true
i.addEventListener('dragstart', (ev) => {
console.log(i)
current = i
})
i.addEventListener('dragover', (evt) => {
evt.preventDefault()
evt.stopPropagation()
})
i.addEventListener('drop', (evt) => {
console.log('innerDrop....')
evt.preventDefault()
evt.stopPropagation()
let currentpos = 0
let droppedpos = 0
for (let it = 0; it < this.getChildrens.length; it++) {
if (current == this.getChildrens[it]) {
currentpos = it
console.log(currentpos)
}
if (i == this.getChildrens[it]) {
droppedpos = it
}
}
if (currentpos < droppedpos) {
i.parentNode.insertBefore(current, i.nextSibling);
} else {
i.parentNode.insertBefore(current, i);
}
}, true)
}
}
},
}
}
</script>
<style scoped>
.hover--class {
cursor: move;
}
.parent-div {
border:3px dashed skyblue;
margin-top:10px;
margin-right:10px;
padding:10px;
height:100%
}
</style>
modified 1-Oct-22 5:47am.
|
|
|
|
|
I'm assuming this is in Vue. You may have better luck getting an answer if you isolate the issue a bit to help us out.
Jeremy Falcon
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
