hello does anybody know how to call a JavaScript function from a div?
my div and function look like this:
#foreach(var c in Model.matrix.Cells)
{
<tr>
<td class="tdHouse" >
<div onload="styleCell(event)" class="cell" id="styleCell" ondrop="drop(event,#c.row,#c.column)" ondragover="allowDrop(event)" alt="one">
</div>
<label hidden id="#c.room.Id" class="existRoomStyle" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="#c.room.roomName" style= "background-color:#c.room.color"> #c.room.roomName</label>
<img hidden id="#c.socket.Id" alt="existSocket" class="existSocketStyle" src="~/Images/socket.jpg" draggable="true" ondragstart="drag(event)" onmouseup="dragMouseUp(event)" title="socket" alt="one"/>
<img hidden id="#c.socket.machine.Id"class="existMachineStyle" src="~/Images/MachineImages/#c.socket.machine.Image" draggable="true" ondragstart="drag(event)" title="machine" alt="one"/>
</td>
</tr>
}
<script>
function styleCell(ev) {
ev.target.children[0].appendChild(document.getElementById("existRoomStyle"));
ev.target.children[0].appendChild(document.getElementById("existSocketStyle"));
ev.target.children[0].appendChild(document.getElementById("existMachineStyle"));
}
</script>
You can't call onload this way.
w3schools list where no-load is applicable
You must separate the function call from the div.
See this answer
How to add onload event to a div element?
Related
I'm new to jQuery and I have some issues to stop the scrolling effect. For context, I use this code for hide and show some section on button click.
This is my code:
jQuery(function($) {
$('.rv_button1').click(function(e) {
e.preventDefault();
$("#reveal1").slideToggle();
$('.rv_button1').toggleClass('opened closed');
});
});
I use wordpress with divi theme, the html is not really clear but this part is where my jQuery function is made for (sorry for my English though)
<div class="et_pb_button_module_wrapper et_pb_button_0_wrapper et_pb_button_alignment_center et_pb_module ">
<a class="et_pb_button et_pb_button_0 rv_button et_pb_bg_layout_light opened" href="http://valerieb30.sg-host.com/notre-equipe/#reveal">Québec</a>
</div>
<div id="reveal" class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters2" style="display: block;">
<div class="et_pb_column et_pb_column_4_4 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child">
<div class="et_pb_module et_pb_text et_pb_text_0 et_pb_text_align_left et_pb_bg_layout_light">
<div class="et_pb_text_inner"><h2>Cuisinistes</h2></div>
</div>
<div class="et_pb_module et_pb_de_mach_archive_loop et_pb_de_mach_archive_loop_0 main-loop loadmore-align- grid-layout-grid main-archive-loop
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<div class="label">Akita Inu</div>
<div class="box-wrapper">
<div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="corgi.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
</div>
<div class="label">Cockapoo</div>
<div class="box-wrapper">
<div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="akitainu.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
</div>
<div class="label">Corgi</div>
<div class="box-wrapper">
<div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="cockapoo.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
</div>
<div class="label">Shiba Inu</div>
<div class="box-wrapper">
<div class="box-left" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div class="box-right" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="shibaInu.jpeg" draggable="true" ondragstart="drag(event)" width="600" height="250"></div>
</div>
When I am dragging pictures to another divs it is always a Corgi picture appears for some reason. I tried using html5_draganddrop w3schools guide to make it but there is only one picture with two divs and I have multiple pictures and multiple divs and as I understand this guide doesn't work for me
The problem in your code is that all of the images have the same id. To take this a step further, if you want to have a custom image show when dragging you can do the following.
In the dragstart event handler you want to add the drag image. The second and third parameters in the setDragImage function are X and Y offsets. You can view more information about this at: https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/setDragImage
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
let img = new Image();
img.src = 'https://www.somedomain.com/myimage.png';
ev.dataTransfer.setDragImage(img, 10, 19);
}
I'm using the HTML Drag/Drop API W3schools is suggesting (w3schools html drag/drop api)
I'm trying to make something like moving objects from 1 bag to another.
All is working fine so far except when I somehow misclick and drag 1 picture onto the other(instead into free space in the div).
Then the dropped picture is disappearing. When I check the html code, I can see that the dropped img went under the first img.
Probably because of the "child" element in the js code i guess. That is where I need help.
How do I prevent that so I can only drop the images into the divs but not into other images?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
#div1, #div2 {
float: left;
width: 100px;
height: 350px;
margin: 10px;
padding: 10px;
border: 1px solid black;
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">Bag1
<img src="https://www.w3schools.com/html/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">Bag2
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31">
</div>
</body>
</html>
just found the answer...
change the drop function to:
function drop(ev, el) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
el.appendChild(document.getElementById(data));
}
and when you call the function:
<div id="div1" ondrop="drop(event, this)" ondragover="allowDrop(event)">
thats it. found the answer here: prevent drop inside a child element when drag & dropping with JS
I'm not sure how to ask this question so below is an visualization of what I want to achieve.
Please let me know if there is anything I can clarify!
Clarification:
At slide one, image 01 and image 02 are visible. Only when the person clicks on the images does the text and title div become visible. More importantly, the text box must be coherent with the page-wrapper. For example, if I were to set the text div to float:right, it will float on the right side of the page-wrapper.
Thank you in advance.
You need some javascript to get this behaviour i think. You can try something like this:
Everything in a little bit pseudo code.
HTML:
<img src="..." class="img1 clickImage">
<img src="..." class="img2 clickImage">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
And some jQuery:
jQuery('.clickImage').on('click', function() {
var imgNumber = jQuery(this).getClass().replace('clickImage', '');
jQuery('imageTitles .imgTitle').hide(); //hide all image Titles
jQuery('imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1
//repeat this for imgInformation
});
Everything a little bit rough, but i hope it gives you an idea what you need to do.
EDIT:
Code now looks like this:
HTML:
<img src="http://media.tumblr.com/tumblr_mcepyv1Qfv1ru82ue.jpg" class="img1 clickImage">
<img src="http://media.tumblr.com/tumblr_mcf11pk4nj1ru82ue.jpg" class="img2 clickImage">
<div id="page-wrap">
<div class="imageTitles">
<div class="img1 imgTitle">TITLETEXT</div>
<div class="img2 imgTitle">TITLETEXT</div>
</div>
<div class="imageInformations">
<div class="img1 imgInformation">INFORMATION img1</div>
<div class="img2 imgInformation">INFORMATION img2</div>
</div>
</div>
JS:
jQuery('.imageTitles .imgTitle').hide();
jQuery('.imageInformations .imgInformation').hide();
jQuery('.clickImage').on('click', function () {
var imgNumber = jQuery(this).attr("class").replace('clickImage', '');
jQuery('.imageTitles .imgTitle').hide(); //hide all image Titles
jQuery('.imageTitles .imgTitle.' + imgNumber).show(); //show title for e.g. img1
jQuery('.imageInformations .imgInformation').hide();
jQuery('.imageInformations .imgInformation.' + imgNumber).show();
});
There are many ways to achieve this.
1) with every thing static, ie info about image is already available in the page in different div's.
ex: working
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.switch').hide();
});
function myInfo(myId)
{
$('.switch').hide();
$('#title'+myId).show();
$('#description'+myId).show();
}
</script>
<table>
<tr>
<td>
<!-- Images -->
<img onclick="return myInfo('1')" id='image1' height="60" width="60" src="http://static3.businessinsider.com/image/52cddfb169beddee2a6c2246/the-29-coolest-us-air-force-images-of-the-year.jpg" alt="Image1"><br/>
<img onclick="return myInfo('2')" id='image1' height="60" width="60" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcR6I83EILo3XKIsqZ-0Q5JAEw38xGzsy1g_iKImqjBrMVaOHYb4Zg" alt="Image2">
</td>
<td>
<div id="title1" class="switch"> Image 1</div>
<div id="title2" class="switch"> Image 2</div>
</td>
<td>
<div id="description1" class="switch"> Information about Image 1 </div>
<div id="description2" class="switch"> Information about Image 2 </div>
</td>
</tr>
</table>
2) You can achieve this using AJAX calls for image information, in this case only 1 div for title and 1 for info is enough i you want to use else 1 div is enough. On click of image make an AJAX call to get the image info and display it in the div.
These are 2 ways and there are many more.
I want to create a "drag and drop" for a "fill the gaps" style question, then submit this data through a HTML form.
Example:
I have looked at a few ways of doing this, such as dragging and dropping images - not what I want, or dragging and dropping elements* on a page but I can't figure out how I can make this in to a form input.
Apologies for the W3 Schools link, I know they are not liked around here
Modifying the example you linked gives you:
<!DOCTYPE HTML>
<html>
<head>
<style>
.draggable {background-color:#00ff00;margin:5px;padding:3px;}
#div1,#div2 {display:inline-block;min-width:25px;min-height:10px;border-style:solid;border-width:0px;border-bottom-width:2px;}
</style>
<script>
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.parentNode.replaceChild(document.getElementById(data), ev.target);
document.getElementById(data).className = "";
}
</script>
</head>
<body>
<span class="draggable" id="drag1" draggable="true" ondragstart="drag(event)">drag</span>
<span class="draggable" id="drag2" draggable="true" ondragstart="drag(event)">drop</span>
<br />
This is a sample
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
and
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
sentence.
</body>
</html>
Here's a fiddle of it to play with.