I have three divs with a title and an image in an other, bigger div. I'm trying to drag and drop them around, but if I drop it above an other div they drop in each other. How can I disable de divs with the image as a dropzone?
I worked with JavaScript, HTML and css.
<div class=dirFiles>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
<div draggable='true' onmousedown='ablegenVerbieten()' class='file'>
<p>Title</p>
<img></img>
</div>
</div>
<script>
function ziehen(ev) {
ev.dataTransfer.setData('text', ev.target.id);
}
function ablegenErlauben(ev) {
ev.preventDefault();
}
function ablegenVerbieten(ev) {
oevent.preventDefault ? event.preventDefault() : event.returnValue = false;
}
function ablegen(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData('text');
var target = ev.target;
while (" "+target.className+" ".indexOf(" dirFiles ") == -1) target = target.parentNode;
target.appendChild(document.getElementById(data));
}
window.addEventListener("load",function () {
var elms = document.querySelectorAll(".dirFiles");
for (var i = 0; i < elms.length; i++) {
var dirFiles = elms[i];
dirFiles.addEventListener("drop",ablegen);
dirFiles.addEventListener("dragover",ablegenErlauben);
};
elms = document.querySelectorAll("[draggable=true]")
for (var i = 0; i < elms.length; i++) {
var draggable = elms[i];
draggable.addEventListener("dragstart",ziehen);
};
});
</script>
Related
hi happy new year for all I have this problem with .style it shows this error in the console
Uncaught TypeError: Cannot read property '0' of undefined
at HTMLImageElement.show (Slideshowmodal.js:15)
do you have any idea what I am messing up ?
initmodal();
function initmodal()
{
modalclick = document.getElementsByClassName('Slideshowimg');
for (i = 0; i < modalclick.length; i++)
{
modalclick[i].onclick = function show()
{
Modalarts = this.parentNode.parentNode.getElementsByClassName("modalria");
for (j = 0; j < this.parentNode.children.length; j++)
{
this.Modalarts[j].style.display = "block";
if (this.parentNode.children[j] == this)
{
index = j;
}
}
this.Modalarts[index].style.display = "block";
}
}
};
<div id="myModalriaArt" class="modalria">
<span class="closer cursor" onclick="closeModal()">×</span>
<div class="modal-content-ria">
<img class="Slideshowimgmodal" src="./imgs/Riaarts/1/Main1.jpg"
style="width:100%" alt="You left a big holedasdasda 30x40">
<img class="Slideshowimgmodal" src="./imgs/Riaarts/1/RA1Z2.jpg"
style="width:100%" alt="You left a big hole 30x40">
<!-- -->
</div>
</div>
initmodal();
function initmodal() {
modalclick = document.getElementsByClassName('Slideshowimg');
for (i = 0; i < modalclick.length; i++) {
modalclick[i].onclick = function show() {
Modalarts = this.parentNode.parentNode.getElementsByClassName("modalria");
for (j = 0; j < this.parentNode.children.length; j++) {
this.Modalarts[j].style.display = "block";
if (this.parentNode.children[j] == this) {
index = j;
}
}
this.Modalarts[index].style.display = "block";
}
}
};
const cross = document.getElementById('cross')
.addEventListener('click', () => {
document.getElementById("myModalriaArt").style.display= "none";
},false);
<div id="myModalriaArt" class="modalria">
<span id="cross" class="closer cursor">×</span>
<div class="modal-content-ria">
<img class="Slideshowimgmodal" src="./imgs/Riaarts/1/Main1.jpg" style="width:100%"
alt="You left a big holedasdasda 30x40">
<img class="Slideshowimgmodal" src="./imgs/Riaarts/1/RA1Z2.jpg" style="width:100%"
alt="You left a big hole 30x40">
</div>
</div>
Modalarts is defined as a local variable, so no need for "this" in front.
I want the data-tags attribute on the Storepoint map to be "hope-for-men" if the "Healing for Men" div is selected and "betrayal & beyond" if the "Healing for Women" div is selected. I've tried looking at posts with similar goals, but I don't know enough about conditional programming to figure it out.
<div class="spouse-men-box eight columns alpha center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-men-content')">
<h3 class="mB25 white">Healing for Men</h3>
</div>
</div>
<div class="spouse-women-box eight columns omega center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-women-content')">
<h3 class="mB25 white">Healing for Women</h3>
</div>
</div>
<div id="storepoint-container" data-tags="hope for men" data-map-id="158752ddce0df0"></div><script>(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="https://cdn.storepoint.co/api/v1/js/158752ddce0df0.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);}());</script>
<script>// <![CDATA[
function openGroup(evt, groupName) {
var i, groupcontent, groupboxes;
groupcontent = document.getElementsByClassName("groupcontent");
for (i = 0; i < groupcontent.length; i++) {
groupcontent[i].style.display = "none";
}
groupboxes = document.getElementsByClassName("groupboxes");
for (i = 0; i < groupboxes.length; i++) {
groupboxes[i].className = groupboxes[i].className.replace(" active", "");
}
document.getElementById(groupName).style.display = "block";
evt.currentTarget.className += " active";
}
// ]]></script>
You can try:
document.getElementById('storepoint-container')
.setAttribute('data-tags', groupName === 'spouse-men-content' ? 'hope-for-men' : 'betrayal & beyond')
Write a new value to the data-attribute:
document.getElementById('storepoint-container').dataset.tags = 'some new value'
You have to do it in your openGroup function (I've done it in the end, commented everything out that didn't work):
function openGroup(evt, groupName) {
var i, groupcontent, groupboxes;
// not working:
// groupcontent = document.getElementsByClassName("groupcontent");
// for (i = 0; i < groupcontent.length; i++) {
// groupcontent[i].style.display = "none";
// }
groupboxes = document.getElementsByClassName("groupboxes");
for (i = 0; i < groupboxes.length; i++) {
groupboxes[i].className = groupboxes[i].className.replace(" active", "");
}
//not working: document.getElementById(groupName).style.display = "block";
evt.currentTarget.className += " active";
// this is the relevant part:
var storepointContainer = document.getElementById('storepoint-container');
if (groupName === 'spouse-men-content') {
storepointContainer.dataset.tags = 'hope-for-men';
} else {
storepointContainer.dataset.tags = 'betrayal & beyond';
}
}
<div class="spouse-men-box eight columns alpha center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-men-content')">
<h3 class="mB25 white">Healing for Men</h3>
</div>
</div>
<div class="spouse-women-box eight columns omega center">
<div class="groupboxes" onclick="openGroup(event, 'spouse-women-content')">
<h3 class="mB25 white">Healing for Women</h3>
</div>
</div>
<div id="storepoint-container" data-tags="hope for men" data-map-id="158752ddce0df0"></div>
I want to change the CSS of a parent div if I click the child of its parent div, not, for example if I click href tag. I want to change the CSS of its class="changed_area".
How can I do this?
var up_btn = document.getElementsByClassName('up_btn');
var up_btn_length = up_btn.length;
var changed_area = document.getElementsByClassName('changed_area');
var changed_area_length = changed_area.length;
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
//alert('welcome');
for (var i = 0; i < changed_area_length; i++) {
if (changed_area[i].style.top == '-100%') {
changed_area[i].style.top = '0%';
}
else {
changed_area[i].style.top = '-100%';
}
}
});
}
<?php foreach($questions As $question): ?>
<div class="changed_area" style="width: 100px;">
<div class="inside_ajax_part1">
<div id="inside_left">
<img src="<?php echo $Filter_customer->image; ?>" />
</div>
<div id="inside_right">
<a class="up_btn" href="#">Up</a>
</div>
</div>
<div class="inside_ajax_part2">
<p>mohammed</p>
</div>
</div>
<?php endforeach; ?>
I think you can do something like this : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
EDIT : better way to do this
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function(){
var changed_area = up_btn[i].parentElement;
if ( changed_area.classList.contains('changed_area') ) {
changed_area.classList.remove('changed_area')
}
else {
changed_area.classList.add('changed_area')
}
if(changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
});
}
Just add event listener on parent and use currentTarget
const parent = document.getElementsByClassName('changed_area');// select parent
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener('click', (ev) => ev.currentTarget.className = 'clicked');
}
Here is fiddle for it
Your code affects all of your divs with class "changed_area", That I don't think it is what you intend.
To access a parent element with javascript you can use parentElement. To get the parent of parent of parent.... that meets some condition (like having a class) you can do this:
function Get_changed_area(targetElement){
var parent = targetElement.parentElement;
if(parent.hasClass('changed_area'))
return parent;
else Get_changed_area(parent) //repeat the function for parent
}
for (var i = 0; i < up_btn_length; i++) {
up_btn[i].addEventListener('click', function() {
changed_area = Get_changed_area(up_btn[i]);
if (changed_area.style.top == '-100%') {
changed_area.style.top = '0%';
}
else {
changed_area.style.top = '-100%';
}
}
}
I'am making a game. You can choose one bokser out of three as your own bokser. Than you can choose the enemy, also one image out of three. After you choose your own bokser and the enemy. Both images has to be visible the rest invisible.
This is my HTML
<div id="jouwbokser">
<h1>Kies Jouw Bokser!</h1>
<img id="bokser1" src="img/bokser1.png" alt="bokser" /><!--Bron:proksa.pl-->
<img id="boker2" src="img/bokser2.png" alt="bokser2" /><!--Bron:www.weekendowo.pl-->
<img id="bokser3" src="img/bokser3.png" alt="bokser3" /><!--Bron:www.ufc.com-->
</div>
<div id="computer">
<h1>Kies je Tegenstander</h1>
<img id="bokser4" src="img/bokser1.png" alt="bokser" /><!--Bron:proksa.pl-->
<img id="bokser5" src="img/bokser2.png" alt="bokser2" /><!--Bron:www.weekendowo.pl-->
<img id="bokser6" src="img/bokser3.png" alt="bokser3" /><!--Bron:www.ufc.com-->
</div>
Has anyone an idea how?
https://jsfiddle.net/o7m1w2qk/
There is a huge amount of how to do this. It's all depend on your requirements, environment, browsers support, whatever.
For example using jQuery:
$("img").on("click", function() {
var $this = $(this);
var $div = $this.parent();
$div.addClass("has-selected");
$("img", $div).removeClass("selected");
$this.addClass("selected");
});
CSS:
#jouwbokser.has-selected > img:not(.selected),
#computer.has-selected > img:not(.selected) {
display: none;
}
https://jsfiddle.net/o7m1w2qk/1/
UPDATE
Non jQuery solution:
var onclickImg = function(event) {
var img = event.target;
var div = img.parentElement;
for (var i = 0; i < div.children.length; i++) {
var child = div.children[i];
if (child.nodeName != "IMG") {
continue;
}
child.className = "";
}
div.className = "has-selected";
img.className = "selected";
}
imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
imgs[i].addEventListener('click', onclickImg);
}
https://jsfiddle.net/o7m1w2qk/3/
When I try to get child div IDs within each parent div/class I get the error "Uncaught TypeError: Cannot set property '0' of undefined". I am using this javascript with scriptaculous so I have turned off the "$" shortcut.
Example HTML:
<div id="group1" class="section">
<h3 class="handle"><input type="hidden" name="groupName1" value="MyGroup1">MyGroup1</h3>
<div id="item_73548" class="lineitem">item a</div>
<div id="item_73386" class="lineitem">item b</div>
<div id="item_73163" class="lineitem">item c</div>
</div>
<div id="group2" class="section">
<h3 class="handle"><input type="hidden" name="groupName2" value="MyGroup2">MyGroup2</h3>
<div id="item_73548" class="lineitem">item d</div>
<div id="item_73386" class="lineitem">item e</div>
<div id="item_73163" class="lineitem">item f</div>
</div>
The Javascript:
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);
The output should be:
groups[0][0]="item_73548";
groups[0][1]="item_73386";
groups[0][2]="item_73163";
groups[1][0]="item_73548";
groups[1][1]="item_73386";
groups[1][2]="item_73163";
Fiddle here: http://jsfiddle.net/qy9dB/3/
You just need to make sure that groups[i] is setup as an array before you try and add 2nd level elements to the array.
$.noConflict();
var sections = document.getElementsByClassName('section');
var groups = new Array();
for (i = 0; i < sections.length; i++) {
var section = sections[i];
var sectionID = section.id;
groups[i] = [];
var j = 0;
jQuery.each(jQuery("#" + sectionID + " .lineitem"), function () {
groups[i][j] = jQuery(this).attr('id');
j++;
});
}
console.log(groups);