In my site I made a simple dropdown menu, but my problem is that it won't close if mouseleave happens on the <span> that triggers the dropdown.
Here is my code:
//Find the dropdown span
var header = document.getElementById('drop');
//Find the ul with the links
var ul = document.getElementById('nav-dropdown');
//Get the width and apply it to the dropdown items
var width = drop.getBoundingClientRect().width;
ul.style.minWidth = width + "px";
//Round the corners on the last link
var links = document.getElementsByClassName('dropdown-link');
links[links.length - 1].style.borderRadius = "0 0 7px 7px";
var open = 0;
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
//What I've tried to fix it:
/*
header.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
});
*/
/*Stylesheet for this stuff*/
* {
font-family: arial;
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 20px;
text-decoration: none;
list-style: none;
}
a:visited {
color: white;
}
a,
#drop {
color: white;
}
a:hover {
color: coral;
}
.header-links-container {
position: relative;
top: 0;
background: rgb(63, 83, 95);
width: 100%;
height: 80px;
opacity: .8;
z-index: 999;
}
.title {
font-weight: bold;
font-size: 30px;
padding: 20px 50px;
position: relative;
float: left;
color: white;
}
.header-links {
position: relative;
float: right;
vertical-align: middle;
}
.nav-links {
margin: auto;
padding-top: 20px;
padding-right: 30px;
}
.nav-link {
position: relative;
float: right;
padding: 0 20px;
font-size: 23px;
padding: 5px 10px;
margin: 5px;
background: #4471ba;
border-radius: 7px;
}
.nav-link:hover {
background: #4480ba;
color: #d1d1d1;
}
#nav-dropdown {
display: none;
margin-top: 42px;
margin-left: 5px;
position: absolute;
}
.dropdown-link {
color: black;
background-color: #ccc;
padding: 5px 10px;
}
.dropdown-link:hover {
color: #000;
background-color: #a7a7a7;
}
.dropdown-link:active {
color: white;
background-color: #3b8cfa;
}
<div class="header-links-container">
<h2 class="title">Title</h2>
<div class="header-links">
<ul class="nav-links">
<li class="nav-link">Photo Gallery</li>
<li class="nav-link">SLAP</li>
<li id="drop" class="nav-link"><span>Dropdown</span></li>
<ul id="nav-dropdown" class="jim">
<a href="#">
<li class="dropdown-link">Link 1</li>
</a>
<a href="#">
<li class="dropdown-link">Link 2</li>
</a>
<a href="#">
<li class="dropdown-link">Longer Link</li>
</a>
<a href="#">
<li class="dropdown-link">Vacuum</li>
</a>
</ul>
</ul>
</div>
</div>
<p>
Relavent JS lines start at Line 16
</p>
And here is the fiddle that might make more sense: https://jsfiddle.net/dLw1hu5n/6/
I've tried closing the dropdown like in the last code block, but then it won't stay open when you go to hover over the links. I've also tried making the menu close when the mouse hovers over the navbar div, but no luck there either.
Can I fix this or do I need to start from square 1?
I would prefere to solve this via css. However, in your case you can try the following:
function displayDropdown() {
ul.style.display = "block";
header.style.borderRadius = "7px 7px 0 0";
if (links[0].getBoundingClientRect().width > width) {
links[0].style.borderRadius = "0 7px 0 0";
}
open = 1;
}
function hideDropdown() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
}
//Onhover, display the dropdown;
header.addEventListener("mouseover", function() {
displayDropdown();
});
ul.addEventListener("mouseover", function() {
displayDropdown();
});
//When the mouse leaves the menu, close it.
ul.addEventListener("mouseleave", function() {
hideDropdown();
});
header.addEventListener("mouseleave", function() {
hideDropdown();
});
Your JS is fine but your event listener for mouseleave needs to be on the enclosing div. This way your element stays open until you hover outside of the header
t.addEventListener("mouseleave", function() {
ul.style.display = "none";
header.style.borderRadius = "7px";
open = 0;
});
What is t?
var t = document.getElementById(t);
What element has id T?
Try this fiddle to find out https://jsfiddle.net/dLw1hu5n/12/
Related
I have a navigation bar. In it, I have some anchors. One of the anchors has the text 'Guides'. I want a div to appear when I hover over the anchor, and I want it to remain on the screen as long as I am hovering over the anchor. I also want the the div to remain on the screen as long as I am hovering over the div itself. All of this is working fine. When I scroll down, I decrease the size of the navigation bar and change the top position of the div. After I do this, the eventListener that I have set up to keep the div on the screen as long as I am hovering over it stops working. Please note that the div still appears when I hover over the anchor, and it remains on the screen as long as I am hovering over it.
Here's the code. The div is the one with id="dropdown-guides":
// Show dropdown on hovering over 'guides' in navigation bar
let guidesAnchor = document.querySelector('#nav-anchor-guides')
let guidesDropdown = document.querySelector('#dropdown-guides')
function showGuidesDropdown() {
guidesDropdown.style.display = 'block'
}
function hideGuidesDropDown() {
guidesDropdown.style.display = 'none'
}
guidesAnchor.addEventListener('mouseenter', showGuidesDropdown)
guidesAnchor.addEventListener('mouseleave', hideGuidesDropDown)
guidesDropdown.addEventListener('mouseenter', showGuidesDropdown)
guidesDropdown.addEventListener('mouseleave', hideGuidesDropDown)
// Show search bar on clicking search icon
let searchIcon = document.querySelector('#search-icon_anchor')
let searchBar = document.querySelector('#search-bar')
searchIcon.addEventListener('click', function() {
if (searchBar.style.display === 'none') {
searchBar.style.display = 'block'
} else {
searchBar.style.display = 'none'
}
})
// Change navigation bar on scrolling down
let navBar = document.querySelector('nav')
let mainIcon = document.querySelector('#nav-main-icon')
let navAnchors = document.querySelectorAll('nav a')
let iconDesignGuideAnchor = document.querySelector('#nav-dropdown-guides-icon-design-guide')
let pixelPerfectIconsAnchor = document.querySelector('#nav-dropdown-guides-crafting-pixel-perfect-icons')
let dribbbleAudienceAnchor = document.querySelector('#nav-dropdown-guides-build-your-dribbble-audience')
window.onscroll = () => {
if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
navBar.style.height = '42px'
navBar.style.paddingTop = '10px'
navBar.style.boxShadow = '0px 0px 7px #0000001A'
mainIcon.style.top = '10px'
mainIcon.style.width = '97px'
mainIcon.style.height = '30px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '14px'
navAnchor.style.height = '23px'
})
guidesDropdown.style.top = '42px'
searchBar.style.top = '52px'
iconDesignGuideAnchor.style.top = '65px'
pixelPerfectIconsAnchor.style.top = '108px'
dribbbleAudienceAnchor.style.top = '174px'
} else {
navBar.style.height = '80px'
navBar.style.paddingTop = '0px'
navBar.style.boxShadow = 'none'
mainIcon.style.top = '18px'
mainIcon.style.width = '139px'
mainIcon.style.height = '43px'
navAnchors.forEach(navAnchor => {
navAnchor.style.top = '28px'
navAnchor.style.height = '52px'
})
guidesDropdown.style.top = '80px'
searchBar.style.top = '80px'
iconDesignGuideAnchor.style.top = '103px'
pixelPerfectIconsAnchor.style.top = '146px'
dribbbleAudienceAnchor.style.top = '212px'
}
}
body {
margin: 0;
font-family: "Open Sans", Arial, sans-serif;
}
nav {
width: 100%;
height: 80px;
position: fixed;
border-bottom: 1px solid #E5E5E5;
z-index: 1;
background-color: #FFFFFF;
}
#nav-main-icon {
left: 135px;
top: 18px;
width: 139px;
height: 43px;
position: fixed;
}
a {
text-decoration: none;
}
nav a {
position: fixed;
top: 28px;
height: 52px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
color: #666666;
}
nav a:hover {
color: #333333;
}
#nav-anchor-blog {
left: 748px;
}
#nav-anchor-guides {
left: 802px;
}
#nav-anchor-free-icons {
left: 887px;
}
#nav-anchor-free-wallpapers {
left: 979px;
}
#nav-anchor-about-me {
left: 1110px;
}
#nav-search-icon {
position: fixed;
left: 1197px;
width: 18px;
height: 17px;
font-size: 14px;
fill: #00000080;
}
#nav-search-icon:hover {
fill: #E74225;
}
.nav-dropdown {
top: 80px;
box-shadow: 0 2px 5px #0000001A;
border-top: 3px solid #E74225;
background-color: #FFFFFFFF;
display: none;
}
#dropdown-guides {
position: relative;
left: 776px;
width: 200px;
height: 175px;
padding: 20px;
z-index: 3;
}
#dropdown-guides a {
left: 796px;
width: 160px;
padding: 10px 20px;
line-height: 23px;
}
#dropdown-guides a:hover {
background-color: #00000008;
}
#nav-dropdown-guides-icon-design-guide {
top: 103px;
height: 23px;
}
#nav-dropdown-guides-crafting-pixel-perfect-icons {
top: 146px;
height: 46px;
}
#nav-dropdown-guides-build-your-dribbble-audience {
top: 212px;
height: 46px;
}
#search-bar {
position: absolute;
left: 895px;
width: 280px;
height: 35px;
padding: 20px;
z-index: 2;
}
#search-field {
left: 915px;
top: 103px;
width: 240px;
height: 15px;
padding: 10px 20px;
border: hidden;
background-color: #F8F8F8;
font-family: Arial;
font-weight: 400;
font-size: 13.3333px;
color: #757575;
}
#search-field:focus {
outline: none;
}
h1, h3, h4, p, a {
margin: 0;
font-weight: 500;
}
h1, h3, h4 {
text-align: center;
}
h1 {
font-size: 30px;
line-height: 30px;
color: #333333;
}
h3 {
font-size: 22px;
line-height: 22px;
color: #333333;
}
h4 {
font-size: 14px;
line-height: 24px;
color: #666666;
}
p {
font-size: 16px;
line-height: 27px;
color: #666666;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Main - Icon Utopia</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="index-styles.css">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav>
<img id="nav-main-icon" src="icon-utopia.png">
<a id="nav-anchor-blog" href="blog.html">Blog</a>
<a id="nav-anchor-guides" href="www.iconutopia.com">Guides</a>
<a id="nav-anchor-free-icons" href="https://iconutopia.com/free-icons/">Free Icons</a>
<a id="nav-anchor-free-wallpapers" href="https://iconutopia.com/free-phone-wallpapers/">Free Wallpapers</a>
<a id="nav-anchor-about-me" href="https://iconutopia.com/about/">About Me</a>
<a id="search-icon_anchor"><svg id="nav-search-icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32.2 32.2"><path d="M19 0C11.8 0 6 5.8 6 13c0 3.1 1.1 5.9 2.9 8.2l-8.6 8.6c-0.5 0.5-0.5 1.4 0 2 0.5 0.5 1.4 0.5 2 0l8.6-8.6C13.1 24.9 15.9 26 19 26c7.2 0 13-5.8 13-13S26.2 0 19 0zM19 24C12.9 24 8 19.1 8 13S12.9 2 19 2 30 6.9 30 13 25.1 24 19 24z"/></svg></a>
<div id="dropdown-guides" class="nav-dropdown">
<a id="nav-dropdown-guides-icon-design-guide" href="free-icon-design-guide.html">Icon Design Guide</a>
<a id="nav-dropdown-guides-crafting-pixel-perfect-icons" href="crafting-pixel-perfect-icons-the-right-way.html">Crafting Pixel Perfect Icons – The Right Way!</a>
<a id="nav-dropdown-guides-build-your-dribbble-audience" href="build-your-dribbble-audience.html">Build your Dribbble audience</a>
</div>
<div id="search-bar" class="nav-dropdown">
<form id="search-form">
<input id="search-field" type="text" placeholder="Search ...">
</form>
</div>
</nav>
</header>
</body>
<script src="nav.js"></script>
</html>
Please note that since the top set in CSS for the div is originally 80px, if I remove the code for changing the top of the div, after scrolling down, I can't reach it if I am hovering over the anchor, before it disappears. That's why I was not able to tell whether the eventListener stopped working because I scrolled down, or because I changed the top of the div.
I figured out the problem. In my javascript, I was setting the height of each navAnchor to fit only the text of the anchor. That's why the dropdown disappeared before I could hover over it. So I increased the height to extend the anchors to reach the bottom of the navigation bar. (I increased the height from 23px to 39px)
I am trying to delete or hide the button first or the second button by (function dmenubutton), but it's not working.
function showitems(cell) {
cell.querySelector(".items").style.display = "block";
}
function hideitems(cell) {
cell.querySelector(".items").style.display = "none";
}
function showitem(cell) {
cell.querySelector(".bottoneditmenu").style.display = "block";
}
function hideitem(cell) {
cell.querySelector(".bottoneditmenu").style.display = "none";
}
function dmenubutton(call) {
cell.querySelector(".bottonmenu").style.display = 'none';
}
.bottonmenu {
display: inline-block;
padding: 10px;
background: #b7c0cd;
cursor: pointer;
}
.Deletetbuttonmenud {
color: #2b9ff6;
background: #222c3c;
font-size: 12px;
border-radius: 3px;
}
.Deletetbuttonmenue {
color: #2b9ff6;
background: #222c3c;
font-size: 12px;
border-radius: 3px;
padding: 1px 3px 1px 3px;
}
.Deletetbuttonmenue:hover,
.Deletetbuttonmenud:hover {
opacity: 0.8;
}
.bottoneditmenu {
position: absolute;
display: none;
}
<ul>
<li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">First botton
<div class="bottoneditmenu">
<span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span>
<span class="Deletetbuttonmenue">Edit</span>
</div>
</li>
<li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">Sacand botton
<div class="bottoneditmenu">
<span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span>
<span class="Deletetbuttonmenue">Edit</span>
</div>
</li>
</ul>
You are clicking on span with class Deletetbuttonmenud and searching for element with bottonmenu class inside of that span.
Also you have a typo, in function you call call and inside cell
cell.querySelector works like this: when you click item(cell) and attach .querySelector on it, it searchers for term inside of that clicked element.
As seen from HTML you want to hide a parentElement of a parentElement (li element with class bottonmenu )of that clicked span:
cell.parentElement.parentElement.style.display = 'none';
function showitems(cell) {
cell.querySelector(".items").style.display = "block";
}
function hideitems(cell) {
cell.querySelector(".items").style.display = "none";
}
function showitem(cell) {
cell.querySelector(".bottoneditmenu").style.display = "block";
}
function hideitem(cell) {
cell.querySelector(".bottoneditmenu").style.display = "none";
}
function dmenubutton(cell) {
cell.parentElement.parentElement.style.display = 'none';
}
.bottonmenu {
display: inline-block;
padding: 10px;
background: #b7c0cd;
cursor: pointer;
}
.Deletetbuttonmenud {
color: #2b9ff6;
background: #222c3c;
font-size: 12px;
border-radius: 3px;
}
.Deletetbuttonmenue {
color: #2b9ff6;
background: #222c3c;
font-size: 12px;
border-radius: 3px;
padding: 1px 3px 1px 3px;
}
.Deletetbuttonmenue:hover,
.Deletetbuttonmenud:hover {
opacity: 0.8;
}
.bottoneditmenu {
position: absolute;
display: none;
}
<ul>
<li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">First botton
<div class="bottoneditmenu">
<span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span>
<span class="Deletetbuttonmenue">Edit</span>
</div>
</li>
<li class="bottonmenu" onmouseover="showitem(this)" onmouseout="hideitem(this)">Sacand botton
<div class="bottoneditmenu">
<span class="Deletetbuttonmenud" onclick="dmenubutton(this)">Delete</span>
<span class="Deletetbuttonmenue">Edit</span>
</div>
</li>
</ul>
I would please like an explanation to why the slideshow is not working. Below I have used an interval to perpetually change the slideshow, if userClick is false. The white and squared buttons (made of divs) are set to call upon two functions; slideRight() or slideLeft() and clicked(). When the buttons are clicked however, the clicked() function does not seem to change the variable, based on the data on top of the page.
<body>
<div class="page-wrapper">
<header>
<div class="headContent">
<h1 class="titleText">Slideshow</h1>
<h2 class="subTitleText">A slideshow made with JavaScript.</h2>
<p>userClick <span id="uc"></span></p>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
</ul>
</nav>
</header>
<div class="body-wrapper">
<h1 class="titleText">Slideshow</h1>
<div id="slideshow">
<div id="leftSlide" onclick="leftSlide(); clicked()"></div>
<div id="rightSlide" onclick="rightSlide(); clicked()"></div>
</div>
<p>The image is not invoked by a tag, but invoked by the background property using Javascript.</p>
</div>
<footer>
<p id="footerText">© 2017 <br>Designed by JastineRay</p>
</footer>
</div>
<script language="javascript">
// Slide function
var slide = ["minivan", "lifeinthecity", "sunsetbodyoflove"];
var slideTo = 1;
window.onload = getSlide();
// Previous Image
function leftSlide() {
if (slideTo != 0) {
slideTo = slideTo - 1;
} else if (slideTo == 0) {
slideTo = slide.length - 1;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
// Next Image
function rightSlide() {
if (slideTo != (slide.length - 1)) {
slideTo = slideTo + 1;
} else if (slideTo == (slide.length - 1)) {
slideTo = 0;
} else {
alert('SLIDE ERROR');
}
getSlide();
}
function getSlide() {
imageURL = 'url(images/' + slide[slideTo] + '.jpg)';
document.getElementById("slideshow").style.backgroundImage = imageURL;
}
// Interval Slideshow & Check if user clicked (timeout)
var userClick = false;
window.onload = slideInterval(5000);
// Start Slideshow
function slideInterval(interval) {
while (userClick = false) {
setInterval(function() {
rightSlide();
}, interval)
}
}
// Stop Slideshow and start timeout
function clicked() {
userClick = true;
setTimeout(function() {
userClick = false;
slideInterval();
}, 2000)
}
window.onload = function() {
setInterval(document.getElementById("uc").innerHTML = userClick), 100
}
</script>
</body>
CSS coding below.
* {
margin: 0;
padding: 0;
}
.page-wrapper {
width: 100%;
}
// Class Styling
.titleText {
font-family: monospace;
font-size: 40px;
}
.subTitleText {
font-family: monospace;
font-size: 20px;
font-weight: normal;
}
// Header Styling
header {
height: 500px;
}
.headContent {
margin: 30px 7%;
}
// Navigation Styling
nav {
overflow: hidden;
}
nav ul {
background: black;
background: linear-gradient(#595959, black);
list-style-type: none;
font-size: 0;
padding-left: 13.33%;
margin: 40px 0;
}
nav ul li {
padding: 15px 20px;
border-right: 1px solid #595959;
border-left: 1px solid #595959;
color: white;
display: inline-block;
font-size: 20px;
font-family: sans-serif;
}
// Body Styling
.body-wrapper {
}
.body-wrapper > .titleText {
text-align: center;
font-size: 50px;
}
#slideshow {
overflow: hidden;
margin: 20px auto;
border: 2px solid blue;
height: 350px;
max-width: 800px;
background-size: cover;
background-position: center;
position: relative;
}
#leftSlide {
position: absolute;
left: 40px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
#rightSlide {
position: absolute;
left: 100px;
top: 175px;
background-color: white;
height: 40px;
width: 40px;
}
// Footer Styling
Try changing the checking part to:
window.onload = function() {
setInterval(function () {
document.getElementById("uc").innerHTML = userClick;
}, 100);
}
The first argument of setInterval has to be a function (something that can be called), not a generic piece of code.
I am trying to put together this project.
In my list I have fruit & veg.I want to be able to drag the right item into the correct box. Once it is in the correct box ( dropped) it should be invisible.
Hope someone can help.
HTML
<header>
<h1>THIS IS A TEST PAGE</h1>
</header>
<nav>
</nav>
<section>
<h1>Choose a Box</h1>
<ul id="fruit">Fruit
</ul>
<ul id="veg">Veg
</ul>
</section>
<article>
<ul id="dragsource">
<li id="item1" draggable="true">Apple</li>
<li id="item2" draggable="true">Banana</li>
<li id="item3" draggable="true">Orange</li>
<li id="item4" draggable="true">Potato</li>
<li id="item5" draggable="true">Carrot</li>
<li id="item6" draggable="true">Pea</li>
</ul>
</article>
JS
window.onload = function() {
var target1 = document.getElementById("fruit");
var target2 = document.getElementById("veg");
var list = document.querySelectorAll("#dragsource li");
for (i = 0; i < list.length; i++) {
list[i].draggable = true;
list[i].ondragstart = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
dt.setData("text", event.target.id);
dt.effectAllowed = "move";
};
}
target1.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target2.ondragover = function(event) {
var event = event || window.event;
event.preventDefault();
};
target2.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
target2.appendChild(document.getElementById("data"));
};
target1.ondrop = function(event) {
var event = event || window.event;
var dt = event.dataTransfer;
event.preventDefault();
var data = dt.getData("text");
target1.appendChild(document.getElementById(data));
};
};
CSS
header {
background-color: black;
color: yellow;
text-align: center;
padding: 5px;
}
nav {
line-height: 30px;
background-color: yellow;
height: 400px;
width: 100px;
float: left;
padding: 5px;
}
body,
html {
background-color: silver;
font-family: sans-serif;
color: black;
text-align: center;
}
section {
width: 482px;
height: 220px;
float: left;
text-align: center;
padding: 5px;
}
#fruit {
width: 90px;
height: 120px;
left: 150px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
#veg {
width: 200px;
height: 120px;
left: 340px;
top: 150px;
padding: 10px;
border: 2px solid green;
position: absolute;
}
article {
background-color: aqua;
height: 170px;
width: 482px;
float: right;
padding: 5px;
}
ul {
margin: left;
column-count: 3;
width: 50%;
text-align: left;
list-style: none;
}
li {
list-style-type: none;
padding: 5px;
margin: 2px;
background-color: #CCCCFF;
border: 2px double #CCCCCC;
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
See fiddle: https://jsfiddle.net/cq2aw1dy/3/
Before starting - it should be noted in your target2.onDrop function, the last line you say document.getElementById("data") there shouldn't be any quotes there. That will give you some issues.
Since all of your fruits have ID's I think it would serve you better to make use of classes The way to do that would be to add a class to the dropped element that tells it to become invisible.
CSS
#fruit > .hiddenDrop, #veg > .hiddenDrop {
display: none;
}
Javascript - Place this inside of your .onDrop() functions
var element = document.getElementById(data);
element.setAttribute('class', 'hiddenDrop');
target.appendChild(element);
What this does is after the element is dropped, it adds the class hiddenDrop to that element which will then change it's display property to none
EDIT
You can do it with the css like this #fruit > *{display: none;}
It is saying if you drag into the fruit div, display is set to none.
See fiddle:
https://jsfiddle.net/cq2aw1dy/4/
I've got a simple to-do list app. To-do items are inserted by jQuery as <li> items. When they're checked off, they're removed from #todolist and prepended to #donelist. I want to let the user replace to-do items they've accidentally checked off, hence the .on handler for #donelist .checkbox elements, but it's not working. I've been puzzling over this for an embarrassingly long amount of time. How can I get the click handler working for #donelist .checkboxes?
HTML:
<div id="topform">
<input type="text" id="task" placeholder=" New task...">
</div>
<ul id="todolist">
</ul>
<ul id="donelist">
</ul>
JS:
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$('input').keypress(function (e) {
if (e.which == 13) {
addTask(e);
}
});
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
alert('hey buddy');
}
Full CSS:
html,
body {
margin: 0;
padding: 0;
background-color: #313131;
font-family: 'Helvetica', sans-serif;
}
#task {
width: 98%;
margin: 5px auto 7px auto;
padding: 0;
display: block;
height: 45px;
border: none;
border-radius: 2px;
font-size: 25px;
background-color: #F7F7F7;
}
ul {
margin: 0 auto 0 auto;
padding: 0;
width: 98%;
}
li {
list-style-type: none;
padding: 0;
margin: 5px auto 0 auto;
width: 100%;
height: 45px;
line-height: 45px;
position: relative;
font-size: 25px;
border-radius: 2px;
background-color: #F7F7F7;
}
#donelist li {
opacity: .5;
text-decoration: line-through;
}
.todotask {
margin-left: 7px;
}
.checkbox {
height: 31px;
width: 31px;
border-radius: 2px;
background-color: #C1C1C1;
position: absolute;
right: 7px;
top: 7px;
}
checkTask() works just fine, which is what really confuses me. checkTask() is called when the user clicks on a dynamically inserted element (a div in a li that's inserted by addTask(). Why doesn't replaceTask() fire as well?
Having the corresponding HTML in the OP would have helped, so I've had to guess a bit about how the structure, but here's a working example of what I think you're looking for:
HTML
<h1>ADD</h1>
<input id="task"></input>
<button id="add">Add</button>
<h1>TODO</h1>
<ul id="todolist">
<li><span class='todotask'>" Take out the garbage "</span><div class='checkbox'></div></li>
<li><span class='todotask'>" Do the dishes "</span><div class='checkbox'></div></li>
</ul>
<h1>DONE</h1>
<ul id="donelist">
</ul>
CSS
.checkbox{
width: 15px;
height: 15px;
background-color: black;
display: inline-block;
cursor: pointer;
}
JavaScript inside document.ready()
$('#todolist').on('click', '.checkbox', checkTask);
$('#donelist').on('click', '.checkbox', replaceTask);
$("#add").click(addTask);
function addTask(e) {
taskToAdd = $('#task').val();
var listItem = "<li><span class='todotask'>" + taskToAdd + "</span><div class='checkbox'></div></li>";
$('#todolist').prepend(listItem);
}
function checkTask() {
var listItem = $(this).parent();
listItem.remove();
$('#donelist').prepend(listItem);
}
function replaceTask() {
var listItem = $(this).parent();
listItem.remove();
$('#todolist').prepend(listItem)
}