How to check if subMenu is shown without setInterval function? - javascript

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>

Related

I'm trying to make my navigation responsive

Either the toggle or the links aren't working. Currently it's the
toggle and I've tried everything.
<div class="navbar">
<nav>
<ul id="menulist">
<li>HOME</li>
<li>CV</li>
<li>PAINTINGS</li>
<li>DIGITAL</li>
<li>WEB DESIGN</li>
</ul>
</nav>
<img src="images teodora/Vector.png" class="menu-icon" onclick="togglemenu()">
</div>
The script for the dropdown toggle function
<script>
var menulist= document.getElementById("menulist");
menulist.style.maxHeight="0px";
function togglemenu()
{
if (menulist.style.maxHeight=="0px")
{
menulist.style.maxHeight="130px";
}
else
{
menulist.style.maxHeight="0px";
}
}
</script>
<Cannot make it work, I really don't have enough knowledge, I would
appreciate the help.

Add class to a div if another div has a class

I did a lot of searching and read dozens of questions and answers on this topic and wrote the following code but it won't work for some reason. I'm looking for help troubleshooting this.
This is what I want to happen:
When the user hovers over a menu item, a dropdown appears.
Then the entire header (currently has the ID #header) gets a new class (.header-new-class)
I found that when they hover over a menu item (li), the site automatically adds the class "open" to the menu item (the menu item already has the class .menu-item)
So my logic is, when the menu item has the class "open", it adds the class "header-new-class" to the div with the ID #header
This is a very cleaned up version of the HTML:
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
This is the code I wrote:
$(document).ready(function(jQuery) {
if ($('.menu-item').hasClass('open')) {
$('#header').addClass('header-new-class');
}
});
It's not working. What am I doing wrong?
Thanks in advance.
if you want to add a class on the header when the mouse is on the menu item, do it like this,
if you also want to remove the class then use the commented code below.
if you have questions, feel free to ask
$(document).ready(function(){
$('.menu-item').on('mouseover',function(){
/*$('.menu-item').removeClass('open');
$(this).addClass("open");*/
if($(this).hasClass('open')){
$('#header').addClass('yourNewClass');
}else{
$('#header').removeClass('yourNewClass');
}
});
/*$('.menu-item').on('mouseleave',function(){
$('.menu-item').removeClass('open');
$('#header').removeClass('yourNewClass');
});*/
});
.yourNewClass .menu-item.open {color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item open">
item 1
</li>
<li class="menu-item">
item 2
</li>
<li class="menu-item">
item 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
You can use same event many times. So, this is achievable with normal .hover.
$(document).ready(function(){
$('.menu-item').hover(function(){
$('#header').addClass('header-new-class');
},function(){
/* function to remove class when hovering is over */
})
If you absolutely need to check if the class open is present you can do it inside the hover function.
You can also use mouseenter and mouseleave
$(document).on({
mouseenter: function () {
//stuff to do on mouse enter
},
mouseleave: function () {
//stuff to do on mouse leave
}
}, ".selector");
Why you are set class for hover via jquery. CSS have functionality of :hover which give the same effect that you want.
#header:hover{
background-color : lightBlue;
}
.menu-item:hover{
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ID="header">
<div>
<div>
<div>
<div>
<div>
<nav>
<nav>
<div>
<div>
<ul>
<li class="menu-item">
Sample Link 1
</li>
<li class="menu-item">
Sample Link 2
</li>
<li class="menu-item">
Sample Link 3
</li>
</ul>
</div>
</div>
</nav>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>

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>

Locate the value of an attribute, match and find the value on other elements and alter the css

So essentially I am trying to find the value of an attribute, in this instance, 'data-location', and then search for that value elsewhere, in this instance in the form of an ID, and alter the CSS for that matched value.
I have the below so far which I thought would work, but I am not sure how to check for various different values for various elements and apply accordingly, so I have grouped the different sections in div's with classes so I can break them up from one another
Thanks guys
var getvalue = $('ul#test').find('li').attr('data-location');
if( $('div.other div').attr('id').val() == getvalue ) {
$( this ).css('background-color','red');
};
#thebirchplot3 {
padding:30px;
background:#fff;
}
#theashplot3 {
padding:30px;
background:blue;
color:#fff;
}
#thediveplot1 {
padding:30px;
background:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="theashplot3">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
<div id="thediveplot1">
adfasdfasfsafdsafdsfsadfdsafdsafdsfafadsf
</div>
</div>
</div>
You need to do it like below:-
Working Example:-
$('ul#test').find('li').each(function(){ // iterate over each li element
var ultest = $(this); //assign current li object to variable
$('div.other').children().each(function(){ // now iterate to each child div of other div
if($(this).attr('id') == ultest.data('location')){ // compare id with data-location
$( this ).css('background-color','red'); // if same then add background color
}
});
});
#thebirchplot3 {padding:30px;background:#fff;}
#theashplot3 {padding:30px;background:blue;color:#fff;}
#thediveplot1 {padding:30px;background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 id="title">Change CSS based on values</h1>
<ul id="test">
<li data-location="thebirchplot3">one</li>
<li data-location="theashplot3">two</li>
<li data-location="thediveplot1">three</li>
</ul>
<ul id="show">
<li data-location="theashplot3">one</li>
<li>two</li>
<li>three</li>
</ul>
<ul id="display">
<li data-location="thediveplot1">one</li>
<li>two</li>
<li>three</li>
</ul>
------
<div>
<div class="other">
<div id="thebirchplot3">
this is dummy
</div>
<div id="thebirchplot355435">
text
</div>
<div id="theashplot3">
which shows you
</div>
<div id="theashplot35465464">
that everything
</div>
<div id="thediveplot1">
working fine now
</div>
</div>
</div>
use jquery find() method for your requirement as
var getvalue = $('ul#test').find('li').attr('data-location');
$('div.other').find('#'+getvalue).css('background-color','red');
working fiddle is js fiddle

What's wrong with this? Load Pages when links are clicked

I am using Ajax for a website I am in the process of developing and something is wrong with this code... When the URL is something like mywebsite.com?about I want the about page to be displayed.
Here is the HTML portion of the code (NOTE: When a link is pressed Text is to be inserted into the DIV 'content'):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="script/open_page.js"></script>
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
</div>
Here is a portion of the JavaScript:
var currentpage;
function load_about() { // Loads About Us
if ($current_page == "about") {
$(document).ready(function(){
$("#content").load("contents/about.html");
});
}
}
Thanks for any suggestions or answers...
Since you are calling load_about on click of home page link, I don't think the if condition is necessary. Also the use of dom ready is wrong in this case
It should be
function load_about() { // Loads About Us
$("#content").load("contents/about.html");
}
If it is upto me, I may do it slightly differently
<div id="wrapper">
<div id="header">
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
</div>
And
$(document).ready(function(){
$('#header ul.nav li').click(function(){
$("#content").load($(this).find('a').attr('href'));
return false;
})
});
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Exchanges</li>
<li>Photos</li>
<li>Contact</li>
</ul>
$(function() {
$('.nav').on('click', 'a', function(e) {
e.preventDefault();
var pageToLoad = $(this).data('page');
$.get('contents/' + pageToLoad + '.html'), null, function(response) {
$("#content").html(response);
});
});
});

Categories

Resources