Expanding menu on click - javascript

I have a basic menu looking something like this.
<ul id="menu">
<li id="auctions">Auctions</li>
<li class="submenu">Submenu 1</li>
<li class="submenu">Submenu 2</li>
<li class="submenu">Submenu 3</li>
</ul>
I want the three submenus to be hidden until the text "Auctions" is clicked. Then they're supposed to appear, and become hidden again when "Auctions" is clicked a second time and so on. Ive tried something like this.
$(function() {
$('#auctions').click(function() {
$('#menu').animate({'height': '200'});
$('#submenu').animate({opacity : 'toggle'});
}, function () {
$('#menu').stop().animate({'height': '100'});
$('#submenu').animate({opacity : 'toggle'});
});
});
In all honesty I suck at jquery. How do I approach this?

Use jQuery's .slideToggle(), also make sure .submenu is not visible:
JAVASCRIPT:
$(function() {
$('#auctions').click(function(){
$('.submenu').slideToggle();
});
});
CSS:
.submenu{display:none;}
DEMO: http://jsfiddle.net/dirtyd77/SLGdE/4/

why dont you use this code :
$(function() {
$('.submenu').hide();
$('#auctions').click(function() {
//$('#menu').animate({'height': '200'});
$('.submenu').toggle("slow");
});
});
apart from that you use "#submenu" and in your html its class you should use ".submenu"

Your basic structure is fine, yet i wouldn't use css(). Use slideToggle() in stead:
$(function() {
$('#auctions').click(function() {
$('.submenu').slideToggle();
});
});

Does this work for you?
$('#auctions').click(function(){
$("#menu, .submenu").toggle();
});

Related

display div dynamically on click

I'm basically trying to replicate what you get on google images with a div appearing from an onClick event directly below the row of images containing the anchor that is clicked. I've found code for the show and hide methods which is pretty easy, as per below:
$(document).ready(function(){
$("#hide").click(function(){
$("#imageBox").hide("slow");
});
$('a').click(function(){
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "images/profiles/male-silhouette.jpg" style="margin:20px;" />';
});
});
However I can't get around the div appearing wherever I place it in the HTML. For instance, in the code below the div with image and text will obviously always appear between the first and second lists, in the same place:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<div id="imageBox">
<button id="hide" class="hButton">X Close</button>
<p id="displayImage"> </p>
</div>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
After searching on Google and Stack Overflow I've not even come close to learning how to do this. Can anyone point to some open source code or a tutorial?
jQuery is used to select elements and apply CSS to them and much more. You can learn a lot about jQuery on their website:
http://api.jquery.com/id-selector/
The CSS is what provides the animation, with 'transitions'.
a box opening would change size (height for example) and you'd want to put a transition tag on the height property in the CSS of the particular div.
http://css3.bradshawenterprises.com/transitions/
To learn jQuery, CSS, HTML and all, I recommend starting with W3Schools:
http://www.w3schools.com/default.asp
http://www.w3schools.com/css/css3_intro.asp
http://www.w3schools.com/jquery/default.asp
you can try
$('button funtion').on('click', function(event) {
$('sample1').className;
$('sample1').removeClassName('hidden');
$('sample1').className;
$('sample2').className;
$('sample2').addClassName('hidden');
$('sample2').className;
});
attribute hide must be created in css
hidden {
visibility: hidden;
}
or you can searh for toogle class, this method invert the property
$("button").click(function(){
$("p").toggleClass("hidden");
});
You have the placed the document.getElementById("displayImage").innerHTML in the $('a').click(function () { where there is no anchor tag at all in the markup..
put the code inside the document.ready
$(document).ready(function () {
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
$('a').click(function () {
$("#imageBox").show("slow");
});
});
DEMO FIDDLE
NOTE: can't understand your $('a').click(function () { as i can't see any anchor tags in the markup.
Change after your comment:
$(document).ready(function () {
$("#imageBox").hide();
$("#hide").click(function () {
$("#imageBox").hide("slow");
});
$('a').click(function () {
$("#imageBox").show("slow");
document.getElementById("displayImage").innerHTML = '<img src = "http://www.clipartbest.com/cliparts/7Ta/MBz/7TaMBzMqc.png" width="30px" height="30px" style="margin:20px;" />';
});
});
UPDATED FIDDLE

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!

Using Javascript if statements with and operator and selectors to create navigation bar

i'm trying to create my own navigation bar using Javascript, this is what I have so far.
$(document).ready(function() {
<nav class="menuL">
<ul id="menu">
<li><span></span>portfolio</li>
<ul id="submenu">
<li id="first">Wine</li>
<li id="second">Landscape</li>
<li id="third">Divers</li>
</ul>
<script>
$('#submenu').hide();
</script>
<script>
if ($('#portmenu').mouseover() || $('#first').mouseover() || $('#second').mouseover() || $('#third').mouseout()) {
$('#submenu').show();
} else {
$('#submenu').hide();
}
});
</script>
The submenu is infact being hidden but when I hover over portmenu, the submenu does not appear.. any ideas on what is wrong? I'm new to javascript so I have no idea if im using the selectors, OR operators and the if statements correctly.
Basically what I'm trying to do is, if the main portmenu is hovered over or if first, second and third are being hovered over, then show the sub menu. Otherwise, hide it. I'm trying to do this because if I just create a function which shows the submenu if portmenu is being hovered over, then the moment I hover of the text 'portfolio' the submenu goes away.
You can do it CSS only:
#menu > #submenu{
display: none;
}
#menu:hover > #submenu{
display: block;
}
DEMO: http://jsfiddle.net/Wp5sF/
jsFiddle Demo
You should probably do something more along these lines by taking advantage of jQuery's hover:
$('#submenu').hide();
$('#portmenu, #first, #second, #third').hover(function(){
//in
$('#submenu').show();
},function(){
//out
$('#submenu').hide();
});
Here is my suggestion to fix your code.
(Demo here)
$(document).ready(function(){
$('#submenu').hide();
$('#menu').on('mouseover', function (){$('#submenu').show()});
$('#menu').on('mouseout', function (){$('#submenu').hide()});
});

