I need the help with Javascript onclick Dropdown Menu.
The menu opens when I click the button and closes when I click outside.
The problem is that when I open one menu and click on another, the previous menu stays open.
I want the solution that when I open one menu when I open another menu the previous menu closes.
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
width: 100%;
padding: 0 10% 0 10%;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 21.5px 20px;
background-color: inherit;
margin: 0;
cursor: pointer;
font-weight: bolder;
color: #2d3436;
}
.dropdown {
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 460px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
height: 450px;
}
.show {
display: block
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button onclick="my1Function()" class="dropbtn dropbtn1">Dropdown <i class="fas fa-caret-down"></i></button>
<div id="myDropdown1" class="dropdown-content dropdown-content1">
</div>
</div>
<div class="dropdown">
<button onclick="my2Function()" class="dropbtn dropbtn2">Dropdown <i class="fas fa-caret-down"></i></button>
<div id="myDropdown2" class="dropdown-content dropdown-content2">
</div>
</div>
<div class="dropdown">
<button onclick="my3Function()" class="dropbtn dropbtn3">Dropdown <i class="fas fa-caret-down"></i></button>
<div id="myDropdown3" class="dropdown-content dropdown-content2">
</div>
</div>
</div>
<script>
function my1Function() {
document.getElementById("myDropdown1").classList.toggle("show");
}
function my2Function() {
document.getElementById("myDropdown2").classList.toggle("show");
}
function my3Function() {
document.getElementById("myDropdown3").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
You may not need specific onclick event like my1Function for each dropdown button, instead use a generic event listener.
Hide any open dropdown content. (This takes care of hiding the dropdown content when clicked outside)
Show the dropdown content specific to the clicked button.
<!DOCTYPE HTML>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.navbar {
width: 100%;
padding: 0 10% 0 10%;
overflow: hidden;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}
.dropbtn {
font-size: 16px;
border: none;
outline: none;
padding: 21.5px 20px;
background-color: inherit;
margin: 0;
cursor: pointer;
font-weight: bolder;
color: #2d3436;
}
.dropdown {
float: left;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 460px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
height: 450px;
}
.show {
display: block
}
</style>
</head>
<body>
<div class="navbar">
<div class="dropdown">
<button class="dropbtn dropbtn1">Dropdown 1<i class="fas fa-caret-down"></i></button>
<div id="myDropdown1" class="dropdown-content dropdown-content1">
</div>
</div>
<div class="dropdown">
<button class="dropbtn dropbtn2">Dropdown 2<i class="fas fa-caret-down"></i></button>
<div id="myDropdown2" class="dropdown-content dropdown-content2">
</div>
</div>
<div class="dropdown">
<button class="dropbtn dropbtn3">Dropdown 3<i class="fas fa-caret-down"></i></button>
<div id="myDropdown3" class="dropdown-content dropdown-content2">
</div>
</div>
</div>
<script>
window.addEventListener('click', function(event) {
// Hide any open dropdown content
const dropdownContents = document.querySelectorAll('.dropdown-content')
dropdownContents.forEach(content => {
content.classList.remove('show');
});
// Show the dropdown content respective to the clicked button
if (event.target.matches('.dropbtn')) {
event.target.nextElementSibling.classList.add('show');
}
})
</script>
</body>
</html>
I would do the dropdown as a details tag like this:
<nav>
<ul class="my-nav">
<li>
<details class="dropdown">
<summary>This has dropdown items</summary>
<ul>
<li>Hi</li>
<li>Universe</li>
</ul>
</details>
</li>
<li>
<details class="dropdown">
<summary>Another dropdown</summary>
<ul>
<li>Goodbye</li>
<li>Universe</li>
</ul>
</details>
</li>
</ul>
</nav>
Granted you would have different summaries/links, and here is the corresponding js:
var nav = document.querySelector('.my-nav');
nav.addEventListener('toggle', function (event) {
// Only run if the dropdown is open
if (!event.target.open) return;
// Get all other open dropdowns and close them
var dropdowns = nav.querySelectorAll('.dropdown[open]');
Array.prototype.forEach.call(dropdowns, function (dropdown) {
if (dropdown === event.target) return;
dropdown.removeAttribute('open');
});
}, true);
Related
const ratingElements = document.querySelectorAll(".ratings");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
console.log(event.target.innerText || event.target.parentNode.innerText); // || means "OR"
event.target.classList.add("active")
event.target.parentNode.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="unhappy.svg" alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="neutral.svg" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="happy-icon.svg" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
it should likely to be this
but it is like
You were adding active class to the parent div which is why whole div is turning green when you click on one emoji. One more thing was , when you click on one emoji then click on other both of them were getting green background color. Here is the solution .
const ratingElements = document.querySelectorAll(".ratings");
const images= document.getElementsByClassName("emoji-icon");
ratingElements.forEach((ratingElement) => {
ratingElement.addEventListener("click", (event) => {
for(image of images){
image.classList.remove("active");
}
event.target.classList.add("active")
});
});
.ratings__container {
display: flex;
padding: 20px 0;
gap: 5px;
background-color:aqua;
}
img
{
width:100px;
}
.ratings {
min-width: 100px;
cursor: pointer;
padding: 5px;
margin: 10px 5px;
}
.ratings:hover, .active{
background: darkseagreen;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
color: aliceblue;
transition: all 300ms ease;
}
<div class="container" id="container">
<h1 class="heading">Feedback UI</h1>
<div class="ratings__container" id="ratings__container">
<div class="ratings" aria-label="unhappy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090 alt="Unhappy" class="emoji-icon">
<small>Unhappy</small>
</div>
<div class="ratings" aria-label="neutral">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Neutral" class="emoji-icon">
<small>Neutral</small>
</div>
<div class="ratings" aria-label="happy">
<img src="https://cdn.shopify.com/s/files/1/1061/1924/products/Happy_Emoji_Icon_5c9b7b25-b215-4457-922d-fef519a08b06_large.png?v=1571606090" alt="Happy" class="emoji-icon">
<small>Happy</small>
</div>
</div>
<button class="btn">
Send Review
</button>
</div>
remove event.target.parentNode.classList.add("active") . Then select images using getElementsByClassName()(or whichever method you prefer) then remove class active for all of them . Then add class active to only one emoji .
Please see the page first to understand https://ibnul.neocities.org/_temporary/au2p10/au2p10.html
Here I have multiple dropdown menu which needs to open when clicked on their respective opener button(3 bar icon). And also it needs to close on either when clicked on the icon again or click somewhere else on the page.
So I have managed to open the menu when clicked on their respective button and also close when click again or click outside somewhere on the page.
But if I click the first button and without clicking the same button again or without clicking somewhere else on the page if I click the second button the second menu will open while the first menu is opened and also if I do the same for the third menu afterwards the third menu will also open while the previous two menu is opened. So you will see all three menu opened at the same time.
This is the problem. I want to close all the previous menus when click on the next menu button or close all the next menus when clicked on the previous menu button. The point is there should not be more than one menu visible at a time.
I want to open only the last one and the previous one should close when the next one is clicked so you cant see more than one dropdown menu at a time.
And also I don't want to add any id name on the html file as I need to copy paste this html code multiple time so you should give me a solution only through javascript which works with the same class name to identify elements where no matter how many time I copy pate the html code the menu will work the same and will not open more that one menu at a time.
And please show it in pure javascript.
<!DOCTYPE html>
<html lang='en-US'>
<head>
<title>au2p10</title>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<style>
* {
margin: 0px;
padding: 0px;
font-family:'Segoe UI', sans-serif;
}
a {
text-decoration: none;
}
.res-loc-shre-con {
display: flex;
justify-content: flex-end;
padding: 30px;
}
.edit-menu-icon-con {
position: relative;
margin: 10px 0px 70px 0px;
}
.edit-menu-text-icon-con {
display: flex;
align-items: center;
}
.edit-menu-sdtext {
font-size: 14px;
color: #0086bf;
padding: 0px 8px 0px 0px;
}
.edit-menu-icon-image {
width: 25px;
height: 20px;
padding: 4px 4px 4px 4px;
}
.eidit-menu-icon-item-con {
position: absolute;
z-index: 2;
top: 35px;
right: 0px;
background-color: white;
border: 0.9px solid #dadada;
padding: 4px 0px 4px 0px;
width: 200px;
min-height: 100px;
}
.edit-menu-drop-down-box {
position: absolute;
z-index: 2;
top: 42px;
right: -1px;
width: 180px;
padding: 3px 0px 3px 0px;
background-color: white;
border: 0.9px solid rgb(219, 219, 219);
display: none;
}
.edit-menu-drop-down-box:focus {
outline: 0px;
}
.show-edit-menu-drop-down-box {
display: block;
}
.edit-menu-drop-down-cone-box {
position: relative;
}
.edit-menu-dorp-down-cone {
position: absolute;
z-index: -1;
top: -11px;
right: 9px;
width: 14px;
height: 14px;
background-color: rgb(255, 255, 255);
border-left: 0.9px solid rgb(189, 189, 189);
border-top: 0.9px solid rgb(189, 189, 189);
transform: rotate(45deg);
}
.edit-menu-selectitem {
display: flex;
padding: 5px 10px 5px 10px;
}
.edit-menu-selectitem:hover {
background-color: rgb(238, 238, 238);
}
.edit-menu-select-text {
font-size: 15px;
color: #7c7c7c;
padding: 3px 5px 3px 5px;
}
</style>
</head>
<!-- start -->
<body>
<div class='res-loc-shre-con'>
<div class='edit-menu-icon-con'>
<div class='edit-menu-text-icon-con'>
<p class='edit-menu-sdtext'>Manage au2</p>
<img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
</div>
<div class='edit-menu-drop-down-box'>
<div class='edit-menu-drop-down-cone-box'>
<div class='edit-menu-dorp-down-cone'></div>
</div>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Edit</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Make Featured</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Comment</p>
</div>
</a>
</div>
</div>
</div>
<div class='res-loc-shre-con'>
<div class='edit-menu-icon-con'>
<div class='edit-menu-text-icon-con'>
<p class='edit-menu-sdtext'>Manage au2</p>
<img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
</div>
<div class='edit-menu-drop-down-box'>
<div class='edit-menu-drop-down-cone-box'>
<div class='edit-menu-dorp-down-cone'></div>
</div>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Edit</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Make Featured</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Comment</p>
</div>
</a>
</div>
</div>
</div>
<div class='res-loc-shre-con'>
<div class='edit-menu-icon-con'>
<div class='edit-menu-text-icon-con'>
<p class='edit-menu-sdtext'>Manage au2</p>
<img class='edit-menu-icon-image' src='menu-icon-blue.svg' alt=''>
</div>
<div class='edit-menu-drop-down-box'>
<div class='edit-menu-drop-down-cone-box'>
<div class='edit-menu-dorp-down-cone'></div>
</div>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Edit</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Make Featured</p>
</div>
</a>
<a class='edit-menu-itemlink' href=''>
<div class='edit-menu-selectitem'>
<p class='edit-menu-select-text'>Comment</p>
</div>
</a>
</div>
</div>
</div>
<script>
var edit_menu_btns = document.querySelectorAll('.edit-menu-icon-image');
edit_menu_btns.forEach(btn => {
btn.addEventListener('click', show_edit_menu_dropdown_box);
});
function show_edit_menu_dropdown_box(e) {
var card = e.target.closest('.edit-menu-icon-con');
var edit_menu_dropdown_box = card.querySelector('.edit-menu-drop-down-box');
edit_menu_dropdown_box.classList.toggle('show-edit-menu-drop-down-box');
window.addEventListener('click', function(event) {
if (!event.target.matches('.edit-menu-icon-image')) {
var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
for (var j = 0; j < editMenuDropdowns.length; j++) {
var openEditMenuDropdown = editMenuDropdowns[j];
if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
}
}
}
});
}
</script>
</body>
I have put it in a single html file (https://ibnul.neocities.org/_temporary/au2p10/au2p10.html) so you can easily download the page and try on your code editor.
Please comment if you didn't understand any part of my question.
Replace the eventlistener with this:
window.addEventListener('click', function(event) {
var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
for (var j = 0; j < editMenuDropdowns.length; j++) {
var openEditMenuDropdown = editMenuDropdowns[j];
if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box') && event.target.closest('.edit-menu-icon-con') !== openEditMenuDropdown.parentElement) {
openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
}
}
});
All we're doing here is telling the "editMenuDropdowns" loop to not close the closest menu when clicked, but it'll close all other menus.
And Dennis is correct in that the eventlistener function is inside the function above it when it should be on its own.
Create a function that closes all the menus, and call it each time any menu is clicked (you've already written that part). Then open the menu.
function closeAllMenus() {
var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
for (var j = 0; j < editMenuDropdowns.length; j++) {
var openEditMenuDropdown = editMenuDropdowns[j];
if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
}
}
}
Also, I believe you are missing a curly brace at the end of your show_edit_menu_dropdown_box function.
You have to just close all the menu first before open one.
so please just add few lines in your code like this:
function show_edit_menu_dropdown_box(e) {
// Add blow lines
var cards = document.querySelectorAll(".edit-menu-drop-down-box");
cards.forEach(item => {
item.classList.remove("show-edit-menu-drop-down-box");
});
var card = e.target.closest('.edit-menu-icon-con');
var edit_menu_dropdown_box = card.querySelector('.edit-menu-drop-down-box');
edit_menu_dropdown_box.classList.toggle('show-edit-menu-drop-down-box');
window.addEventListener('click', function(event) {
if (!event.target.matches('.edit-menu-icon-image')) {
var editMenuDropdowns = document.getElementsByClassName('edit-menu-drop-down-box');
for (var j = 0; j < editMenuDropdowns.length; j++) {
var openEditMenuDropdown = editMenuDropdowns[j];
if (openEditMenuDropdown.classList.contains('show-edit-menu-drop-down-box')) {
openEditMenuDropdown.classList.remove('show-edit-menu-drop-down-box');
}
}
}
});
}
I created a structure to represent the UI Tree using jQuery. I added the ability to add a new element at any level (The "add new" button is activated when you select a level for adding).
But in my example, I can not add a new element to the newly created element. I tried different ways, but it does not work.
I'll be happy for the tips on how I can fix this problem
$(function() {
const newElement = $('#new-element');
let targetButton;
function indexOfChildren() {
$('li').prepend(function() {
let countOfChildren = $(this).children().find(">li").length;
let targetSpan = $(this).find('button>:first-child');
targetSpan.text(countOfChildren);
});
};
indexOfChildren();
$('li>button').on('focus', function(e) {
targetButton = $(this);
newElement.prop("disabled", false);
});
$('[name="new-button"]').on('click', function(e) {
targetButton = $(this);
newElement.prop("disabled", false);
});
newElement.click(function() {
let name = prompt("Please enter name of new element");
let parentTargetButton = targetButton.closest('li');
let indexTargetSpan = parseInt(targetButton.find(':first-child').text());
if (name != null) {
if (indexTargetSpan == 0) {
parentTargetButton.append('<ul><li><button class="btn mb-3 mt-1" name="new-button">' + name + '<span></span></button></li></ul>');
} else {
parentTargetButton.children('ul').append('<li><button class="btn mb-3 mt-1" name="new-button">' + name + ' <span></span></button></li>');
}
}
indexOfChildren();
targetButton.focus();
});
});
body {
background-color: #f5f6f8;
}
.main-content {
background: #fff;
box-shadow: 0 5px 20px 0 #c8d2dd6e;
-webkit-box-shadow: 0 5px 20px 0 #c8d2dd6e;
border-radius: 5px;
}
.top-level {
border-bottom: 1px solid #dadee7;
}
ul {
list-style-type: none;
}
ul>li>ul {
border-left: 1px solid #eee;
margin-left: 60px;
}
ul>li>ul>li:before {
border-left: 1px solid;
}
#new-element {
background-color: #33b5ff;
color: #fff;
border-radius: 40px;
}
.main-content .btn {
box-sizing: content-box;
width: 140px;
padding: 14px;
text-align: left;
background-color: #f5f6f8;
border-radius: 7px;
}
span {
float: right;
color: #fff;
line-height: 1.4;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 01em;
text-align: center;
font-size: 0.9em;
width: 1.4em;
background-color: #33b5ff;
}
.btn:focus,
.btn:hover,
#new-element {
-webkit-box-shadow: 0 5px 25px 0 #9dabbb69;
*/ box-shadow: 0 5px 25px 0 #9dabbb69;
}
.main-content .btn:focus {
color: #fff;
background-color: #0095ff!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container project-item my-3 pt-5">
<div class="row top-level pb-4">
<h3 class="col-sm-9 pl-0">New Project</h3>
<div class="col-sm-3 pr-0">
<button type="button" class="btn float-right" id="new-element" disabled>+ Add new element</button>
</div>
</div>
</div>
<div class="container main-content pt-5 mt-5 pb-5">
<ul>
<li>
<button class="btn mb-3 mt-1">Project <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">Web Design <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">CSS <span></span></button>
</li>
<li>
<button class="btn mb-3 mt-1">HTML <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">HTML <span></span></button>
</li>
<li>
<button class="btn mb-3 mt-1">XHTML <span></span></button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
You can bind the .on event to the already existing parent element.
$('li').on('focus', 'button', function(e) {
targetButton = $(this);
newElement.prop("disabled", false);
});
$(function() {
const newElement = $('#new-element');
let targetButton;
function indexOfChildren() {
$('li').prepend(function() {
let countOfChildren = $(this).children().find(">li").length;
let targetSpan = $(this).find('button>:first-child');
targetSpan.text(countOfChildren);
});
};
indexOfChildren();
$('li').on('focus', 'button', function(e) {
targetButton = $(this);
newElement.prop("disabled", false);
});
$('[name="new-button"]').on('click', function(e) {
targetButton = $(this);
newElement.prop("disabled", false);
});
newElement.click(function() {
let name = prompt("Please enter name of new element");
let parentTargetButton = targetButton.closest('li');
let indexTargetSpan = parseInt(targetButton.find(':first-child').text());
if (name != null) {
if (indexTargetSpan == 0) {
parentTargetButton.append('<ul><li><button class="btn mb-3 mt-1" name="new-button">' + name + '<span></span></button></li></ul>');
} else {
parentTargetButton.children('ul').append('<li><button class="btn mb-3 mt-1" name="new-button">' + name + ' <span></span></button></li>');
}
}
indexOfChildren();
targetButton.focus();
});
});
body {
background-color: #f5f6f8;
}
.main-content {
background: #fff;
box-shadow: 0 5px 20px 0 #c8d2dd6e;
-webkit-box-shadow: 0 5px 20px 0 #c8d2dd6e;
border-radius: 5px;
}
.top-level {
border-bottom: 1px solid #dadee7;
}
ul {
list-style-type: none;
}
ul>li>ul {
border-left: 1px solid #eee;
margin-left: 60px;
}
ul>li>ul>li:before {
border-left: 1px solid;
}
#new-element {
background-color: #33b5ff;
color: #fff;
border-radius: 40px;
}
.main-content .btn {
box-sizing: content-box;
width: 140px;
padding: 14px;
text-align: left;
background-color: #f5f6f8;
border-radius: 7px;
}
span {
float: right;
color: #fff;
line-height: 1.4;
border-radius: 0.8em;
-moz-border-radius: 0.8em;
-webkit-border-radius: 01em;
text-align: center;
font-size: 0.9em;
width: 1.4em;
background-color: #33b5ff;
}
.btn:focus,
.btn:hover,
#new-element {
-webkit-box-shadow: 0 5px 25px 0 #9dabbb69;
*/ box-shadow: 0 5px 25px 0 #9dabbb69;
}
.main-content .btn:focus {
color: #fff;
background-color: #0095ff!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container project-item my-3 pt-5">
<div class="row top-level pb-4">
<h3 class="col-sm-9 pl-0">New Project</h3>
<div class="col-sm-3 pr-0">
<button type="button" class="btn float-right" id="new-element" disabled>+ Add new element</button>
</div>
</div>
</div>
<div class="container main-content pt-5 mt-5 pb-5">
<ul>
<li>
<button class="btn mb-3 mt-1">Project <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">Web Design <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">CSS <span></span></button>
</li>
<li>
<button class="btn mb-3 mt-1">HTML <span></span></button>
<ul>
<li>
<button class="btn mb-3 mt-1">HTML <span></span></button>
</li>
<li>
<button class="btn mb-3 mt-1">XHTML <span></span></button>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
I am using this code for scroll on an anchor link. It works one time and if click on anchor again it is not working.
$("#erly").on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").on("click", function() {
$(".table-responsive").scrollLeft(50);
});
You may try unbinding the previous event handlers, like this.
$("#erly").unbind().on("click", function() {
$(".table-responsive").scrollLeft(0);
});
$("#late").unbind().on("click", function() {
$(".table-responsive").scrollLeft(50);
});
div.table-responsive {
background: #ccc none repeat scroll 0 0;
border: 3px solid #666;
margin: 5px;
padding: 5px;
position: relative;
width: 200px;
height: 100px;
overflow: auto;
}
p {
margin: 10px;
padding: 5px;
border: 2px solid #666;
width: 1000px;
height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<a id="erly" href="#1">Early</a>
<br />
<a id="late" href="#2">Late</a>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 1</p>
</div>
<div class="table-responsive">
<h1>lalala</h1>
<p>Hello 2</p>
</div>
</body>
<div class="col-xs-12 early_late">
<ul class="list-inline">
<li class="pull-left">
<a id="erly" class="erlier" onclick="scrollWin2()">
<span class="glyphicon glyphicon-menu-left span_left"></span> Earlier</a>
</li>
<li class="pull-right" onclick="scrollWin()">
<a id="late">Late <span class="glyphicon glyphicon-menu-right span_right"></span></a>
</li>
</ul>
function scrollWin() {
document.getElementById('scroll').scrollBy(100 , 0);
}
function scrollWin2() {
document.getElementById('scroll').scrollBy(-100 , 0);
}
I've been learning HTML and CSS for some weeks now and I start feeling comfortable with those. However I'm trying to learn JavaScript too.
I've been working on a button in HTML and CSS, you can view the demo of the button here.
I want to make the dropdown menu visible when you click the button and also if you click the button again the dropdown menu disappears.
Is there any simple or understandable way for creating a function which does this in JavaScript?
Here is the code I have:
HTML:
<div id="language-wrapper">
<a class="language-icon fr" href="#" alt="choose-your-language">Language</a>
<div id="language-dropdown">
<h3>Choose your language</h3>
<a class="language-links" href="#">Chinese</a>
<a class="language-links" href="#">Danish</a>
<a class="language-links" href="#">Deutsch</a>
<a class="language-links" href="#">English</a>
<a class="language-links" href="#">Espanol</a>
<a class="language-links" href="#">Filipino</a>
<a class="language-links" href="#">Hindu</a>
<a class="language-links" href="#">Italiano</a>
<a class="language-links" href="#">Norsk</a>
<a class="language-links" href="#">Nederlands</a>
<a class="language-links" href="#">Polski</a>
<a class="language-links" href="#">Portugues</a>
<a class="language-links" href="#">Svenska</a>
<a class="language-links" href="#">Suomi</a>
<a class="language-links" href="#">Turkce</a>
<a class="language-links" href="#">Urdu</a>
<p>Do you speak multiple languages or can't find your language? <font color="#d13030">Help us translate!</font><p>
</div> <!-- end of language-dropdown class -->
</div> <!-- end of language-wrapper -->
CSS:
#language-wrapper { display: inline-block; }
#language-wrapper:hover #language-dropdown { opacity: 1; display: block; }
.language-icon {
color: #fff;
font-weight:700;
padding-right:20px;
padding-left:30px;
display:inline-block;
font-size:11px;
text-align:right;
text-decoration:none;
position:relative;
left: 0; top: 0;
}
.fr { background: url("images/language-sprite.png") no-repeat 0 0; }
.fr:hover { background: url("images/language-sprite.png") no-repeat 0 -20px; color: #d13030; }
.language-icon:before {
content:'\25BE';
width:0px;
height:0;
position:absolute;
right:16px;
top: 0;
}
.language-icon:hover:before {
color: #d13030;
content: '\25B4';
top: -1px;
}
/* ------------------ LANGUAGE DROPDOWN ------------------ */
#language-dropdown {
opacity: 0;
width: 1023px;
display: none;
margin-top: 3px;
left: 0;
position: absolute;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0px 3px 3px #b3b3b3;
}
#language-dropdown h3 {
color: #d13030;
font-size: 14px;
font-weight: normal;
padding: 5px 15px 0px 15px;
}
#language-dropdown p {
font-size: 12px;
padding: 0px 0px 10px 15px;
}
#language-dropdown a {
padding: 0px 0px 0px 15px;
}
.language-links {
font-size: 12px;
text-decoration: none;
color: #2793e6;
}
.language-links:hover {
text-decoration: underline;
}
it can be a basic toggle display function on onclik event:
function toggle(el) {
var tag=document.getElementById(el);
tag.style.display = tag.style.display === 'block' ? 'none' : 'block';
// set as defaut oposite defaut active value in document
// here defaut is set to block cause it is none in CSS
}
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');">Language</a>
test here : http://codepen.io/anon/pen/cHIrd/
note:
opacity:0; removed from your initial CSS
Better practice is to toggle class not style values :)
and maybe to set onclick event via javScript.
return false can be added to avoid link to href .
<a class="language-icon fr" href="#" alt="choose-your-language" onclick="toggle('language-dropdown');return false;">Language</a>
The Html
<button id="clickme">Clickme</button>
<h1 id="Another">Menu</h1>
The JavaScript:
document.getElementById("clickme").onclick=function(){
var el = document.getElementById('Another');
if (el.style.display == '') {
el.style.display = 'none';
alert("hide");
}else{
el.style.display = '';
alert("show");
}
};
Here is a sample