I have written a JavaScript to show a tick mark just to the right side of the selected drop-down item (CSS class name active):
$(document).ready(function () {
$('.select-country ul li a').click(function () {
$('.select-country ul li a').removeClass("active");
$(this).addClass("active");
return false;
});
});
Its works well, but I have a problem here.
Problem:
When I refresh the page the drop-down will default to a default selected item. But that selected item is not showing the tick mark.
How do I rewrite the query to show the tick mark for the default selected item in drop-down?
You need to loop over the li so that respective links are responsible for there own events,
$(document).ready(function () {
$('.select-country ul li a.default').addClass("active");
//loop over all li
$('.select-country ul li a').each(function () {
//remove first from any active link
$(this).click(function(){
$('.select-country ul li a').removeClass("active");
//find and add active on "this" link
$(this).addClass("active");
return false;
});
});
});
Related
I have some filters on a project I'm working on that once clicked, it's given a class of active, which will then show a div inside the clicked list item called info-pane.
The filters are the 6 blue boxes. I am using the jQuery below to add and remove the active class, however the issue comes when I want to try and remove the active class by clicking the list item that has the active class state but it doesn't seem to work.
The code I'm trying;
$(".filters > ul > li").click(function() {
$(".filters > ul > li").removeClass("active");
$(this).toggleClass("active");
});
$(".filters > ul > li.active").click(function() {
$(this).removeClass("active");
});
Here's a link to the live project; http://client.n8geeks.com/
Try this:
$(".filters > ul > li").click(function() {
$(".filters > ul > li").not($(this).toggleClass("active")).removeClass("active");
});
First you don't need to make two events for that click. Here is example to do in one. But i can't see where your problem is. In your live project i can see that filters change after you click..?
$(".filters > ul > li").click(function() {
$(".filters").find('li').removeClass('active');
$(this).addClass("active");
});
Edit:
I don't know if i understood correctly, but i can see when you click on 'x' nothing happens.. so function that reset your filters.
(non-tested)
$(".close").click(function(){
$(this).closest('ul > li').find('input[type="checkbox"]').each(function( index ) {
$(this).prop('checked', false);
});
});
My CMS generates menus as lists without any id's and classes. For submenus, there are nested lists.
I made jquery script for expanding submenus:
$(function () {
$(".wrapper ul li").click(function () {
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
});
});
My problem is that this script reacts to clicking whole li area and I want it to react to clicking link inside li. Of course I just have to add "a" to selector making it ".wrapper ul li a" but what about condition checking if there is ul nested inside li? And slidetoggle selector. How should I change these?
This might work with minimal modification to your original code.
$(function () {
$(".wrapper ul li a").click(function ()
{
this = $(this).parent();
if ($(this).has("ul").length) {
$("a", this).removeAttr('href');
$("ul", this).slideToggle();
}
}
);
});
Test and see if it works. I have not tested it. Cheers
can you please tell me how to get alert of id when user click of submenu.
Actually I am adding submenu of button click with id"menu_tc_1","menu_tc_2".I want to click of submenu ? and show alert ?
http://jsfiddle.net/eHded/1553/
$(document).on('click',".menuClick",function(){
alert('jii'+this.id)
})
You need to listen to clicks on the menu elements, not the entire menu.
$(document).on('click',".menuClick a",function(e){
alert('jii'+$(this).parent().prop('id'))
})
You click on the a so find it's parent's id
http://jsfiddle.net/eHded/1565/
Try this:
$(document).on('click', ".menuClick ul li > a", function () {
alert('jii' + $(this).parent().attr('id'));
});
Assuming you want the child elements that are added to the menu when you click the add button.
Edit: to add a selected class to the parent li element:
$(document).on('click', ".menuClick ul li > a", function () {
$(this).parent().addClass('selected');
});
Try this instead
$(document).on('click',".menuClick li",function(e){
alert('jii'+this.id)
$(".menuClick li").removeClass("active");
$(this).addClass("active");
e.stopPropagation();
})
This will solve your issue.
Demo
I was able to achieve a content switcher with the block of code below but I'm looking for a way to simplify it. There are up to 10 or more topics to switch between, how do I simplify it so that the code wouldn't be too large, instead of having a block of code per DIV.
jQuery(document) .ready(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
$('#mid-nav-in ul li a:nth-of-type(1)') .click(function () {
$('.topic-intro:not(:nth-of-type(1))') .hide();
$('.topic-intro:nth-of-type(1)') .show();
$('#mid-nav-in ul li:not(:nth-of-type(1))') .removeClass('active');
$('#mid-nav-in ul li:nth-of-type(1)') .addClass('active');
});
});
jQuery(document) .ready(function () {
$('#mid-nav-in ul li:nth-of-type(2) a') .click(function () {
$('.topic-intro:not(:nth-of-type(2))') .hide();
$('.topic-intro:nth-of-type(2)') .show();
$('#mid-nav-in ul li:nth-of-type(2)') .addClass('active');
$('#mid-nav-in ul li:not(:nth-of-type(2))') .removeClass('active');
});
});
It appears from your code that you are using the links in #mid-nav-in to show the corresponding .topic-intro and then hiding all others. It also appears that the code depends on the .topic-intro elements being in the same order as the links in the #mid-nav-in. If this is the case something like to following would work:
$('#mid-nav-in li a').on('click', function(){
// Remove 'active' Class from all <li/>
$('#mid-nav-in li').removeClass('active');
// Add 'active' Class to <li/> of Clicked Link
$(this).closest('li').addClass('active');
// Hide All .topic-intro elements
$('.topic-intro').hide();
// Show .topic-intro element at the Same index of Clicked Link
$('.topic-intro').eq($(this).closest('li').index()).show();
return false; // prevent default action
});
// Automatically Select the First Link
$('#mid-nav-in li a').eq(0).trigger('click');
Here is a fiddle as an example: http://jsfiddle.net/6hd97/2/
I hope this helps.
I want to close my Javascript menu by clicking outside of the menu. I am using this menu. I'm not professional, please tell me how to change my code to do that:
$("#theme_select").click( function () {
if (theme_list_open == true) {
$(".center ul li ul").fadeOut();
theme_list_open = false;
} else {
$(".center ul li ul").show();
theme_list_open = true;
}
return false;
});
$("#theme_list ul li a").click(function () {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
$(".center ul li ul").hide();
theme_list_open = false;
return false;
});
If you want to close that menu when the iframe area is clicked, you have to do that in the iframe. Try putting this in your iframe's document ready function:
$("html").click( function () {
$(".center ul li ul", window.parent.document).fadeOut();
window.parent.theme_list_open = false;
});
Seems you use $("#theme_select").click( function () { for both open and close the menu. and use $("#theme_list ul li a").click(function () { to handle click on menuitem, which will close the menu after.
In fact there is simple solution to your problem. Use $("#theme_select").click for only open the menu, and $("#theme_list ul li a") for handle the link, and introduce $(window).click to close the menu.
function checkAndCloseMenu(evt) {
var dropmaker = $('#theme_select')[0];
for (var node = evt.target; node != document.body; node = node.parentNode)
if (node == dropmaker) return false; // check if click in the dropmaker
$('.center ul li ul').fadeOut();
$(window).unbind('click', checkAndCloseMenu);
}
$("#theme_select").click(function() {
$(".center ul li ul").show();
$(window).click(checkAndCloseMenu);
});
$("#theme_list ul li a").click(function() {
var theme_data = $(this).attr("rel").split(",");
$("li.purchase a").attr("href", theme_data[1]);
$("li.remove_frame a").attr("href", theme_data[0]);
$("#iframe").attr("src", theme_data[0]);
$("#theme_list a#theme_select").text($(this).text());
return false;
});
PS: may be you should give the menu and menuitems some class names, your selector is painful to read.