I am trying to learn some jquery and I want to make a simple drop down that is hidden at the start but then appears when you click some text but then hides when you click it again. Here is the Code:
Basic HTML:
<h1 class="Menu">Menu</h1>
<div id="submenu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
<li>Menu 6</li>
</ul>
<div>
The jQuery:
$(document).ready(function() {
$("#submenu").hide();
});
$(".Menu").click(function() {
$("#submenu").show("slow");
$(".Menu").text("Close Menu");
$(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
});
$(".CloseMenu").click(function() {
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});
Is it because the class wasn't registered into the DOM at page load so it doesn't know what it is looking for? Also here is the JS Fiddle I was doing it in.
Here, use this js code
$(document).ready(function() {
$("#submenu").hide();
});
$("#mainmenu").click(function() {
if($("#submenu").is(":hidden")){
$("#submenu").show("slow");
$(".Menu").text("Close Menu");
$(".Menu").removeClass( "Menu" ).addClass( "CloseMenu" );
}
else{
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
}
});
Reason for not working is that you are changing the class at runtime. Use .click, only when you have static selectors. Like i used ID
since CloseMenu class doesn't exist when you bind this event you need to do:
$(document).on('click', ".CloseMenu", function() {
$("#submenu").hide();
$(".CloseMenu").text("Menu");
$(".CloseMenu").removeClass( "CloseMenu" ).addClass( "Menu" );
});
Try .toggle()
$('.Menu').toggle(
function() {
//Do something
},
function() {
//Do Something Else
});
Also try #submenu{display:none;} instead of jQuery.
Related
When the page in load/reloaded, I need to loop over each each list item in the order list and apply some logic to it.
Here is what I have done but nothing is being printed in the console as expected.
$(function() {
$(window).load(function(){
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$( "ul.selected_sortable_control_570_0 > li").each(function(index)
{
console.log( $( this ).attr('id') );
});
});
});
Here is my HTML markup
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
How can I correctly loop over each item?
UL has id -> id="selected_sortable_control_570_0"
Use ul#selected_sortable_control_570_0 > li as selector in $ function.
Working snippet
$(function() {
//$( "#selected_sortable_control_570_0 li").each(function(index)
//$( "#selected_sortable_control_570_0 > li").each(function(index)
$("ul#selected_sortable_control_570_0 > li").each(function(index) {
console.log($(this).attr('id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="selected_sortable_control_570_0">
<li id="test1">Test 1</li>
<li id="test2">Test 2</li>
<li id="test3">Test 3</li>
</ul>
Note: Window load is not needed. Run the snippet it works.
selected_sortable_control_570_0 is an id in HTML but in your jQuery you are using a class selector. Change .selected_sortable_control_570_0 to #selected_sortable_control_570_0.
$( "li").each(function(index,value)
{
console.log(value.id);
});
COdepen URL for reference- http://codepen.io/nagasai/pen/rLxzJE
added value and value.id will give id of each li and you can logic using each id
I need help with my code for a hamburger menu. I need to use this array to create the menu elements in jquery:
var menu = [{
'title': 'Save',
'onclick': function() {
alert('Open clicked');
}
}, {
'title': 'Load',
'onclick': function() {
alert('Close clicked');
}
}, {
'title': 'Hide menu',
'onclick': function() {
//put a code to close menu
}
}];
Here is what I have so far and I need to use the array above to update it to work with the array.
jQuery
$(document).ready(function() {
$('#menulink').click(function(event) {
event.preventDefault();
if($('.navigation-wrapper').hasClass('show-menu')) {
$('.navigation-wrapper').removeClass('show-menu');
$('.navigation').hide();
$('.navigation li').removeClass('small-padding');
} else {
$('.navigation-wrapper').addClass('show-menu');
$('.navigation').fadeIn();
$('.navigation li').addClass('small-padding');
}
});
});
HTML
<a id="menulink" href="#">
<div class="hamburger-wrapper">
<div class="inner-hamburger-wrapper">
<div class="hamburger"></div>
<div class="hamburger"></div>
<div class="hamburger"></div>
</div>
<div class="menu-title"><p>Menu</p></div>
</div>
</a>
<ul class="navigation">
<li>Home</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
<li>Menu Item 4</li>
<li>Menu Item 5</li>
<li>Menu Item 6</li>
</ul>
It would be nice to get any help that I can.
Using jQuery .append() you can append the array items to a list for creation.
We have to target the functions seperately, but included is a solution where you could put them inline, if you converted the menu[i] items to strings.
// Generate an element, append index to referencing the executing function
$.each(menu, function(index, element) {
$('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
});
// Run the executing function associated with item
$('ul.navigation > li').click(function() {
var item = $(this).attr('data-index');
menu[item].onclick();
});
// This could be done easier like so:
// $.each(menu, function(index, element) {
// $('ul.navigation').append('<li data-index="'+index+'">'+element.title+'</li>');
// });
// but would require modifying the menu[i] items' functions to just be strings
Here's an updated Fiddle.
I would like do something like that with Jquery, make condition to click function :
$(document).ready(function(){
if {
$("li#menu-item-1101").click(function(){
$( '#menu-item-1101' ).addClass( 'current_page_item' );
}else{ // I clik on another <li> than #menu-item-1101 I remove current_page_item class
$( '#menu-item-1101' ).removeClass( 'current_page_item' );
}
});
});
Anyone can help me please?
Thank you!!
I think you want logic something similar to this:
On click of li you want to check the id of it and add/remove class accordingly:
$(document).ready(function(){
$("li").click(function(){
if($(this).attr("id") == "menu-item-1101")
{
$(this).addClass( 'current_page_item' );
}
else
{
$( '#menu-item-1101' ).removeClass( 'current_page_item' );
}
});
});
it is possible by adding an id to each <li> element and write a generic jquery function with if else.
html:
<ul class="nav">
<li id='itm1'>item 1</li>
<li id='itm2'>item 2</li>
<li id='itm3'>item 3</li>
</ul>
script:
$('.nav li').click(function(){
var id=$(this).attr('id');
if(id=='itm1'){//first li clicked}
else if(id=='itm2'){//second li clicked}
else{//third li clicked}
})
As you are doing the code it seem that you have to set lots of li conditions. But you can do it like:
HTML Part :
<ul class="nav">
<li id='menu-item-1101'>item 1</li>
<li id='menu-item-1102'>item 2</li>
<li id='menu-item-1102'>item 3</li>
</ul>
jQuery Part :
$(function(){
$(".nav li").click(function(){
if($(".nav li").hasClass("current_page_item")){
$(".nav li").removeClass("current_page_item");
}
$(this).addClass("current_page_item");
})
})
I am using Twitter Bootstrap for a tabular interface. When I click on a tab, I am calling an function that hides and shows corresponding divs. This is my HTML Code:
<ul class="nav nav-tabs">
<li class="active" id="Chart1">Chart 1</li>
<li id="Chart2">Chart 2</li>
<li id="Chart3">Chart 3</li>
<li id="Chart4">Chart 4</li>
</ul>
Based on that, I am using the following jquery to show and hide content:
$(document).ready(function(){
$("#pie").hide();
$("#bar").hide();
$("#Chart2").click(function(){
$("#StateWise").hide();
$("#pie").show();
});
$("#Chart3").click(function(){
$("#StateWise").hide();
$("#pie").hide();
$("#bar").show();
});
});
How can I do that on click, the active class changes to that particular tab?
You can write like this:
$("#Chart2").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#StateWise").hide();
$("#pie").show();
});
$("#Chart3").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#StateWise").hide();
$("#pie").hide();
$("#bar").show();
});
If you are using bootstrap 4 then you can do like this.
$("#Chart1").click(function(){
$('#Chart1').tab('show');
});
check the below reference
https://getbootstrap.com/docs/4.3/components/navs/#tabshow
Try
$("#Chart1").click(function(){
$('li.active').removeClass('active');
$('this').addClass('active');
});
Try this
$("#Chart3").click(function(){
$('li.active').removeClass('active');
$('this').addClass('active');
});
I have 2 navigation areas. The second should appear when an element in the first is hovered over and it should disappear if the mouse does not move over it.
Very basically i have:
HTML
<ul class="main">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="sub">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
I want ul.1 to appear when I hover over li.1 and ul.2 to appear when I hover over li.2, and I want them both to disappear only when I am not hovering over the sub uls.
I've got it working part way:
JAVASCRIPT
var sections = new Array('1', '2');
$.each(sections, function(i, section) {
$('ul.main li.' + section).hover(
function() {
$('div.sub ul').hide();
$('div.sub ul.' + section).show();
}
);
});
This will show the correct section and hide the others, but I can't figure out how what I need so that, when the mouse moves off a ul.main li, the .sub ul disappears if it's not being hovered over.
Update: Fiddle here: http://jsfiddle.net/alluvialplains/XY4mH/
You're part of the way there #EpF. The problem is that your semantic example given above (which is possible to adhere to) is trying to capture a mouseleave event and while it's possible to use jQuery's .not() function to achieve this, it would be expensive. Really, the smartest way to do this is to have an outer wrapper for your whole navigation (wrapping all div's you've got in your existing fiddle) and then bind your show() event to mouseenter, while separately binding your .hide() event (the one for ALL .subz) to an event triggered on mouseleave for the wrapper div.
Given the following HTML:
<div id="nav-wrap">
<ul class="mainz">
<li class="1">item 1</li>
<li class="2">item 2</li>
</ul>
<div class="subz">
<ul class="1">
<li>1 sub item 1</li>
<li>1 sub item 2</li>
</ul>
<ul class="2">
<li>2 sub item 1</li>
<li>2 sub item 2</li>
</ul>
</div>
</div><!-- /END #nav-wrap -->
You can achieve the effect with the following javascript
$( document ).ready( function () {
var $ul = $( '.subz ul' ).hide();
$( '.mainz li' ).on( 'mouseenter', function(event){
$ul.hide().eq( $( this ).index() ).show();
});
$( '#nav-wrap' ).on( 'mouseleave', function(event){
$ul.hide();
});
});
Here is a JSFiddle of it in action: http://jsfiddle.net/XY4mH/4/
Also, I should note that the .hover() function is deprecated in jQuery for quite a while now and could disappear sometime soon. Note that I used the .on() function, which is the correct way to bind these kinds of events in jQuery.
$( document ).ready( function () {
$( '.main li' ).on( 'click', function () {
$( '.sub ul' )
.hide()
.eq( $( this ).index() )
.show();
});
});
That should do the trick. But as #Mottie said, nesting menus would work better / more symantecly
Edit: Sorry this is working on click. Just a sec and I'll have it updated
$( document ).ready( function () {
var $ul = $( '.sub ul' ).hide();
$( '.main li' ).hover(
function () {
$ul
.hide()
.eq( $( this ).index() )
.show();
},
function () {
$ul.hide()
}
);
});