I'm using jQuery for a vertical site navigation menu, all links within site. I have the basic functionality working, but am at a loss as to the correct if-else to accomplish the following:
As the code stands, the submenu items are always initially hidden, but I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
The code as it stands is:
(function(){
$('li:has(ul)')
.click(function(event){
if (this == event.target || $(event.target).parent()[0] == this) {
if ($(this).children('ul').is(':hidden')) {
$(this)
.css('list-style-image','url(minus.gif)')
.children('ul').slideDown();
}
else {
$(this)
.css('list-style-image','url(plus.gif)')
.children('ul').slideUp();
}
}
})
.css({
cursor:'pointer',
'list-style-image':'url(plus.gif)'
})
.children('ul').hide();
$('li:not(:has(ul))').css({
cursor: 'default',
'list-style-image':'none'
});
});
Hopefully someone can put me on the right track.
Bob McLeod
I want them to start shown if the user-selected li or one of its child lis is assigned the class currentpage.
How about afterwards doing:
$('.currentpage').parents('ul').show();
I would make a showMenuItem() function and call it in both places where you want to show a menu item.
$(function() { $('.currentpage').each(function() {
if ($(this).parents().filter('ul').is(":hidden")) {
showMenuItem($(this).parents().filter('ul'));
} else {
showMenuItem(this);
}
}});
Related
I'm trying to make it so when any other slide is active besides the home page slide it hides the menu: ocw2018.orangecoastwebsites.com
I was using this code:
$(document).ready(function () {
if ($('.about-us, .services, .portfolio, ocw-whole-testimonials, .ocw-blog, .contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
In the console, it works fine, but I'm not sure why it's not working on the live site.
Edit:
Basically I want what this code is able to do but with a hasClass instead of hover
$(window).on('hover', function(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
});
It is live on the URL I provide above, so you can see when you scroll to the next page, and move your mouse, the menu disappears. It's my workaround until I figure out how to make it hidden when a class is active.
It is very hard to know from your post actually exactly what you want. However see below whatever I guessed so far.
First of all you missed '.' on 'ocw-whole-testimonials' it should '.ocw-whole-testimonials'.
After that please breakdown the multiple condition instead single line selector series like following, it will confirm you more accurate output, suppose any selector may have the expected selector so will return true but any other one may not so what will be out put false? so avoid this confusion it is better to breakdown:
$(document).ready(function () {
function hideMenu(){
if(
$('.about-us').hasClass('uncode-scroll-active') ||
$('.services').hasClass('uncode-scroll-active') ||
$('.portfolio').hasClass('uncode-scroll-active') ||
$('.ocw-whole-testimonials').hasClass('uncode-scroll-active') ||
$('.ocw-blog').hasClass('uncode-scroll-active') ||
$('.contact-us').hasClass('uncode-scroll-active')) {
$('#menu-main-menu').hide();
} else {
$('#menu-main-menu').show();
}
}
hideMenu(); // Call when page load
$(window).scroll(function(){
hideMenu(); // Call when page scroll
})
});
Use this function.
$(window).scroll(function(){
//write your code here
});
I have a donut raphael donut chart that I would like when clicked to show a cooresponding div of text.
I tried to set id's for each section and then trigger them with jquery using this code but it is not working.
jQuery(document).ready(function() {
jQuery(".div1, .div2, .div3, .div4").hide();
jQuery("#arched1, #arched2, #arched3, #arched4").bind("click", function () {
jQuery(".div1, .div2, .div3, .div4").hide();
if (jQuery(this).attr("id") == "oxbowarc1") {
jQuery(".div1").show();
} else if ($(this).attr("id") == "oxbowarc2") {
jQuery(".div2").show();
} else if (jQuery(this).attr("id") == "oxbowarc3") {
jQuery(".div3").show();
} else {
jQuery(".div4").show();
}
});
});
What can I do to make this work?
Here is the fiddle http://jsfiddle.net/dll416/17j9Lhwg/1/
Delegate. The elements are added, or assigned ids dynamically, in your code, the jQuery would not recognize them when creating the handler.
Try something like
jQuery(container).on("click", "#arched1, #arched2, #arched3, #arched4", function () {
...
In essence, your attaching the handler to the container (can be document, "body" or a more specific element), only for the ids mentioned in selector. That way the handler is attached to an element which does exist on documentReady.
I didn't add it to you fiddle since it seems the assignment of ids is missing there.
The Fiddle: http://jsfiddle.net/bscn3/
Scenario:
I want to use nested toggles inside tabbed containers, as in the fiddle.
My Issue:
When I click on Main Toggle ("Toggle 1") or ("Toggle 2"), the inner contents display.
But it closes if I click on anything inside. For Eg. If I click on Toggle 2, and if I click on Tab 1 -> Nested Toggle 1, Toggle 2 itself closes.
I want it to remain open.
My Guess:
The JQuery working closes the toggle if anything related to the Toggle (Even text content) is clicked.
My Need:
I want the Toggle to close only if those rectangular headers are clicked.
Also, if you can help clean up the code in such a way, that I don't need to write separate JS to make inner nested Toggles work independently of its parent or children toggles, it would great.
Currently I have two Toggle JS Functions written for the two toggles in example.
//TOGGLE
$('.toggle-view li').click(function () {
var text = $(this).children('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).children('.toggle').addClass('tactive');
} else {
text.slideUp('fast');
$(this).children('.toggle').removeClass('tactive');
}
});
//TOGGLE L2
$('.toggle-view2 li').click(function () {
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
P.S. I haven't written the JS Code, I am using someone's template.
Thanks! :)
Seems like a pretty simple solution...
It's happening because the toggle currently activates whenever you click anythin inside of the li element (which includes the other toggle elements: .toggle2).
The solution therefore is to make it only activate the toggle when the .toggle/h6 element is clicked and change $(this).children(...) to $(this).siblings(...)
You can use the following as things are (same changes in TOGGLE and TOGGLE L2):
//TOGGLE
$('.toggle-view li .toggle').click(function () { // Changed selector
var text = $(this).siblings('.t'); // Changed to .siblings(...)
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive'); // Removed .children(...)
} else {
text.slideUp('fast');
$(this).removeClass('tactive'); // Removed .children(...)
}
});
//TOGGLE L2
$('.toggle-view2 li .toggle2').click(function () {
var text2 = $(this).siblings('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).removeClass('tactive2');
}
});
OR
Just use the first section...
//TOGGLE
$('.toggle-view li .toggle').click(function () {
var text = $(this).siblings('.t');
if (text.is(':hidden')) {
text.slideDown('fast');
$(this).addClass('tactive');
} else {
text.slideUp('fast');
$(this).removeClass('tactive');
}
});
and rename all of the .t2, .toggle2 etc. in your html to the same as the first one (i.e. .t2 becomes .t)
use event.stopPropagation()
i have updated jsfiddle
$('.toggle-view2 li').click(function (event) {
event.stopPropagation();
var text2 = $(this).children('.t2');
if (text2.is(':hidden')) {
text2.slideDown('fast');
$(this).children('.toggle2').addClass('tactive2');
} else {
text2.slideUp('fast');
$(this).children('.toggle2').removeClass('tactive2');
}
});
Hopefully you can help me out with my problem.
Been annoying be for quite some time now.
Trying to make my menu work.
When i click on a block i want it to open, and close the other tab "if" another one is open.
Best regards jfb
HERE IS JSFIDDLE
http://jsfiddle.net/3ZWZu/
INCLUDES HTML, CSS, JS(jQuery)
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
if($('.ac-menu .topLevel ul').hasClass('open') === true){
$('.ac-menu .topLevel ul').removeClass('open');
$('.ac-menu .topLevel ul').addClass('closed');
$('.ac-menu .topLevel ul').slideUp(300);
}
if($(this).next('ul').hasClass('closed') === true){
$(this).next('ul').removeClass('closed');
$(this).next('ul').slideDown(300);
$(this).next('ul').addClass('open');
}
});
});
Presuming you use JQuery, try this one:
$(document).ready(function() {
$('.ac-menu .topLevel').click(function(e) {
e.preventDefault();
$('.ac-menu ul.open').removeClass('open').addClass('closed').slideUp(300);
$(this).next('ul.closed').removeClass('closed').slideDown(300).addClass('open');
});
});
Basically the idea behind this is that with ul.open or ul.closed selector you will only select the uls which have that specific class set. If there are none - then JQuery will return an empty set and will not apply those operations to anything - that is the way JQuery works. Furthermore, it allows you to chain your commands, like shown in my example.
I think you need that jsfiddle
i add topLevel class to li instead of a href
$(document).ready(function() {
$('.ac-menu li.topLevel').click(function(e) {
e.preventDefault();
var isClosed = $(this).find('ul').hasClass('closed');
$('.ac-menu li.topLevel ul').removeClass('open').addClass('closed').slideUp(300);
if( isClosed){
$(this).find('ul').addClass('open').removeClass('closed').slideDown(300);
}
});
});
I'm creating a dropdown menu for mobile site
http://gthost.dyndns.org/kudu/en/
when I click on My Account and click on Who we are, submenu still show,,
I Want to hide it after I click on the link.
this is JavaScript code
var $j = jQuery.noConflict();
$j(document).ready(function () {
$j(".account").click(function () {
var X = $j(this).attr('id');
if (X == 1) {
$j(".submenu").hide();
$j(this).attr('id', '0');
} else {
$j(".submenu").show();
$j(this).attr('id', '1');
}
});
//Mouseup textarea false
$j(".submenu").mouseup(function () {
return false
});
$j(".account").mouseup(function () {
return false
});
//Textarea without editing.
$j(document).mouseup(function () {
$j(".submenu").hide();
$j(".account").attr('id', '');
});
});
i would try using:
$('.submenu').css({display:"none"});
instead of .hide();
Two things strike me as odd here.
Why are your ID's integers - valid names start with [a-z_] etc.
Why are you changing the ID? An ID is meant to be a unique identifier and should persist as long as the element does. If you wish to store information about the state of an element within the element itself, then perhaps look into data attributes.
Without seeing your HTML structure everyone is going to be guessing but rather than whatever you are trying to do with the ID's it looks like you could logically use jQuery.toggle:
$j(".account").click(function(){
$j(".submenu").toggle();
});