I am still learning to do plain old vanilla javascript. I am trying to hide my slideToggle or even the whole background of the drop down menu I did to close when user clicks on the any link. Am I missing something because I am not getting any error but it doesn't display none on the slideToggle class.
js
var anchors = document.querySelectorAll(".a");
for (var i = 0; i < anchors.length; i++) {
anchors[i].addEventListener('click', function(e){
var btn = document.querySelector(".slideToggle");
if (window.getComputedStyle(btn,null).getPropertyValue("display") != 'none') {
btn.click();
}
})
}
html
<nav id="mainNav">
<h1 class="hidden">Main Navigation</h1>
<button id="button"><span class="hidden">Toggle</span></button>
<ul id="burgerMenu">
<li>Home</li>
<li>Latest Work</li>
<li>About</li>
<li>Prices</li>
<li>Contact</li>
</ul>
</nav>
instead of using document.querySelectorAll(".a") use document.querySelectorAll("a"). also I don't see an element with slideToggle as a class. using a "." as a selector means you are searching for a class.
Related
This question already has answers here:
How do I retrieve an HTML element's actual width and height?
(16 answers)
Closed 3 years ago.
Initially have 5 buttons in div, and i have a code to create buttons dynamically see the code below..
My main question is after adding some more buttons. I have top and down arrow buttons to scroll the div.
I want to scroll one button or (set of buttons) on each click.
On each click now i am getting some portion of the button.
How can i get full button on each click with out considering how much width that dynamically created button have
This is my Html code snippet
<div class="tabbar-fix" style="width: 11.2%;height: 89%;position: fixed;">
<div class=" row" style="height:5%;width:100%">
<div id="top-button" class="scroller" onclick="scrollLeftAbc();"><i class="glyphicon glyphicon-chevron-up"></i></a></div>
</div>
<div class="row" style="height:90%;width:100%;">
<nav class="navbar navbar-inverse" id="nav-id-scroll">
<ul class="nav navbar-nav" id="navbar-buttons">
<li class="active">Home</li>
<li>about</li>
<li>services</li>
<li>contact</li>
<li>contact</li>
<li>services</li>
</ul>
</nav>
</div>
<div id="down-button" class="row" style="height:5%;width:100%">
<div class="scroller" onclick="scrollRightAbc();"><i class="glyphicon glyphicon-chevron-down"></i></a></div>
</div>
</div>
My function to create dynamic button.....
function createButton() {
var ul = document.getElementById("navbar-buttons");
var li = document.createElement("li");
var link = document.createElement("a");
var name = document.getElementById("recipient-name").value;
link.setAttribute("href", name);
link.setAttribute("data-toggle", "tab");
var textName = document.createTextNode(name);
link.appendChild(textName);
li.appendChild(link);
ul.appendChild(li);
// $(li).insertBefore("#lastIcon");
}
This is how i tried to scroll the button onclick ..
var test = 0;
function scrollToLeft() {
test = document.querySelector("li").offsetWidth;
console.log(test)
document.getElementById('nav-id-scroll').scrollLeft += test;
}
function scrollToRight() {
document.getElementById('nav-id-scroll').scrollLeft -= test;
}
Let's assume you want to measure the width of last li or button (whatever you add), so here goes the code for same.
var button_width = $('#navbar-buttons > li:last-of-type').width();
Now, you may play with the value of button_width. Or you may use $.each to calculate the width of all buttons individually into an array.
I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)
You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo
I am really new at javascript but as far as I can tell, the code that I have here should be working. No errors come up when I view in the console(nothing comes up for that matter) and all that appears on the website is the button that doesn't do anything and the list items already appearing on the page
<html>
<body>
<nav>
<ul>
<li>
<button class="accordion">Collections</button>
<ul class="dropDown">
<li><p>Mojica Lookbook</p></li>
<li><p>Andrade Editorial</p></li>
<li><p>Bell Videos</p></li>
</ul>
</li>
<li>
Shop
</li>
<li>
Stores
</li>
<li>
Contact
</li>
<li>
<img src="mojica_lookbook/mojica_credits.png" class="credits">
</li>
</ul>
</nav>
</body>
<script>
var dropDown = document.getElementsByClassName("dropDown");
var i = 0;
for(i = 0; i < dropDown.length; i++) {
dropDown[i].onclick = function(){
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
</script>
</html>
I believe you will need to use the element passed into the callback for the onclick. Instead of using the 'this' keyword within the callback try this:
for(i = 0; i < dropDown.length; i++) {
dropDown[i].onclick = function(e){
e.target.classList.toggle("active");
e.target.nextElementSibling.classList.toggle("show");
}
}
There are a few examples here. As for the button you have not mapped a click event, so that will as you explain do nothing.
I'm trying to show/hide an element on mouse click but it has to be the element that is clicked not just the class because multiple classes will exist on the page.
Heres what I've got;
<i class="fa fa-bars dropMenu">here</i>
<nav class="drop-down">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
<li>Buy Now<span>5</span></li>
</ul>
</nav>
the javascript
$(".dropMenu").click(function(){
if ($(".drop-down",this).is(':visible')) {
$(".drop-down",this).hide();
} else if ($(".drop-down",this).is(':hidden')) {
$(".drop-down",this).show();
}
});
JSFiddle - http://jsfiddle.net/75yek8do/
You've not included jQuery and you're using <i> as a context but it is inline element and cannot have any elements inside it. So remove this, as the context.
$(".dropMenu").click(function() {
if ($(".drop-down").is(':visible')) {
$(".drop-down").hide();
} else if ($(".drop-down").is(':hidden')) {
$(".drop-down").show();
}
});
DEMO
But you can simply toggle it
$(".dropMenu").click(function(){
$('.drop-down').toggle();
});
If you must stick to your current markup and have many dropdowns :
$(".dropMenu").on('click', function(){
$(this).next('.drop-down').toggle();
});
Fiddle
Here you are http://jsfiddle.net/75yek8do/2/
You can have as many as you like items to click on (.dropMenu). It will search for the next occurrence of the .drop-down element and it will toggle its visibility.
$(".dropMenu").on('click', function () {
$(this).next(".drop-down").toggle();
});
This question already has answers here:
How to remove the class in javascript?
(3 answers)
Closed 9 years ago.
I have a div section
<div class="1">
<div id="tab1"">
<ul class="nav nav-tabs">
<li class="active ans-tab"> MyText</li>
<li class="topTab">Game</li>
<li class="topTab">LB</li>
</ul>
</div>
<div id="tab2">
<ul class="nav nav-pills">
<li class="active"> Top</li>
<li>Categories</li>
</ul>
</div>
</div>
What i am trying to do at each of the pages used as href in the div, is to remove class attribute from the li item which has it as active and assign it to the one, i click.
I have tried removeClass removeAttribute etc but nothing seems to be working for me. I want to use plain Javascript no jQuery
For e.g. my JS code on Game page removes active class from MyText page and add it to Game page's li element.
I assume only one is active at a time. To remove, you can do this:
var active = document.querySelector(".active");
active.classList.remove("active");
Then to add, do this:
// Assuming `this` is your element
this.classList.add("active");
Both of these will work in modern browsers. For older browsers, use the same DOM selection, then do typical string manipulation of the .className property.
active.className = active.className.replace(/\bactive\b/, " ");
this.className += " active";
Like this
.bold {
font-weight: bold
}
.red {
background: red
}
<div id="theDiv" class="bold red">Bold and red</div>
<button id="button">Remove red</button>
var theDiv = document.getElementById("theDiv");
var button = document.getElementById("button");
function removeRed() {
var classContent = theDiv.className;
theDiv.className = classContent.replace("red", "").trim();
}
button.addEventListener("click", removeRed, false);
on jsfiddle
On newer browsers you can use element.classList and the remove method
Try function for removing a class:
function removeClass (parentEl, classToBeRemoved) { // DOM element, className for remove.
var classes = parentEl.className.split(" ");
for (var i = 0; i < classes.length; i++) {
if (classes[i] == classToBeRemoved) {
// Remove class.
classes.splice(i, 1);
}
break;
}
parentEl.className = classes.join(" ");
}