Develop Reference

Javascript to hide an element based on the contents of an active-class element elsewhere

I'm trying to hide some elements on a page based on the contents of the specific element in a navbar (formed as a list) which has an active class. Here's what I've tried so far.
var element=document.querySelector('ul.nav > li.active')
if((typeof element != 'undefined')?element.innerText == "Page 1")
{
document.getElementById("options1").style.display = 'none';
}
And the HTML that I need to work with is basically as follows.
<ul class="nav navbar-nav navbar-left">
<li class="active">
Page 1
</li>
<li>
Page 2
</li>
<li>
Page 3
</li>
</ul>
<div id="options1">Stuff Here</div>
The behavior that I want is that when Page 1 is active, the <div> is hidden, and when all other pages are active, the <div> is visible.
I've tried a bunch of closely related things from stack overflow but haven't managed to get anything to work yet.
Thanks! I'm pretty new to javascript.

You can get the # called by your link with window.location.hash is JS like
if (window.location.hash === "#section-page-1") {
document.getElementById("options1").style.display = 'none';
}
This should work

Html list item keep active on hover

I am having an issue which i would like to solve. i have created a menu for an ecommerce site. The menu works fine. Unfortunately i cannot copy the whole code here cos it is too much but i made a short version and a picture to present the structure of the menu.
The main concept is when a button is clicked on the main nav a dropdown menu opens which has 2 columns. The left site has further buttons and the right side is where the div containers will be shown depending on the active list item on the left side. That is where the issue occours.
Because the container opens by hovering on the list item not by clicking it. When the mouse is over the li it gets highlighted but when the mouse is out the highlight color disappears.
I would like to keep the active li item highlighted until the mouse hovers on another li item.
Somehow i should get the row(item) which is hovered, change the css class for highlighted and keep until another row gets hovered. Then remove the css class and do the same with the new active list.
Hope i mad it clear. :-)
here are the html codes and the structure.
<nav class="navbar navbar-default" role="navigation">
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="button1"> </a>
<div class="dropdown-menu">
<div class="col-sm-3">
<ul class="submenu-list">
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div class="col-sm-9" id="submenubox1">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
<div class="col-sm-9" id="submenubox2">
<h3>Subbox Title</h3>
<div>Content</div>
</div>
</div>
</li>
</ul>
</div>
</nav>
The code im trying is the following using the menu.aim javascript:
<script src="jquery.menu-aim.js" type="text/javascript"></script>
<script>
var $menu = $(".dropdown-menu");
$menu.menuAim({
activate: activateSubmenu,
deactivate: deactivateSubmenu
});
function activateSubmenu(row) {
var $row = $(row);
// Keep the currently activated row's highlighted look
$row.find("a").addClass("maintainHover");
}
function deactivateSubmenu(row) {
//remove the row's highlighted look
$row.find("a").removeClass("maintainHover");
}
</script>
however this code is not working. Im am not sure if this would be the right way to solve this thought.
Also i have tried to use to css code:
ul.class li:hover{
background-color: red !important;
}
But this is not working either.
Here is a similar example what iam trying to achieve.
https://rawgit.com/kamens/jQuery-menu-aim/master/example/example.html
Any help would be appropriated.
Thank you!

Use jQuery to add an active class to the hovered item -
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(this).parent().find('.submenu-list-item.active').removeClass('active');
$(this).addClass('active');
});
This will add active class only when hovered over items of the same parent i.e. same submenu

Somewhat I can understand your question. I have tried this plugin. It may satisfy your need.
Bootstrap Submenu

Thanx for all replies.
With the help of Rohit answer I made it work.
However I had to change a line.
$(this).parent().find('.submenu-list-item.active').removeClass('active');
this line was not working for me unfortunatelly.
It did not remove the highlighted item once another got hovered on. Instead of this I removed the class from all items(a) in the ul.
$('.submenu-list-item:not(.active)').on('mouseover', function() {
$(".submenu-list a").removeClass();
$(this).addClass('active');
});
Anyway thanks for the bootstrap answer as well. I will learn some new stuffs from there.

hovering over list item, only one item showing up instead of all

