Maintain my CSS even if I click outside of the item - javascript

I am learning CSS and by now I have this :
https://jsfiddle.net/marquesm91/ahwxwyca/
Basically, I want to highlight the element I clicked on and stay highlighted when I click outside of the element. When I am switching between elements it only highlights the actual element.
$(function() {
$('#menu').metisMenu({
toggle: false // disable the auto collapse. Default: true.
});
});
#menu a:hover,
#menu a:focus {
color: #fff;
background-color: #2a6496;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="http://rawgit.com/onokumus/metisMenu/master/dist/metisMenu.min.css" rel="stylesheet" />
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-xs-6">
<aside class="sidebar">
<nav class="sidebar-nav">
<ul class="metismenu" id="menu">
<li>
Menu<span class="glyphicon arrow"></span>
<ul aria-expanded="false">
<li>item 2.1
</li>
<li>item 2.2
</li>
<li>item 2.3
</li>
<li>item 2.4
</li>
</ul>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</div>
By now, my CSS don't help me. Any suggestions?

CSS can interact with hover, but does not have the capability to interact with clicks in the way you describe. You will need Javascript.
$('#menu').find("a").click(function(){
$(this).css("background-color","#2a6496");
$(this).css("color","#fff");
});
Here's a fiddle.
PS, When making fiddles with jQuery, be sure to select jQuery from the JS menu.
Maybe this is closer to what you want:
$('#menu').find("a").focus(function() {
$('#menu').find("a").each(function() {
$(this).css("background-color", "initial");
$(this).css("color", "initial");
});
$(this).css("background-color", "#2a6496");
$(this).css("color", "#fff");
});
https://jsfiddle.net/zq0cpohb/
This only highlights the last element clicked on..

This isn't really possible without some CSS hack.
The best way to do this would be through JavaScript.
Try something like this:
$("#menu a").click(function() {
$(this).addClass("focused");
});
And the CSS:
.focused {
color: #fff;
background-color: #2a6496;
}

Related

How to show one div at a time with least lines of code?

