I'm trying to make a drag/drop excercise, I have a dinamically generated table and a div with a trash bin, so the rows have the "draggable" attribute , but I can't add the "drop" element to my trash bin.
Here is what i'm doing:
<div id="tabla" style="margin:30px auto; display:none;">
<div id="bin" ondrop="drop(event)">
<img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
</div>
<table id="grid" class="grid">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Correo</th>
<th>Password</th>
</tr>
</table>
</div>
And my JS (fragment):
window.onload = function() {
if(localStorage==undefined) {
alert("Éste navegador no soporta Local Storage");
} else {
generarTabla();
if (localStorage.length > 0) {
document.getElementById('tabla').style.display = 'block';
var bote = document.getElementById("bin");
bote.addEventListener("dragleave",handlerLeave,false);
bote.addEventListener("dragover",handlerOver,false);
bote.addEventListener("drop",drop,false);
}
}
}
function drop(e){
if (e.stopPropagation) {
e.stopPropagation(); // stops the browser from redirecting.
}
alert("ola");
}
You need to enable dropping on the target element. Add the ondragover attribute to your div like this:
<div id="bin" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="icono.png" style="width:100px; margin-left:500px;display:inline;"/><p>
</div>
and an allowDrop function such as this:
function allowDrop(e) {
e.preventDefault();
}
Related
I am trying to close the modal by clicking the cross icon which is in the modal and the modal is rendered inside a td and the whole tr is made clickable. I am using tailwind for my CSS. The problem is the modal does not get closed on click the cross icon.
<tr onclick= "show_modal(this)">
<td><%=device&.name%></td>
<td ><%= render partial: 'edit', locals: {device: device}%></td>
</tr>
Partial file(_edit.html.erb)
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn" onclick="close_modal(this)"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
</div>
js i have tried.
window.show_modal =function(e){
let js_modal_container = $(e).find(".js_modal_container")
if ($(this).is("td:last-child")) {
e.preventDefault();
e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
};
$(js_modal_container).removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
window.close_modal = function(e){
let js_modal_container= $(e).closest(".js_modal_container")
a =$(e).closest(".modal_popup")
if ($(a).is("td:last-child")){
// e.preventDefault();
// e.stopPropagation();
$(js_modal_container).addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
// $(js_modal_container).addClass("modal__hidden");
// $(document.body).removeClass("overlay__handler");
}
Consider the following example.
$(function() {
function openModal(e) {
console.log("Open Modal Fired.");
var $this = $(e.target);
console.log($this.text().trim());
var js_modal_container = $(".js_modal_container");
$(".modal-header h5").html($this.prev("td").text().trim());
js_modal_container.removeClass("modal__hidden");
$(document.body).addClass("overlay__handler");
}
function closeModal(e) {
console.log("Close Modal Fired.");
var $this = $(e.target);
var js_modal_container = $this.closest(".js_modal_container");
js_modal_container.addClass("modal__hidden");
$(document.body).removeClass("overlay__handler");
}
$("table tr").on("click", "td:last-child", openModal);
$("i.js_device_modal_close_btn").click(closeModal);
});
table {
width: 340px;
}
td:last-child {
border: 1px solid #222;
border-radius: 6px;
text-align: center;
}
.modal-holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
}
.modal__hidden {
display: none;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>
Device Name 1
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 2
</td>
<td>
Edit
</td>
</tr>
<tr>
<td>
Device Name 3
</td>
<td>
Edit
</td>
</tr>
</table>
<div class="modal-holder js_modal_container modal__hidden">
<div class="modal-header">
<h5>device</h5>
<i class="fas fa-times js_device_modal_close_btn"></i>
</div>
<div class="modal-body">
<!-- modal body -->
</div>
</div>
For ease of use, I have created two functions to use and bound them to click events on various elements in the page. For the Edit item, I used .on() in case they are not available when the page initially loads or if new items are appended.
$(e) is not an element, but an event. We need to look at the Event Target: e.target. This will return an element that can be used as a jQuery Object: $(e.target). I suspect this was the primary issue in your code. The rest is just for clarification of the example.
I have a problem with jQuery toggle between 4 divs. I have no idea why it doesn't work. It just showed me the first div and didn't do anything. When I used it on another webpage, it worked.
Code is below:
HTML:
<table style="width: 75%; border: 0; text-align: center; margin: 0 auto;" align="center" padding="10"><tr>
<td width="50%" align="center"><a class="ukaz" target="1"></a></td>
<td width="50%" align="center"><a class="ukaz" target="2"></a></td></tr>
<tr>
<td width="50%" align="center"><a class="ukaz" target="3"></a></td>
<td width="50%" align="center"><a class="ukaz" target="4"></a></td>
</tr>
</table>
<div id="div1" class="cil" style="display:block;">
text
</div>
<div id="div2" class="cil">
text
</div>
<div id="div3" class="cil">
text
</div>
<div id="div4" class="cil">
text
</div>
CSS:
.cil {
display: none;
}
JS:
jQuery(function () {
jQuery('.ukaz').click(function () {
var index = $(this).index(),
newTarget = jQuery('.cil').eq(index).slideDown();
jQuery('.cil').not(newTarget).slideUp();
});
});
Your current expression finds the index of the clicked element but it doesn't know the context to which element it needs to find index to. You need to find the index of the click element via using all elements matching class .ukaz
$('.ukaz').click(function () {
var index = $('.ukaz').index($(this));
$('.cil').slideUp();
$('.cil').eq(index).slideDown();
});
Example : https://jsfiddle.net/DinoMyte/qgo90beb/1/
I am working on a project right now. When you click on one item the info below appears, i wanted to know how to make it disappear when you click on the next item without reclicking the same item....For example I have pizza's in my project, I want to click meat pizza to see the toppings then click on cheese pizza to see the toppings and the meat toppings disappear.
Here is my Html code....
<table align="center">
<tr>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px;width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv')" href="#Meat">Meat Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px">
<a onclick ="javascript:ShowHide('HiddenDiv2')" href="#Cheese">
Cheese Pizza</a>
</fieldset></td>
<td><fieldset style="border:1px solid red;padding:5px;
margin-bottom:10px; width:200px; height:150px;">
<a onclick ="javascript:ShowHide('HiddenDiv3')" href="#Veggie">
Veggie Pizza</a>
</fieldset></td>
</tr>
</table>
<div class="mid" id="HiddenDiv" style="DISPLAY: none" align="center">
<a name="Meat">
<table>
<tr><td width="220">Meat Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv2" style="DISPLAY: none" align="center">
<a name="Cheese">
<table>
<tr><td width="220">Cheese Toppings</td></tr>
</table>
</a>
</div>
<div class="mid" id="HiddenDiv3" style="DISPLAY: none" align="center">
<a name="Veggie">
<table>
<tr><td width="220">Veggie Toppings</td></tr>
</table>
</a>
</div>
Here is my javascript......
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
function showApp(a) {
var aside = document.getElementById('aside');
var arr = aside.getElementsByTagName('span');
for (i = 0; i < arr.length; i++) {
if (arr[i].getAttribute('id') != a) {
arr[i].style.visibility = 'hidden';
}
}
x = document.getElementById(a);
var state;
if (x.style.visibility == 'visible') {
state = 'hidden';
}
else {
state = 'visible';
}
x.style.visibility = state;
}
Some solutions for example:
You may create global JS element which will contain current showed element and update it every click.
You may on every click hide all elements at first and then show required element.
Add for loop in ShowHide() function like this :
UPDATED
ShowHide = function(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
var alltexts = document.getElementsByClassName('mid');
for(var i=0;i<alltexts.length;i++)
alltexts[i].style.display = 'none';
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
In ShowHide we have to hide all texts before showing the clicked item text .
Find Working Fiddle HERE.
JavaScript:
$( document ).ready(function() {
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
});
And HTML:
<table>
<tr>
<td id="one">
<div class="content" onMouseOver="show('text')" onMouseOut="hide('text')">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
Lorem ipsum is supposed to show when the mouse hovers over the content div, but it doesn't work. It is encased in a table because there are three other content divs that make a 2 by 2 grid.
show is not on the global object, it's in a closure, so when your HTML event handlers tries to call it, it doesn't exist.
Use CSS instead
#text {
visibility: hidden;
}
.content:hover #text {
visibility: visible;
}
Your functions need to be in global scope, outside of document.ready:
$( document ).ready(function() {
//...
});
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
You need to define your two JavaScript functions outside of the jQuery environment/scope.
See below.
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
.content {
border: 1px dotted blue;
}
#text {
visibility: hidden;
}
<table>
<tr>
<td id="one">
<div class="content" onMouseOver="show('text');" onMouseOut="hide('text')">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
It's convenient to use jQuery. Also, try not to put JavaScript directly in the HTML tags. The problem here was a scope issue.
$(".content").hover(function() {
$("#text").show();
}, function() {
$("#text").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td id="one">
<div class="content">
<h1>Heading</h1>
<p id="text">Lorem ipsum</p>
</div>
</div>
</td>
</table>
Just define the functions outside the jQuery scope.
<script>
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
}
</script>
I am trying to make a div auto hide and show other div like changer. It does not work when I use multi div inside the main div:
<div id="div1">
What actually happens is that it hides all content of the inside div(s)
Is there any way to keep my div(s) for save my style and make an auto changer for my div(s)?
html code
<div id='container'>
<div id='div1' class='display' style="background-color: red;">
<div id="mydiv" style=" left:200; width:100; background-color:#F605C6;">
<div id="main_adv" class="a" style="position:absolute;text-align:left;width:673px;height:256px">
<div id="Layer3" class="a" style="position:absolute;text-align:left;left:176px;top:56px;width:490px;height:171px" title=""></div>
<div id="img_adv" class="a" style="position:absolute;text-align:left;left:4px;top:55px;width:169px;height:172px;" title="">
<img id="ri" class="a" src="thumbs/img1.png" />
</div>
<div id="title_adv" class="a" style="position:absolute;text-align:right;left:4px;top:6px;width:662px;height:40px;" title="">
<div style="position:absolute;text-align:right;right:6px;top:4px;">
<span style="color:#000000;font-family:Arial;font-size:29px;right:5px">some text</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id='div2' class='display' style="background-color: green;">
div2
</div>
<div id='div3' class='display' style="background-color: blue;">
div3
</div>
</div>
</body>
Javascript code
$('html').addClass('js');
$(function() {
var timer = setInterval( showDiv, 400);
var counter = 0;
function showDiv() {
if (counter == 0) { counter++; return; }
$('div','#container')
.stop()
.hide()
.filter( function() { return this.id.match('div' + counter); })
.show('fast');
counter == 16? counter = 0 : counter++;
}
});
I wrote some basic code that changes divs continiously like you asked :
jsfiddle.net/5jhuK/
HTML
<div id='container'>
<div id='div1' class='display' style="background-color: red;">div1</div>
<div id='div2' class='display' style="background-color: green;">div2</div>
<div id='div3' class='display' style="background-color: blue;">div3</div>
</div>
CSS
.display {
display: none;
}
JS (jQuery)
$(document).ready(function () {
var activeDiv = 1;
showDiv(activeDiv); // show first one because all are hidden by default
var timer = setInterval(changeDiv, 2000);
function changeDiv() {
activeDiv++;
if (activeDiv == 4) {
activeDiv = 1;
}
showDiv(activeDiv);
}
function showDiv(num) {
$('div.display').hide(); // hide all
$('#div' + num).fadeIn(); // show active
}
});
It's really not complicated, next time when you ask something try to be concise and remove unnecessary code (like #mydiv)
a few things:
1. html ids are unique, so you can just do something like below:
2. your code was missing a # in the find (e.g. "#div"+counter)
3. you can use the child selector ">" to just target divs one level down
var counter=1;
function showDiv() {
$('#container > div').hide()
$("#div"+counter).show();
counter == 3? counter = 1 : counter++;
}