Develop Reference

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.

JS Toggle hides ALL toggled divs -- makes page non-functioning

Sorry if this is a silly question, I'm very new to JS/JQuery and don't know if there's a simple answer to my problem.
I have two toggling divs set up more or less like the following (this is the stripped-down version):
<div id="top-story-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
<div id="toc-panel">
<div id="story-toggle">
<ul>
<li id="top-stories">
Top Stories
</li>
<li id="toc">
All Stories
</li>
</ul>
</div>
</div>
With this function, the two divs toggle back and forth without a hitch, but if you click on one of the toggles ("top stories"/"all stories", respectively) and then click it AGAIN it hides the div it just showed and... can't find anything else to replace it with. Both divs are hidden now and there's no way for the user to interact with either div.
jQuery(function($) {
var $contentPanel= $('#top-stories-panel, #toc-panel')
$toggle= $("#top-stories, #toc");
$toggle.on('click', function(e) {
var $id;
e.preventDefault();
$icons.removeClass('hidden');
$id=$('#'+this.id+'-panel'); //get menu id
$contentPanel.fadeOut(10);
if(! $id.is(':visible')) {
$id.fadeIn(450)
preloadImages: 'all';
$(this).addClass('hidden');
}
});
});
I'm assuming that if I place the toggles outside of their respective divs, I won't have this problem -- but is there a code workaround for the toggle to stay within the div?
Thanks so much for all of your help ;_;

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.

How to implement a "pop down" like in gmail

I'm trying to implement a pop down panel like on the top bar of Gmail. If you click on the Setting icon, your name, or the Share link, a panel drops down...is there a jquery plugin or something that will allow me to quickly implement something to give a similar effect?

If you want a non jQuery cross browser solution I made this for someone on here yesterday:
http://jsfiddle.net/Paulpro/H4CLU/
It drops down when you click button and hides when you click it again, or anywhere in the document that isn't part of the drop down.
Only thing you'd need to change is probably some CSS stuff to style it nicely.

Here's a jsFiddle that show how you can implement something like this.
Basically, you're capturing clicks on the body element, if they clicked on settings, you show the "panel" div. If they clicked something else, you hide it.
JS:
$(function() {
$('body').click(function(e) {
if ($(e.target).attr('id') == 'settings') {
$('#panel').show();
} else {
$('#panel').hide();
}
});
});
HTML:
<span id="settings">Settings</span>
<div id="panel">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
CSS:
#panel { display: none; border: 1px solid #000;}

Yes, I suggest to use jQuery (everytime you use JS). It is really easy to create a layer like this:
<div id="layer">content</div>
<a id="button" href="#">show</a>
<script type="text/javascript">
$(document)ready(function(){
$('#layer').hide();
$('#button').click(function(e){
e.preventDefault();
$('#layer').show();
});
});
</script>