HI I am trying to make a menu where items show up as they hover. I am quite new to jquery, css, etc. and I cant quite figure out what my problem is. Right now I do get my div to show up on hover, but instead of just one all of them show up.
How do I make the div tag of only the item I hover over show up.
Here is the fiddle:
<ul class="navi">
<li> <a class='light'>
Item1
<div class="hover-name" style="display:none">
Businesses
</div>
</a>
</li>
<li> <a class='light'>
Item2
<div class="hover-name" style="display:none">
Agencies
</div>
</a>
</li>
<li> <a class='light'>
Item3
<div class="hover-name" style="display:none">
Billing Plans
</div>
</a>
</li>
</ul>
http://jsfiddle.net/Samfr/
For example if I hover over Item1 then only Businesses would show up. Item2 only Agencies show up
Thank you

You are using the following to show the items:
$('.hover-name').show();
What this does is find everything within the doucment that has a class of .hover-name and does the show() function on it.
All you need to do is change the show line to be context aware:
$(this).find('.hover-name').show();
Using $(this).find('.hover-name') will find all the elements inside of what you hovered over with a class of .hover-name and show that, instead of showing all of them.
Additionally, if you wanted to hide the shown elements when you move over a new element, you could use the following:
$('.navi > li a.light').hover(function () {
$('.hover-name').hide();
$(this).find('.hover-name').show();
});
$('.hover-name').hide(); will hide everything with the class of .hover-name and then show the items inside the element you are currently over.

This code is going to hide the other elements:
$('.navi > li a.light').hover(function () {
$(this).parent().parent().find('.hover-name').hide();
$(this).find('.hover-name').show();
});
Fiddle

You can use the currentTarget of the event, which will return the element that was hovered, and you can use that to filter to only show the hover-name of that element:
$('.navi > li a.light').hover(function (e) {
$(e.currentTarget).find('.hover-name').show();
});
(http://jsfiddle.net/Samfr/4/)

Creating navigational pages with jquery

I actually didn't really know how to phrase the question title, but here is the description. Suppose I'm using jQuery to show/hide uls that are stacked on top of each other (absolutely positioned). For example:
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
I have a controller button, that when pressed, simply changes the z-index of these uls. The controller button is literally just:
My button
With jQuery code that does: (I'm using the jQuery cycle plugin)
$('#mybutton').click(function() {
// check which ul is currently shown
// change z-index, so that the next ul is to be shown
});
THE QUESTION:
In my site, I have several pages that I would like to point to the second ul, so that when clicked, it'll bring them to the page with all of the uls, but only the second one will be shown. It would be the same if the person went to the page, had the default first ul shown, and then clicked "next" to proceed to the next ul. I am simply wondering if it's possible to avoid pressing "next", and just bring the user directly to the page and have the second ul shown.

I think you can use the hash-tag from the URL. You can then write an if statement like this:
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
Or directly as a copy and paste example:
<html>
<script src="http:////ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>
$(function(){
if(location.hash === "#2"){
$("#one").hide();
}else{
$("#two").hide();
}
$('#mybutton').click(function(e) {
$("ul").toggle(); //quick n dirty! only works with 2 lists :)
e.preventDefault();
});
});
</script>
<body>
My button
<ul id="one">
<li>First Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>Second Item!</li>
<li>blah</li>
<li>blah2</li>
</ul>
To second page (you might have to refresh, notice the #2 at the end of the url!)
​</body>
</html>
Also notice I've inserted a e.preventDefault(); at #mybutton's click listener to prevent the URL changing back on clicking.

If I am understanding you correctly, perhaps you can accomplish this via a page wrap with a unique id per page? You can swap the id out with JS or server side logic, depending on what you're trying to do.
<div id="page-one">
<ul id="one">
<li>blah</li>
<li>blah2</li>
</ul>
<ul id="two">
<li>blah</li>
<li>blah2</li>
</ul>
</div>
then your css will be #page-one #one { display:block }; #page-two #one { display : none }; etc.

if mouse on hover of div then display menu

I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the "div".
Im stuck... and have tried for hours searching for if statements etc, i just cant get the syntax correct.
my example

Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I'd prefer using a click event after the first hover or something, this way the user won't get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});

Make it a child of the <div>, then it won't cancel the event when you leave it.
Also I should note that it's more semantic to make a navigation out of nested lists (such as
Category ItemItem
<ul>
<li>Category
<ul>
<li>Item</li>
<li>Item</li>
</ul>
</li>
</ul>

I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.

http://jsfiddle.net/dttdB/13/
You had attached hover to the heading div when the mouse leaves that, the hover effect is lost.