I have two divs : #mosaic-content & #mosaic-content-1.
Initially, when the loads, #mosaic-content will be displayed with a class .active and #mosaic-content-1 will be hidden.
I have 4 links:
Home
Event
Gallery
About
The div #mosaic-content-1 should be displayed only when the user clicks on About. For all the other 3 clicks, it has to remain hidden.
I wrote the following code to achieve this:
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
});
$("#about").click(function () {
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
});
However, in the above code, if #mosaic-content is shown and then the user clicks Event or Gallery, the functions are run again, which makes my website a bit slow( The divs are full with a lot of HTML content).
Is there any better way of achieving this?
use .is(':visible') to check if the div is already visible
$(function () {
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
});
$("#home, #event, #gallery").click(function () {
if(!$("#mosaic-content").is(':visible')){
$("#mosaic-content").show();
$("#mosaic-content").addClass("active");
$("#mosaic-content-1").hide();
$("#mosaic-content-1").removeClass("active");
}
});
$("#about").click(function () {
if($("#mosaic-content").is(':visible')){
$("#mosaic-content").hide();
$("#mosaic-content").removeClass("active");
$("#mosaic-content-1").show();
$("#mosaic-content-1").addClass("active");
}
});
Use classes, not id's.
Hide as default block .mosaic-content-1:
$(".mosaic-content-1").hide();
After show block .mosaic-content
$(".mosaic-content").show();
Onlick functions in block navigation:
$(".navigation a").click(function() {
if(!$(this).hasClass("about");) {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content-1").hide();
$(".mosaic-content").show();
} else {
$(".navigation a").removeClass("active");
$(this).addClass("active");
$(".mosaic-content").hide();
$(".mosaic-content-1").show();
}
});
Related
How can I edit my code so that the navbar closes when clicked outside of it but remain open if something inside of it is clicked?
$(document).ready(function() {
$('.nav-btn').on('click', function() {
$('.nav-btn').removeClass('active');
$(this).parent().find('.sub-menu').slideToggle();
$(this).toggleClass('active');
});
});
$(document).ready(function () {
$('.nav-btn').on('click', function (e) {
// Stop Document to be clicked when clicked in nav.
e.stopPropagation()
$('.nav-btn').removeClass('active');
var subMenu = $(this).parent().find('.sub-menu')
if (!$(".sub-menu").is(":visible")) {
$(this).parent().find('.sub-menu').slideToggle();
}
$(this).toggleClass('active');
});
// Toggle Sub Menu and remove active when Any vacant place is clicked
$(this).on('click', function (event) {
$('.nav-btn').removeClass('active');
$('.nav-btn').parent().find('.sub-menu').slideToggle();
});
// Prevent View close when Sub Items is clicked
$('.sub-menu').on('click', function (e) {
e.stopPropagation()
})
});
Hi, You just need to prevent the document click when clicked on the nav item and handle some additional things as done in the above code.
You can see Plunker example here also.
$(document).on('click', function (event) {
if ($(event.target).closest('.main-nav').length === 0) {
// Close button code
}
});
Another possible way is by wrapping all the content inside another div (except the header & navbar) and using the onclick tag:
<div onclick="hideNavbar()">
all your content goes here
</div>
function hideNavbar() {
$('.navbar-collapse').collapse('hide');
// getting the navbar div with jQuery
// and calling the function 'hide' of the Bootstrap class 'collapse'
}
I'm trying to combine two click functions to condense the code, but i'm not sure how. Thanks!
$(document).ready(function () {
//when clicking on a link hide the navigation links
$('nav a').click(function () {
if ($(window).width() < 730) {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop');
$('.navToggle').toggleClass('iconMiddle');
$('.navToggle').toggleClass('iconBottom');
}
});
//when clicking on icon hide and show the navigation links
//the icon is only visible when the screen size is less then 730px
$('.navToggle').click(function () {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop');
$('.navToggle').toggleClass('iconMiddle');
$('.navToggle').toggleClass('iconBottom');
});
});
Would something like this work?
$('nav a, .navToggle').click(function () {
if ($(this).hasClass('navToggle') || $(window).width() < 730) {
$('nav').toggleClass('showNav');
$('.navToggle').toggleClass('iconTop iconMiddle iconBottom');
}
});
Basically, you check if the clicked element has the class .navToggle. If it doesn't, it check the window size before doing the action.
I have been working on navigation bar and the strangest issue is occurring.
Please use the JSFiddle link to see what I mean.
To duplicate the error:
Run the code when the desktop view is active i.e. when the navigation links are in a line.
Then resize the screen till the "click me" is displayed.
Then press it.
Now run the code while you see the "click me" and press it again.
JS information
jQuery(document).ready(function($) {
// UserCP
$('.rotate').on('click', function() {
$(this).toggleClass("down");
});
$('.nav-start').on('click', function() {
$("#nav2").removeClass("hidden");
$('#nav2 li a').stop().slideToggle('100');
return false;
});
$(document).ready(function() {
$('#nav2 li a').stop().slideToggle('100');
});
$('body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length) {
if ($('#nav2 li a').is(":visible")) {
$('html, body').on('click', function() {
$('#nav2 li a').stop().slideUp('100');
});
};
};
});
});
FIXED - UPDATED JSFiddle! Thanks #Louys Patrice Bessette #Titus #Rick
You are using two click events on this "Click me" li...
(One on .navstart and one on .rotate)
It may not be an issue, but this make the code harder to read.
Then, when you slideToggle(), if you want the submenu to slide down, it has to be hidden.
Because, since you remove the hidden class (probably usefull on load), the submenu is visible.
A Toggle hides it.
I simplified your script to this.
Have a look at this updated Fiddle.
$(document).ready(function() {
// Show submenu on "Click me"
$('.nav-start').on('click', function() {
$('.rotate').toggleClass("down");
$("#nav2").removeClass("hidden");
var subNav = $('#nav2 li a');
if(subNav.css("display")=="block"){
subNav.stop().slideUp('100');
}else{
subNav.stop().slideDown('100');
}
return false;
});
$("#nav2 li a").click(function(e) {
e.stopPropagation();
});
// Hide submenu on document click
$(document).click(function(event) {
if (!$(event.target).closest('#nav2 li a').length && $('#nav2 li a').is(":visible")) {
$('#nav2 li a').stop().slideUp('100');
};
});
});
here is my fiddle
why when a div is clicked from another div does the arrow not appear back when the other div has collapsed? i have it set up so when the div does not have the class 'clicked' it then removes the class 'arrowhide' but it when you do the above it doesn't seem to remove the 'arrowhide' even though the div no longer has the class 'clicked' here is my code...
$(function timelinetiles() {
$('.timelineTile').click(function (evt) {
evt.stopPropagation();
$('.selected').children().not(this).removeClass('clicked');
$(this).toggleClass('clicked');
if ($('.selected').children().hasClass("clicked")) {
$('.details').addClass('show');
}
if ($('.timelineTile').hasClass("clicked")) {
$(this).children('.arrow').addClass('arrowhide');
} else {
$('.arrow').removeClass('arrowhide');
}
if ($('.selected').children().hasClass("clicked")) {
$(this).children('.header').height(430);
} else {
$('.header').height(80);
}
});
});
$(document).click(function () {
$('.timelineTile').removeClass('clicked');
$('.details').removeClass('show');
$('.arrow').removeClass('arrowhide');
});
Your line 4 also needs to remove the arrowhide class, like this:
$('.selected').children().not(this).removeClass('clicked')
.children('.arrow').removeClass('arrowhide');
Updated fiddle: http://jsfiddle.net/mcx0t0fh/2/
Alternatively, you could do away with the arrowhide business, and change your .arrow.arrowhide CSS rule to .clicked .arrow
Alternative fiddle: http://jsfiddle.net/mcx0t0fh/4/
I am using a jQuery Accordion for my sidebar navigation. Currently I have 2 links which both have 'children' beneath them.
Here is my jsFiddle: http://jsfiddle.net/6Eh8C/
You'll notice that when you click 'About Us', the Gallery closes. This shouldn't happen. Gallery should only close when I click 'Gallery'.
How do I fix this?
Here is my jQuery:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
$('.slides_item').children('div').css('background','#ededed')
});
Many thanks for any pointers :-)
I think you just want to remove one line:
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
// Remove this line, you don't want to slide up other uls.
// $(this).siblings('ul').slideUp("slow");
});
Example: http://jsfiddle.net/6Eh8C/1/