I am trying to show only one div at a time once a link is clicked. My codepen I was working on is here if someone could take a look. I'm trying to use jQuery so that when an element inside a list item is clicked it toggles that div item to display ONLY until another item is clicked which hides the previous item.
$( "#home_div" ).hide();
$( "#about_div" ).hide();
$( "#home" ).click(function() {
$('#home_div').toggle();
});
$( "#about" ).click(function() {
$('#about_div').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li id="home">Home</li>
<li><a id="about" href="#">About</a></li>
<li><a id ="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div id="home_div"></div>
<div id="about_div"></div>
<div id="portfolio_div"></div>
<div id="contact_div"></div>
</header>
</body>
To make this work in a generic manner (and therefore keep the JS as short as possible) you can place the id of the target content within the href property of the a elements. Then you can simply toggle() the target div whilst hiding its siblings, like this:
$('.main-nav a').click(function(e) {
e.preventDefault();
$($(this).attr('href')).toggle().siblings().hide();
});
#content-container div {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ul class="main-nav">
<li>Home</li>
<li>About</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
<div id="content-container">
<div id="home_div">Home</div>
<div id="about_div">About</div>
<div id="portfolio_div">Portfolio</div>
<div id="contact_div">Contact</div>
</div>
Give all the content a common class. Then use the id of the nav link to create selector for the content to show
$('.main-nav a').click(function(e) {
e.preventDefault();
// hide all content class and filter the matching id to show
$('.content').hide().filter('#' + this.id + '_div').show();
});
.content {
display: none
}
.content:first-of-type {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css#3.5.2/animate.min.css">
</head>
<body>
<header class="header">
<ul class="main-nav">
<li><a id="home" href="#">Home</a></li>
<li><a id="about" href="#">About</a></li>
<li><a id="portfolio" href="#">Portfolio</a></li>
<li><a id="contact" href="#">Contact</a></li>
</ul>
<div class="content" id="home_div">home_div</div>
<div class="content" id="about_div">about_div</div>
<div class="content" id="portfolio_div"></div>
<div class="content" id="contact_div">portfolio_div</div>
</header>
</body>
How about zero javascript? You could change the menu to be labels that tie to radio buttons that control which div shows. The CSS only shows the div immediately after the radio button that is currently selected, modifiable by clicking any of the menu labels.
[name=mainNavState] { display: none; }
[name=mainNavState] + div { display: none; }
[name=mainNavState]:checked + div { display: inherit; }
<ul class="main-nav">
<li id="home"><label for="homeState">Home</label></li>
<li><label for="aboutState">About</label></li>
<li><label for="portfolioState">Portfolio</label></li>
<li><label for="contactState">Contact</label></li>
</ul>
<input type="radio" name="mainNavState" id="homeState" checked>
<div id="home_div"> My Home Stuff </div>
<input type="radio" name="mainNavState" id="aboutState">
<div id="about_div"> My About Stuff </div>
<input type="radio" name="mainNavState" id="portfolioState">
<div id="portfolio_div"> My Portfolio Stuff </div>
<input type="radio" name="mainNavState" id="contactState">
<div id="contact_div"> My Contact Stuff </div>

Hide and show li active tags in javascript

<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
I want to show only active li tags ,while other li tags will be hide.
Excepted Output will be
Type
I try javascript
$( document ).ready(function() {
$('#shop li.active').show();
});
But nothing will happen..
Using jQuery, you need to hide which are not active
$(document).ready(function() {
$('#shop li:not(.active)').hide();
$('#shop li.active').show();
});
Can be done using CSS as well
#shop li:not(.active){
display: none;
}
I want to show only active li tags ,while other li tags will be hide.
Hide the siblings
$('#shop li.active').show().siblings().hide();
Demo
$(document).ready(function() {
$('#shop li.active').show().siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>
But nothing will happen..
Since there was no logic for hiding the li's, only showing them. As shown above, you need to show the active ones and hide rest of them.
You have to add a little bit of css which will hide li tags by default
ul li{
display:none
}
https://jsfiddle.net/jzj6o5ms/1/
You can use .not & hide
$(document).ready(function() {
$('li').not('.active').hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product">
<ul id="shop">
<li> Vision </li>
<li class="active">Type</li>
<li> Energy</li>
</ul>
</div>

submenu not loading on hover

I have menu and submenu which was created totally as divs instead of ul li. So, on hovering the menu element, I need to target a particular div and show as submenu. I have written a jquery event by passing submenu id as data-target to target the specific div to show as submenu. When I apply break points, the loop is going inside., but unable to remove initial property of submenu (display:none) to (display:block). Here is the plunker link for more details. please let me know where i`m going wrong.
I understand this div approach is not right one. But I have to develop according to existing HTML
$("#mainDiv div").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(liID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
jQuery('#' + menuliID).hover(function(){
console.log("entered inside function");
$('#' + subMenuId).css('display', 'block !important');
console.log('"#' + subMenuId + '"');
},
function () {
console.log("entered inside 2nd function")
jQuery('#' + subMenuId).css('display', 'none');
}
);
}
);
please change
$('#' + subMenuId).css('display', 'block !important');
into
$('#' + subMenuId).show();
as it is not necessary to apply .css() as you can do your work with .show() or .hide()
and please see my working snippet
// Code goes here
$("#mainDiv > .menuli").hover(function () {
var menuliID = this.id; // id of clicked li by directly accessing DOMElement property
console.log(menuliID);
var subMenuId = jQuery(this).attr('data-target'); // jQuery's .attr() method
console.log(subMenuId);
if($('#' + subMenuId).is(":visible")){
$('#' + subMenuId).hide();
}else{
$('#' + subMenuId).show();
}
}
);
/* Styles go here */
#mainDiv div{
border:1px solid;
width:30%;
}
.submenu{
position:absolute;
top:0;
left:24%;
}
.submenu ul li{
border:1px solid;
list-style:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div id="mainDiv">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
</body>
</html>
You can simplify your code to the following. You just need to toggle the display of the sub menus when hover over main menu.
I have attached hover event to submenu so that it is displayed on mouse over.
//Toggle display of submenu when hover on main menu
$("#mainDiv div").hover(function () {
$('#' + $(this).attr('data-target')).toggle();
});
//Display submenu when hover on it
$(".submenu").hover(function(){
$(this).show();
}, function(){
$(this).hide();
})
.submenu {
border: 1px solid transparent;
}
.menuli{
padding-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv" style="display:inline-flex;padding-top:10px;">
<div id="menu1" class="menuli" data-target="submenu1">Menu1</div>
<div id="menu2" class="menuli" data-target="submenu2">Menu2</div>
<div id="menu3" class="menuli" data-target="submenu3">Menu3</div>
</div>
<div id="submenu1" class="submenu" style="display:none;">
<ul>
<li>Subelement1</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu2" class="submenu" style="display:none;">
<ul>
<li>Subelement4</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>
<div id="submenu3" class="submenu" style="display:none;">
<ul>
<li>Subelement5</li>
<li>Subelement2</li>
<li>Subelement3</li>
</ul>
</div>

Hide content on menu link secondary click

Here is some code and a question: how to enable toggle effect after clicking again on menu link button with saving existing functionality? So I need to hide content on second click (secondary click on link one hides content 1, etc.) All other staff is working perfect, but I have something broken in my jQuery. Also, maybe I have too many non-useful lines of code here. Please correct me if you can.
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
Content 1
</div>
<div class="menu is-hidden" id="link_2">
Content 2
</div>
<div class="menu is-hidden" id="link_3">
Content 3
</div>
<div class="menu is-hidden" id="link_4">
Content 4
</div>
<div class="menu is-hidden" id="link_5">
Content 5
</div>
<div class="menu is-hidden" id="link_6">
Content 6
</div>
Here is a pen containing the code for this example.
What you really want is, just hide other divs except the selected one, when you click on the respective link and again hide it with second click.
Well It doesn't need that kind of messy javascript code
$(function(){
$('.clicker').click(function(e){
$('.menu').hide();
$('#link_'+$(this).attr('target')).toggle();
});
});
.menu{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu" id="link_1">
Content 1
</div>
<div class="menu" id="link_2">
Content 2
</div>
<div class="menu" id="link_3">
Content 3
</div>
<div class="menu" id="link_4">
Content 4
</div>
<div class="menu" id="link_5">
Content 5
</div>
<div class="menu" id="link_6">
Content 6
</div>
.
I think this must be a complete solution for your problem.
It seems that your onClick function on anchors are not working exactly as you had in mind. Here's what I'm going to do:
First, let's get rid of other functions, mouseup and menu click. You can elaborate on those matters later.
For the problem at hand, your anchor click function, just toggle the divs. You can select which div to show/hide by using the hrefs.
Just remove the dash from the href and sent it to jQuery selector. Then you can toggle it. I seperated the code into multiple lines for the sake of understanding.
Hope this helps.
anchor.click(function() {
var href = $(this).attr("href").replace('#', '');
var div = $('#' + href);
$('div.menu').not(div).hide();
$(div).toggle();
});
Here's a pen
The solution finds me. Only JS below:
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
$(this).parent().siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
// close menu when clicking inside of it
$('body').click(function(e) {
var el = e.target || e.srcElement;
// if the target of the click isn't the other menu nor navigation link
if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});

How to check if subMenu is shown without setInterval function?

I've got a problem. I have some submenus on my website that i show and hide with jQuery.
The #Sekundar is the submenu, but what i want to ask about is, Is there a better way to check if the menu is shown or not shown?
I couldn't get it make it work unless i put a setInterval on it, and that isn't the best way of doing it i think? Any suggestions?
Here is the JS code:
function sekundarmenu() {
$('#sekundar').fadeToggle();
$('#sekundar2').hide();
$('#sekundar3').hide();
$('#sekundar4').hide();
$('#sekundar5').hide();
}
setInterval(function () {
if ($("#sekundar").is(":visible") || $("#sekundar").css("display")== "block") {
$("#li1").css("background-color", "#24ac5f");
}
else {
$("#li1").css("background-color", "transparent");
}
}, 1);
And the HTML:
<nav id="primar">
<ul>
<li id="li1"><a onclick="sekundarmenu()" class="pointer">Indhold</a></li>
<li id="li2"><a onclick="sekundarmenu2()" class="pointer">Nyheder</a></li>
<li id="li3"><a onclick="sekundarmenu3()" class="pointer">Billeder</a></li>
<li id="li4"><a onclick="sekundarmenu4()" class="pointer">Bruger</a></li>
<li id="li5"><a onclick="sekundarmenu5()" class="pointer">Diverse</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
Since there are many ways to solve similar problems you have to choose the one that best suits your case.
in this Fiddle
i thought to solve the problem in another way by adding some classes in your html code. In this way the jQuery code is drastically reduced.
I also added the ability to disappear the submenu on mouseleave, if you don't like this solution you can easily delete the lines of code highlighted in the fiddle.
If you like this solution remember to flag in green my answer ;)
all jQuery code you need is:
<script type="text/javascript">
$(document).ready(function(){
$('li.principal').click(function(){
var whatSubmenu=$(this).attr('id').slice(1)
$('li.principal').css("background-color", "transparent")
$(this).css("background-color", "#24ac5f")
$('div.sekundar').hide()
$('.'+whatSubmenu).fadeIn()
})
/*IF you don't want the submenu disappear on mouseleave comment these lines of code*/
$('div.sekundar').on('mouseleave',function(){
$(this).hide()
$('li.principal').css("background-color", "transparent")
})
})
</script>
html:
<header>
<nav id="primar">
<ul>
<li class="principal" id="li1"><a class="pointer">Indhold</a></li>
<li class="principal" id="li2"><a class="pointer">Nyheder</a></li>
<li class="principal" id="li3"><a class="pointer">Billeder</a></li>
</ul>
</nav>
</header>
<div id="sekundar" class="sekundar i1">
<nav class="nav2">
<ul>
<li>Osadff</li>
<li>Rwefewg</li>
<li>Reehjy</li>
</ul>
</nav>
</div>
<div id="sekundar2" class="sekundar i2">
<nav class="nav2">
<ul>
<li>dgdgdg</li>
<li>sdfdfdg</li>
</ul>
</nav>
</div>
<div id="sekundar3" class="sekundar i3">
<nav class="nav2">
<ul>
<li>defdgdgdg</li>
</ul>
</nav>
</div>
In this simple example, you have a button that displays or hides your sub menu.
To verify if the menu is visible just give it a class using the toggleclass method and then check for the presence of that class.
<!DOCTYPE HTML>
<html>
<head>
<style>
#sekundar{
display:none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').click(function(){
$('#sekundar').toggleClass('visible')
if($('#sekundar').hasClass('visible')){
alert('not visible')
$('#sekundar').show()
}else{
alert('visible')
$('#sekundar').hide()
}
})
})
</script>
</head>
<body>
<div id="sekundar" class="sekundar">
<nav class="nav2">
<ul>
<li>Opret Tekster</li>
<li>Rediger/Slet tekster</li>
<li>Rediger kontakt</li>
</ul>
</nav>
</div>
<input name="" type="button" value="check" id="test">
</body>
</html>

Categories

Resources