Show a div when a link with a class is clicked - javascript

I am wanting to show/fadein a <div> with an ID of "signInHold" when the <li> "Sign In" is clicked using the class signInActive on the <li>.
<ul class="nav1">
<li class="nav2">
Home
</li>
<li class="nav2">
Settings
</li>
<li class="nav2">
Download
</li>
<li class="nav2 signInActive">
Sign In
</li>
</ul>
Could you please also tell me if I need to add:
<script src="http://code.jquery.com/jquery-latest.js"></script>

You can do this with jQuery, or you can do it with straight CSS using the transition property; it's entirely up to you and the needs of your project.
jQuery will give you far better cross-browser support:
$(".nav1").on("click", ".signInActive", function () {
$(".bar").fadeIn();
});
Or, you could do it with CSS:
.foo {
opacity: 0;
}
.foo.activated {
transition: opacity 2s;
opacity: 1;
}
And simply toggle the class:
var element = document.querySelector(".signInActive");
var target = document.querySelector(".myDIV");
element.addEventListener("click", function () {
target.classList.toggle("activated");
}, false);

If you're going to use jQuery (in the head)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#signInHold").hide();
$(".signInActive").click(function() {
$("#signInHold").fadeToggle("slow"); <--This targets the div with ID signInHold
});
});
</script>

I think this is what you're looking for:
$('.signInActive').click(function () { $('#signInHold').show(); });
This assumes you do load jQuery, of course.

Yes you need to add jquery
Add the class signIn to your li and now when you click the div will appear
and the class signInActive added to you
<li class="nav2 signIn">
Sign In
</li>
$(document).ready(function(){
$('.signIn').click(function(){
$('#signInHold').fadeIn(300);
$(this).addClass('signInActive');
});
});

Related

How to make navbar disappear when I click on link tag from menu

I have this navbar it works how I want it too but my main problem is I want the dropdown menu to disappear by clicking any links on the menu because I am not sure what to add to my current code to get it to behave as desired. Thanks any help would be appreciated
<nav id="navbar">
<div class="logo">
<img src="log.png">
</div>
<ul>
<li>About</li>
<li>Contact</li>
<li>Project</li>
<li>Home</li>
</ul>
</nav>
Here is my JS
It works fine I just one the additional feature that I mentioned on the title since I don't know how to do it
<script type="text/javascript">
$(window).on('scroll', function()
{
if($(window).scrollTop())
{
$('nav').addClass('black');
}
else
{
$('nav').removeClass('black');
}
}
)
$(document).ready(function() {
$(".menu").on("click", function() {
$("nav ul").toggleClass("active");
});
})
Just add the nav ul li a to your click function. Since I don't know what your markup looks like here is a quick demo:
$(".menu, nav ul li a").on("click", function(e) {
e.preventDefault();
$("nav ul").toggleClass("active");
});
ul{
display:none;
}
ul.active{
display:block;
}
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<nav>
<button class="menu">
Menu
</button>
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</nav>
With jquery you can comma separate selectors. Since you already have the functionality to toggle the active class just add the nav ul li a to your existing function.
A CSS styling may be a potential solution.
all tags are displayed as blocks so in your CSS file add
.makeDisappear{
display:none
}
Although, I do recommend renaming your id for your navbar something a bit more unique.
so example jQuery would be:
$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");
//or simply $("#navbar").addClass("makeDisappear")
})
to make your nav bar reappear
change display:none to display:block

Creating a side-menu using html with jquery

I worked on a side-menu example program. Here the user clicks on the button to display a side menu with various option using html and java script. I have placed my html , js and css files separately, so, that my code looks clean. But on execution it not working properly, whereas when the whole code is placed in single file it works fine. What is the mistake Im making and How to place my code separately in the files so the expected out put is got.
Html:
<body>
<button id="button">Click</button>
<div id="menu">
<nav>
<ul style="list-style-type : none">
<li> Close </li>
<li>Home</li>
<li>Contacts</li>
</ul>
</nav>
</div>
<script src="sidemenu.js"></script>
Js:
var getDetails = document.querySelector("#menu");
console.log(getDetails);
var getButton = document.querySelector("#button");
var closeButton = document.querySelector("#close");
getButton.addEventListener("click",function(){
getDetails.addClass('opend');
});
closeButton.addEventListener("click",function(){
getDetails.removeClass('opend');
})
css:
ul{
list-style-type: none ;
}
This should be the functionality that you are looking for (assuming that the menu starts as hidden). You are using addClass and removeClass though and these are not baseline javascript functions. I have changed the js to be pure js to achieve the same result that you wanted though.
var getDetails = document.querySelector("#menu");
console.log(getDetails);
var getButton = document.querySelector("#button");
var closeButton = document.querySelector("#close");
getButton.addEventListener("click", function() {
getDetails.className += 'opend';
});
closeButton.addEventListener("click", function() {
getDetails.className = 'hidden';
})
ul {
list-style-type: none;
}
.hidden {
display: none;
}
.opend {
display: block;
}
<body>
<button id="button">Click</button>
<div id="menu" class="hidden">
<nav>
<ul>
<li> Close
</li>
<li>Home</li>
<li>Contacts</li>
</ul>
</nav>
</div>
</body>
<script src="sidemenu.js"></script>
addClass and removeClass are jquery functions. They do not work with pure JavaScript.
Add class using add function from JavaScript as:
getDetails.classList.add("opend");
And to remove class using JavaScript:
getDetails.className = "";
If you want to maintain some classes then add them again using add.