Hover class on other elements not on selected - javascript

HTML
<div>
<ul class="navBar">
<li class="selected">HOME</li>
<li>WORKS</li>
<li>ARTICLES</li>
<li>ABOUT</li>
</ul>
</div>
CSS
.selected{
background-color: #CCCCCC;
}
.onHover{
display: block;
background-color: #0088FF;
}
JAVASCRIPT
$(function() {
$("ul.navBar li a").hover(
function(){
$(this).addClass("onHover");
},
function(){
$(this).removeClass("onHover");
});
});
What I want here is the javascript to not add 'onHover' class to the HOME link when hovered over, just the other three links.
You can use not() selector to not allow the item to be picked.
$(function() {
$("ul.navBar li:not(.selected) a").hover(
function(){
$(this).addClass("onHover");
},
function(){
$(this).removeClass("onHover");
});
});
BUT you can do this with a pure CSS only solution if you really wanted. No JavaScript is needed.
Use the jQuery :not() selector to not include the "selected" class. Also better to use event delegation .on() rather directly binding the event to elements ie. .hover().
See http://api.jquery.com/not-selector/ for more information on using :not().
$(function () {
$(document).on('mouseenter', 'ul.navBar li:not(.selected) a', function () {
$(this).addClass('onHover');
});
$(document).on('mouseleave', 'ul.navBar li:not(.selected) a', function () {
$(this).removeClass('onHover');
});
});
See fiddle: http://jsfiddle.net/4rZ3D/

How to implement mouseleave in jquery

I have a small problem with sliding in jquery. On hover (mouse over), I need my navigation list item to show its content by sliding down and on mouse out it should slide up.
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover">
<a style="background-color:#f78144; color: #000; text-align: center;" href="#">Time Table
</a>
</li>
</ul>
<div id = "hovercontent">
Contents 1
</div>
Javascript:
<script type="text/javascript">
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent").mouseleave(function(){
$(this).slideUp("slow");
});
});
</script>
Here the problem is when I hover on the list the div slides down, but only after I hover on the div and get out of the nav the div is sliding up. I need the div to slide up even if I mouse out of the list with out entering the div. How can this be done?
Better to use mouseover and mouseout will do it for you..
$("#hovercontent").bind("mouseout", function() {
$(this).slideUp("slow");
});
Try this and put it in the doc ready this way: http://jsfiddle.net/ptVbs/
$("#mousehover").hover(function() {
$("#hovercontent").slideDown("slow");
}, function() {
if (!$("#hovercontent").hover()) {
$("#hovercontent").slideUp("slow");
}
});
$("#hovercontent").mouseleave(function() {
$(this).slideUp("slow");
});
you can try it out in fiddle.
Check out http://www.quirksmode.org/js/events_mouse.html. In your eventhandlers, check for the relatedTarget as described there. Use console.log in the eventhandlers to track what's happening. Unfortunately, I can't help further without having the CSS for the classes you use... maybe you could provide a testcase in JSBin at http://jsbin.com/ ?
try this
$(document).ready(function(){
$("#mousehover").mouseover(function(){
$("#hovercontent").slideDown("slow");
});
$("#hovercontent ,#mousehover").mouseleave(function(){
$('#hovercontent').slideUp("slow");
});
});
try it with event.type on 'hover'
You attach an 'hover' event Handler on your #mousehover content, and with event.type you see what event type is going on. With the Event 'hover' you get mouseenter and mouseleave
$(document).ready(function(){
​$('#mousehover').on('hover',function(event){
switch(event.type){
case 'mouseenter': $("#hovercontent").slideDown("slow");
break;
case 'mouseleave': $("#hovercontent").slideUp("slow");
break;
}
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
});
I recommend using a class:
HTML:
<ul class="nav nav-tabs nav-stacked">
<li id = "mousehover" class="menu1">
<a style="background-color:#f78144;color:#000;text-align:center;" href="#">Time Table</a>
</li>
</ul>
<div id = "hovercontent" class="menu1">
Contents 1
</div>
JS:
<script>
$(document).ready(function(){
$("#mousehover").mouseenter(function(){
$("#hovercontent").slideDown("slow");
});
$(".menu1").mouseout(function(){
$("#hovercontent").slideUp("slow");
});
});​
</script>

Categories

Resources