I click a button and it displays a drop down whenever it changes I want to take it's value and replace it in the input field but If I create many drop downs when I return to the first drop down and change its value the corresponding input field value can't be changed as it is depending on the button click number.
<button type="button" id="buttonadd" onclick="addMore()">Add</button>
<div id='container'>
</div>
<script>
var i = 0;
var x = 0;
var selectid = 0;
var input2;
var select;
var button;
var select_id;
var input2_hiddenID;
var input2hidden;
var counter = 0;
var select_value;
function addMore()
{
if(counter >= 1 && (!select_value || select_value == 0)){
$("#buttonadd").prop('disabled', true);
}else{
select_value = 0;
button = document.getElementById('container');
select = document.createElement("select");
select.options.add( new Option("...select...","0", true, true) );
select.options.add( new Option("name","1") );
select.options.add( new Option("phone","2") );
select.setAttribute("id","selectid" + selectid);
select_id = "selectid";
select.setAttribute("onchange", "getValue(select_id, selectid)");
button.appendChild(select);
input2 = document.createElement("input");
input2.setAttribute("type","hidden");
input2.setAttribute("id","x" + x);
input2.setAttribute("name","x" + x);
button.appendChild( input2 );
var linebreak1 = document.createElement("br");
var linebreak2 = document.createElement("br");
button.append(linebreak1, linebreak2);
i++;
x++;
selectid++;
counter++;
}
}
function getValue(selectid, a){
var lastId = a-1;
var data = selectid + lastId;
select_value =
document.getElementById(data).value;
var x= "x"+lastId;
input2hidden = document.getElementById(x);
if(counter >= 1 && (!select_value || select_value == 0) ){
alert("Please choose from the select menu");
$("#buttonadd").prop('disabled', true);
input2hidden.value = select_value;
}else {
$("#buttonadd").prop('disabled', false);
input2hidden.value = select_value;
}
}
I do not know if I understood your problem well but give you a solution as to how I understand a dropdown with one click
**
HTML
**
<html>
<head>
<title>DropDown</title>
</head>
<body>
<ul class="nav">
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 1 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
Drop Item 1
</a>
</li>
<li>
<a href="#">
Drop Item 2
</a>
</li>
<li>
<a href="#">
Drop Item 3
</a>
</li>
</ul>
</li>
<li>
<a href="#">
No dropdown
</a>
</li>
<li class="button-dropdown">
<a href="javascript:void(0)" class="dropdown-toggle">
Dropdown 2 <span>▼</span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#">
asdf
</a>
</li>
</ul>
</li>
</ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
**
CSS
**
body {
background-color: #eee;
text-align: center;
padding-top: 50px;
}
.nav {
display: block;
font: 13px Helvetica, Tahoma, serif;
text-transform: uppercase;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
list-style: none;
}
.nav .button-dropdown {
position: relative;
}
.nav li a {
display: block;
color: #333;
background-color: #fff;
padding: 10px 20px;
text-decoration: none;
}
.nav li a span {
display: inline-block;
margin-left: 5px;
font-size: 10px;
color: #999;
}
.nav li a:hover, .nav li a.dropdown-toggle.active {
background-color: #289dcc;
color: #fff;
}
.nav li a:hover span, .nav li a.dropdown-toggle.active span {
color: #fff;
}
.nav li .dropdown-menu {
display: none;
position: absolute;
left: 0;
padding: 0;
margin: 0;
margin-top: 3px;
text-align: left;
}
.nav li .dropdown-menu.active {
display: block;
}
.nav li .dropdown-menu a {
width: 150px;
}
**
JavaScript
**
jQuery(document).ready(function (e) {
function t(t) {
e(t).bind("click", function (t) {
t.preventDefault();
e(this).parent().fadeOut()
})
}
e(".dropdown-toggle").click(function () {
var t = e(this).parents(".button-dropdown").children(".dropdown-menu").is(":hidden");
e(".button-dropdown .dropdown-menu").hide();
e(".button-dropdown .dropdown-toggle").removeClass("active");
if (t) {
e(this).parents(".button-dropdown").children(".dropdown-menu").toggle().parents(".button-dropdown").children(".dropdown-toggle").addClass("active")
}
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-menu").hide();
});
e(document).bind("click", function (t) {
var n = e(t.target);
if (!n.parents().hasClass("button-dropdown")) e(".button-dropdown .dropdown-toggle").removeClass("active");
})
});
Related
So I was trying to make a mobilenav menu, but what happens is when I click on my hamburger, it causes the list items to display as inline-block, but the function is set to display them as block level elements.
HTML
<div class="nav-options">
<i class="fas fa-bars" onclick="mobilenav()"></i>
<ul id="myLinks">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#myLinks {
text-align: right;
}
#myLinks li {
list-style: none;
display: inline-block;
padding: 0.5rem 2rem;
font-size: 20px;
}
.nav-options i {
display: none;
}
#myLinks li:hover {
background-color: #ff3f05;
cursor: pointer;
transition: all 0.5s;
}
CSS for mobile view:
.nav-options i {
display: block;
font-size: 25px;
text-align: right;
}
.nav-options #myLinks {
display: none;
padding: 0px;
}
JS
function mobilenav() {
var links = document.getElementById("myLinks");
if (links.style.display === "block") {
links.style.display = "none";
} else {
links.style.display = "block";
}
}
While you are assigning the display property of the <li> elements, you are controlling the display property of the <ul> element. In the solution below I removed the display properties from the CSS file. The load event is fired when the page loads, and both the <ul> element and the <li> element are assigned a display style. Then when the <i> element is clicked, the click event occurs and the display property is toggled.
let icon = document.getElementById("icon");
var linkContainer = document.getElementById("myLinks"); /* <ul> element */
var linkElements = document.querySelectorAll('li'); /* <li> elements */
window.addEventListener('load', (event) => {
linkContainer.style.display = "block";
linkElements.forEach(li => {
li.style.display = "block";
});
});
function log() {
console.clear();
console.log(`<ul> display style: ${linkContainer.style.display}`);
console.log(`<li> display style: ${linkElements[0].style.display}`);
}
icon.addEventListener("click", function(e) {
log();
if(linkContainer.style.display === "block")
linkContainer.style.display = "none";
else
linkContainer.style.display = "block";
});
#myLinks {
text-align: right;
}
#myLinks li {
list-style: none;
/* display: inline-block; */
padding: 0.5rem 2rem;
font-size: 20px;
}
.nav-options i {
display: none;
}
#myLinks li:hover {
background-color: #ff3f05;
cursor: pointer;
transition: all 0.5s;
}
.nav-options i {
display: block;
font-size: 25px;
text-align: right;
}
.nav-options #myLinks {
display: none;
padding: 0px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="nav-options">
<i id="icon" class="fas fa-bars"></i>
<ul id="myLinks">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
The script activates only the main menu items. How to make the code apply to sub-items. 2.1 - 2.2 And other subparagraphs if they exist. I can’t understand how to select all li elements including those embedded in each other.
Please help me finish the code, or maybe someone has a similar script with the same functionality.
var lastId,
topMenu = $("#top-menu"),
topMenuHeight = topMenu.outerHeight() + 15,
// All list items
menuItems = topMenu.find(".scroll-to"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function() {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
// Bind to scroll
$(window).scroll(function() {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function() {
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
body {
height: 6000px;
font-family: Helvetica, Arial;
}
#top-menu {
position: fixed;
z-index: 1;
background: white;
left: 0;
right: 0;
top: 50px;
}
#top-menu li {
float: left;
}
#top-menu a {
display: block;
padding: 5px 25px 7px 25px;
width: 4em;
text-align: center;
-webkit-transition: .5s all ease-out;
-moz-transition: .5s all ease-out;
transition: .5s all ease-out;
border-top: 3px solid white;
color: #aaa;
text-decoration: none;
}
#top-menu a:hover {
color: #000;
}
#top-menu li.active > a {
border-top: 3px solid #333;
color: #333;
}
#zod{
height:400px;
}
#foo{
height:400px;
}
#foo2.1{
height:400px;
display:block
}
#foo2.2{
height:400px;
display:block
}
#bar {
height:400px;
}
#baz {
height:400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="top-menu">
<li>
<a class="scroll-to" href="#zod">zod</a>
</li>
<li>
<a class="scroll-to" href="#foo">Foo</a>
<ul class="articleSubList">
<li><a class="scroll-to" href="#foo2.1">foo 1.1</a></li>
<li><a class="scroll-to" href="#foo2.2">foo 2.2</a></li>
</ul>
</li>
<li>
<a class="scroll-to" href="#bar">Bar</a>
</li>
<li>
<a class="scroll-to" href="#baz">Baz</a>
</li>
</ul>
<div id="zod">Zod</div>
<div id="foo">Foo111</div>
<div id="foo2.1">Foo 1.1</div>
<div id="foo2.2">Foo 1.2</div>
<div id="bar">Bar</div>
<div id="baz">Baz</div>
i am trying to create a menu with JS, when i click on the first menu item and it is open, then i want when i click on the next item i want the first one to close and the second one to open and when i am clicking on the open menu item i want it to close. also when i click anywhere if i can make it close as well...
here the code i have
HTML
<div class="container-header">
<div class="navbar">
<ul>
<li>
<a onclick="dropdownToggle(event)"><span>Products</span></a>
<div class="dropdown">
<ul class="submenu-img">
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
<li><a><img src="2015_images/img.png">title</a></li>
</ul>
</div>
</li>
<li><a onclick="dropdownToggle(event)"><span>Services</span></a>
<div class="dropdown">
<ul class="submenu">
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>
</div>
</li>
<li><a onclick="dropdownToggle(event)"> <span>Softwares</span></a>
<div class="dropdown">
<ul class="submenu">
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
<li><a>item</a></li>
</ul>
</div>
</li>
</ul>
</div>
CSS
* {
box-sizing: border-box;
}
ul {
list-style: none;
}
.navbar {
width: 100%;
text-align: center;
position: absolute;
top: -500px;
background-color: #585859;
transition: top 0.3s;
z-index: 1;
}
#media screen and (min-width: 768px) {
.navbar {
line-height: 65px;
width: auto;
position: static;
}
}
.navbar ul {
margin: 0;
padding: 0;
}
.navbar li {
vertical-align: middle;
color: #fff;
padding: 10px;
border-bottom: 5px solid #fff;
}
#media screen and (min-width: 768px) {
.navbar li {
display: inline-block;
margin-right: 10px;
border: none;
padding: 0;
}
}
.dropdown {
display: none;
}
.dropdown-open {
display: block;
position: absolute;
top: 70px;
left: 0;
background: rgba(88, 88, 89, 0.7);
width: 100%;
}
.submenu {
width: 100%;
display: flex;
align-items: center;
flex-flow: row;
justify-content: center;
padding: 10px 0 !important;
}
.submenu li {
margin: 0 2px;
flex: 0 0 12%;
line-height: normal;
}
and JS
function dropdownToggle(event) {
var dropdownItem = event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
if (dropdownItem.classList.contains("dropdown-open")) {
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
}
else {
dropdownItem.classList.toggle("dropdown-open");
}
}
I tried on JSFiddle but it is not working so here is a codepen as well..
http://codepen.io/nnns/pen/rLvdgE
The best way will be to put
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
in a function and call it at the beginning of your function dropdownToggle(event) so like that every time you call your function you close everything and can open what you want.
EDIT
Do this:
function dropdownToggle(event) {
var dropdownItem =event.target.parentElement.parentElement.getElementsByClassName("dropdown")[0];
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
dropdownItem.classList.add("dropdown-open");
}
function dropdownToggle(event) {
var dropdownItem = event.target.parentElement.getElementsByClassName("dropdown")[0];
dropdownItem.classList.remove("dropdown");
var dropdowns = document.querySelectorAll(".dropdown");
var arrayLength = dropdowns.length;
for (var i = 0; i < arrayLength; i++) {
dropdowns[i].classList.remove("dropdown-open");
}
dropdownItem.classList.toggle("dropdown-open");
dropdownItem.classList.add("dropdown");
}
This removes all dropdown open classes and toggles the dropdown that is found in the parent(li) of the a.
To close on body click:
document.all.body.onclick=dropdownToggle(document.all.body);
I have to move a horizontal navigation bar when clicked on a link in the list. I have created a JSFiddle to illustrate my problem.
When a user clicks on a link in the list, the list needs to scroll to the left or right. This part is already finished.
When you click on the link, the active link needs to be centered inside the list.
Link to JSFiddle:
https://jsfiddle.net/7yq0jq9s/2/
html
<div class="container">
<ul>
<li class="active"> 1
</li>
<li> 2
</li>
<li> 3
</li>
<li> 4
</li>
<li> 5
</li>
<li> 6
</li>
<li> 7
</li>
<li> 8
</li>
</ul>
CSS
div.container {
width: 600px;
overflow: hidden;
}
ul {
white-space: nowrap;
}
ul li {
display: inline-block;
background: green;
}
ul li a {
padding: 80px;
display: block;
color: white;
font-weight: bold;
text-decoration: none;
}
ul li.active {
background: blue;
}
JS
$(document).ready(function () {
var scrollTo = 0;
$('body').on('click', "a", function () {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
if (selectedIndex > activeIndex) {
scrollTo -= selectedItem.position().left - activeItem.position().left;
console.log('Scroll right');
} else {
scrollTo += Math.abs(selectedItem.position().left - activeItem.position().left);
console.log('Scroll left');
if (scrollTo >= 0) {
scrollTo = 0;
}
}
$('ul').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
});
I think it's easier to just get the absolute position of the clicked element and calculate the middle position of the container instead of checking if it needs to scroll left or right:
var scrollTo = 0;
$('body').on('click', "a", function () {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo =- selectedItem.position().left + $('.container').width() / 2 - selectedItem.width() / 2;
$('ul').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
div.container {
width: 600px;
overflow: hidden;
}
ul {
white-space: nowrap;
transition: all ease 750ms;
position:relative;
}
ul li {
display: inline-block;
background: green;
}
ul li a {
padding: 80px;
display: block;
color: white;
font-weight: bold;
text-decoration: none;
}
ul li.active {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="active"> 1
</li>
<li> 2
</li>
<li> 3
</li>
<li> 4
</li>
<li> 5
</li>
<li> 6
</li>
<li> 7
</li>
<li> 8
</li>
</ul>
</div>
var scrollTo = 0;
$('body').on('click', "a", function () {
var activeItem = $('li.active');
var selectedItem = $(this).parent()
var activeIndex = $('li').index(activeItem);
var selectedIndex = $('li').index(selectedItem);
scrollTo =- selectedItem.position().left + $('.container').width() / 2 - selectedItem.width() / 2;
$('ul').css('transform', 'translateX(' + scrollTo + 'px)');
activeItem.removeClass('active');
selectedItem.addClass('active');
});
div.container {
width: 600px;
overflow: hidden;
}
ul {
white-space: nowrap;
transition: all ease 750ms;
position:relative;
}
ul li {
display: inline-block;
background: green;
}
ul li a {
padding: 80px;
display: block;
color: white;
font-weight: bold;
text-decoration: none;
}
ul li.active {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
<ul>
<li class="active"> 1
</li>
<li> 2
</li>
<li> 3
</li>
<li> 4
</li>
<li> 5
</li>
<li> 6
</li>
<li> 7
</li>
<li> 8
</li>
</ul>
</div>
I think you just needed to change one little bit on line 10:
if (selectedIndex = activeIndex) {
https://jsfiddle.net/7yq0jq9s/3/
I am using very old portal where the is not defined in the begining of the html code, and also I managed to use a jquery/css horizontal drop menu, I need help adding third level to the menu here is my code
#jsddm {
margin: 0;
padding: 0
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial
}
#jsddm li a {
display: block;
background: #324143;
padding: 5px 12px;
text-decoration: none;
border-right: 1px solid white;
width: 70px;
color: #EAFFED;
white-space: nowrap
}
#jsddm li a:hover {
background: #24313C
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white
}
#jsddm li ul li {
float: none;
display: inline
}
#jsddm li ul li a {
width: auto;
background: #A9C251;
color: #24313C
}
#jsddm li ul li a:hover {
background: #8EA344
}
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;
function jsddm_open()
{ jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
function jsddm_close()
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
{ closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
{ if(closetimer)
{ window.clearTimeout(closetimer);
closetimer = null;}}
$(document).ready(function()
{ $('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);});
document.onclick = jsddm_close;
</script>
and here is the menu
<ul id="jsddm">
<li>About us
<ul>
<li>Mission
<ul>
<li>Mission Statment 1</li>
</ul>
</li>
<li> vision </li>
<li>status </li>
</ul>
</li>
<li> Contact
<ul>
<li>Office </li>
<li> Support </li>
</ul>
</li>
</ul>
as you can see the 3rd level "Mession Statment 1" doesn't appear, and that's my problem, any suggestion ???
The problem is maybe due to these lines
$('#jsddm > li').bind('mouseover', jsddm_open);
$('#jsddm > li').bind('mouseout', jsddm_timer);
in which you set an event handler only to the direct <li> children of #jsddm element. But your third <ul> is not contained in a such <li>, so try to change the above lines in
$('#jsddm li').bind('mouseover', jsddm_open);
$('#jsddm li').bind('mouseout', jsddm_timer);
and
function jsddm_open() {
...
ddmenuitem = $(this).children('ul:first').css('visibility', 'visible');}