Why is removeclass not working when div is collapsed? - javascript

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/

Related

jQuery toggle class and change it on click

I have the following code in my JS file:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
Now I need to make it so that the part under the // problem area starts to work. I reckon there's a toggleClass in jQuery, right? Some advanced conditions could do the trick, however I'm still learning and I need some help. I also need to find a way to animate() the .menu-container div whether the button state is expand or collapse:
If the button was clicked while it had the expand class
animate the menu from bottom to top with 98px;
If the button was clicked while it had the collapse class
animate the menu from top to bottom with 98px.
EDIT - JSFIDDLE:
jsfiddle.net/rcdhnh7L
Try it like this instead. Don't use e as the var for jQuery, that's just strange. And I simplified the problem area to directly grab the elements you want instead of iterating an existing collection.
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
Or this should work as well:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});

dropdown menu , remove class if its open

I'm trying to create dropdown menu, I'm doing it in this way, by default on dropdown menu I'm doing
.dropdown {
display: none;
}
then im creating event on click and based on that context im toggling class
.active { display block; }
now I cant figure out how can I remove that .active class when I click on other button or in document, I don't want to keep dropdown active class if user click on other button demo
http://jsfiddle.net/pnLkpxkb/8/
$(function () {
// The user clicks anywhere in the document
$(document).click(function (e) {
// If a dropdown has a class active AND if the dropdown or the link is not the target of the click
if ($("ul.dropdown").hasClass("active") && !$("ul.dropdown, .btn > a").is(e.target)) {
// Remove class active
$("ul.dropdown.active").removeClass("active");
}
});
var dropdown = $(".btn > a");
// The user clicks on a toggle link (One or Two)
dropdown.on("click", function () {
// Remove the active class from the active element
$("ul.dropdown.active").removeClass("active");
// Add class to the relevant sub menu
$(this).siblings("ul.dropdown").addClass("active");
});
}());
Updated after comment
You don't need to put "" with this keyword. Your code line should be:
$(this).siblings("ul.dropdown").toggleClass("active");
Complete Code
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown.active").removeClass("active"); //added new line
$(this).siblings("ul.dropdown").toggleClass("active");
});
}());
Updated Code with Remove Class
toggleClass don't work as you want. For your case i suggest to go this way:
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown").removeClass("active");//add this to remove class from all ul .dropdowns
$(this).siblings("ul.dropdown").addClass("active");//Add class to your ul dropdown. Here you can use toggleClass too
});
}());
fiddle
$(function () {
$(document).on('click', function () {
$("ul.dropdown").removeClass('active');
});
$(".btn a").on("click", function (e) {
e.stopPropagation();
$("ul.dropdown").removeClass('active');
$(this).siblings("ul.dropdown").addClass("active");
});
});
JSFiddle Demo.

Adding and removing click/hover event handlers jQuery

Run into issues mixing click and hover events.
Clicking an inactive li a element toggles an active class and binds a hover event.
Hovering over now active element displays a previously hidden block (span.rate)
Clicking the hovered element is supposed to hide it, remove hover event and toggle the active class on the parent so it is no longer 'active'.
Clicking the hovered event does not remove the events and toggle active. There is some other logic in there regarding mutually exclusive options, this all works fine though.
jsfiddle of how it all sits together:
http://jsfiddle.net/65yY3/15/
Current js:
ps = {
psToggle: 0,
init: function () {
$(document).ready(function () {
$('.example li a)').on('click', function(e) {
e.preventDefault();
var that = $(this);
if (that.parent().hasClass('paired')) {
if (rm.psToggle === 0) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 1;
} else {
if (that.hasClass('active')) {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.psToggle = 0;
} else {
$('.paired a').toggleClass('active');
that.find('.rate').fadeToggle(50);
//Call message function
}
}
rm.pControl();
} else {
that.toggleClass('active');
that.find('.rate').fadeToggle(50);
rm.pControl();
}
});
});
},
pControl: function () {
//Unbind events to all control items excluding 1st item.
$('.example li a').off('hover');
$('.example li a .rate').off('click');
$('.example .active').each(function(i) {
$(this).on('hover', function() {
$(this).find('.rate').fadeToggle(50);
});
});
$('.example li a.active .rate').on('click', function() {
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
rm.pControl(); //rebind new active classes
});
}
};
ps.init();
Check the below demos.
Both the click events were getting fired as ,.rate is the child of a.
$('.example li a.active .rate').on('click'... and
$('.example li a').on('click'...
So you can either remove the click on .rate. Demo1
Or add e.stopPropagation(); to the child to stop event bubbling from parent to child. Demo2
$('.example li a.active .rate').on('click', function(e) {
e.stopPropagation();
//Remove hover/hide and toggle active state
$(this).off('hover');
$(this).hide();
$(this).parent().toggleClass('active');
ps.pControl(); //rebind new active classes
});
enter link description hereCorrect
$('.example li a') instead of $('.example li a)')
update here is the link

jQuery: Clicking anywhere to remove class, without using $('body').on('click'

I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});

Displaying div elements onClick

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();
}
});

Categories

Resources