alert when multiple elements with the same class name have an added class

I need an alert to show up when all elements have had a class added to them
html
<ul class="container">
<li class="box"> </li>
<li class="box"> </li>
<li class="box"> </li>
</ul>
jquery -
$(document).ready(function() {
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
});
After each box is clicked, a class of 'Boxaddedclass' is added to each list with the class of '.box'.
jquery -
$(document).ready(function () {
$(".box").click(function () {
if($(".box").hasClass("Boxaddedclass")) {
alert('all boxes have the added class')
}
});
At the moment, after I click each individual Box class, an alert comes up each time, I need the alert to appear when all of them have the added class rather than individually. Any way around this?
Compare the number of elements classed .box with .Boxaddedclass
var boxCount = $(".box").length;
var addedBoxClass = $(".Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class"); //note that I don't support alert, you really should console.log it, or do something fancier
}
$(".box.Boxaddedclass") selector could be used to check .box elements also has .Boxaddedclass class.
Only using $(".Boxaddedclass") will not consider .box elements having Boxaddedclass class!
$('.box').click(function() {
$(this).addClass('Boxaddedclass');
});
$('button').on('click', function() {
var boxCount = $(".box").length;
var addedBoxClass = $(".box.Boxaddedclass").length;
if (boxCount === addedBoxClass) {
alert("All boxes have added the class");
} else {
alert('Not yet!')
}
});
.Boxaddedclass {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul class="container">
<li class="box">Content...</li>
<li class="box">Content...</li>
<li class="box">Content...</li>
</ul>
<div class="Boxaddedclass">Other content not having `box` class but `Boxaddedclass`</div>
<br>
<button>Check</button>

Hide/show div in ul with javascript

Let me start by saying I know this is a duplicate, however I couldn't find a solution by looking through previous answers so I was hoping someone can explain what I'm doing wrong with this.
This is part of a menu output by a php script:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
with the following as my script as per https://stackoverflow.com/a/11842992, which should show each submenu when hovering its parent container
function showMenu(a,b) {
$(a).hover(
function(){
$(b).show();
},
function(){
$(b).hide();
})
}
Javascript and CSS being my weak suits, could someone tell me where my problem is? I feel like onMouseOver doesn't work the way I would expect it to. However I am still learning to manipulate the DOM, please bear with me, thank you!
Edited to reflect missingno's suggestions
For simple scenarios, i'd rather stay away from using JS
Heres how
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
left:-999px;
background:grey;
}
#mtk_main_menu > li:hover > div {
left:0;
}
That will do the trick
Fiddle: http://jsfiddle.net/Varinder/7pXSw/
Edit
If you really want to go the JS way - heres how:
HTML
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0, mtk_div_submenu_0');">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
CSS
#mtk_main_menu:before,
#mtk_main_menu:after {
content:"";
display:table;
clear:both;
}
#mtk_main_menu {
*zoom:1;
}
#mtk_main_menu > li {
position:relative;
float:left;
}
#mtk_main_menu > li > div {
position:absolute;
display:none;
/*left:-999px;*/
background:grey;
}
#mtk_main_menu > li:hover > div {
/*left:0;*/
}
JS
function showMenu( args ) {
var arguments = args.split(",");
var submenuWrapper = arguments[1].replace(" ", "");
var $subMenuWrapper = $( "#" + submenuWrapper );
$subMenuWrapper.show();
var $menuItem = $subMenuWrapper.closest("li");
$menuItem.on("mouseout", function() {
$subMenuWrapper.hide();
$(this).off("mouseout");
});
}
Fiddle: http://jsfiddle.net/Varinder/vnwy3/1/
You are calling the event handler with a single string parameter instead of two. Try changing
showMenu('mtk_submenu_0, mtk_div_submenu_0')
into
showMenu('mtk_submenu_0', 'mtk_div_submenu_0')
Additionally, inside your script you should use are using literal strings instead of using your parameters
//This looks for an element of class "a"
$("a").hover(
//This uses the contents of the `a` variable instead:
$(a).hover(
Finally, your function is using 'mtk_submenu_0' as a jquery selector. This searches for a class instead of an id. Change the selector to add a "#" on front or change your jquery logic to not need ids (for example, you could create selectors to search for the first div and ul descendants of the current element.
By doing what you are doing, every time the onMouseOver event is triggered, you're attaching the jQuery hover event. Each time you're attaching another listener.
Instead, initialize your event on document ready:
$(function () {
$("#tk_div_submenu_0").hover(
function(){
$("#mtk_submenu_0").show();
},
function(){
$("#mtk_submenu_0").hide();
})
);
});
That will initialize it when the document is ready, and it will initialize it once.
Then just remove your onMouseOver event from the HTML.
<li class="mtk_topmenu">Manager Options ... </li>
First, you're going the long way around the problem. jQuery has a built in toggle method that performs the show/hide for you. Secondly you're putting the hover call on the child element of the item you're trying to show on hover. Here's an updated version of your code:
<ul id="mtk_main_menu">
<li class="mtk_topmenu" onMouseOver="showMenu(this,'mtk_div_submenu_0');">
Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
</ul>
JS:
function showMenu(a,b) {
var divStr = '#' + a.id + " div";
$(divStr).toggle();
}
I used the hover event on the LI element as it makes more sense in this case.
Here it is in a fiddle: http://jsfiddle.net/3Ecrq/
One thing I find strange about your code is that the first div you mention, mtk_submenu_0, is inside the div you are showing / hiding, mtk_div_submenu_0. Once you hide the outer div, the inner div cannot be 'hovered over', thus preventing it from being shown again.
To ensure the inner div does not get hidden, try something like this:
HTML:
<ul id="mtk_main_menu">
<li class="mtk_topmenu">Manager Options
<div id="mtk_div_submenu_0">
<ul id="mtk_submenu_0">
<li class="mtk_submenu">Preferences</li>
<li class="mtk_submenu">Employee Options</li>
</ul>
</div>
</li>
Javascript:
$(document).ready(function() {
$('.mtk_topmenu').hover(
function() {
$('#mtk_div_submenu_0').show();
},
function() {
$('#mtk_div_submenu_0').hide();
});
});
Because of your line:
<li class="mtk_topmenu" onMouseOver="showMenu('mtk_submenu_0', 'mtk_div_submenu_0');">
I assumed you were looking to have the mtk_div_submenu_0 div show / hide whenever the text Manager Options is moused over. Hopefully this helps!

Active link (the css?)

i've got a problem with the CSS. Normally I can get it right, but now it's just not working for me.
Got the menu-code
<nav>
<ul class="ca-menua">
<li class="home"><div class="ca-icona">O</div><span>Home</span>
</li>
<li class="info"><div class="ca-icona">e</div><span>Info</span>
</li>
<li class="komp"><div class="ca-icona">S</div><span>Kompetencer</span>
</li>
<li class="cases"><div class="ca-icona">F</div><span>Cases</span>
</li>
<li class="kontakt"><div class="ca-icona">#</div><span>Kontakt</span>
</li>
</ul>
</nav>
The i've got the javascript which add's the active class.
<script type="text/javascript">
$(document).ready(function(){
$('.home a.tooltip').addClass('active');
});
</script>
<script type="text/javascript">
$(function() {
$('a.tooltip').click(function(e) {
var $this = $(this);
$("#nav").load($this.attr('href'));
$('a.tooltip').removeClass('active');
$(this).addClass('active');
// prevent default link click
e.preventDefault();
})
});
</script>
This works fine, and adds the class, but I just can't get the CSS right!
I need some help with a prob. small problem.
The website link is: HERE
THE CSS:
a.tooltop.active{
color: #f3cb12;
font-size: 50px;
}
Just add the div part into a.tooltip.active selector so you get something like this:
a.tooltip.active div {
color: #F3CB12;
font-size: 50px;
}
I have assumed that you are trying to get the icon bigger and highlighted if the menu item is active. The problem is that it is not the anchor that should be getting new styles, but the child div element.

Categories

Resources