I have this jquery script that I got some help with in creating in order to add/remove an "active" class to a div when hovering over a button.
Below a CodePen of what I have put together:
CodePen Link: https://codepen.io/dustin-keeslar/pen/dapLWM
It works well, however what I'm trying to change is to have whatever button was last hovered on, to keep the "active" class on the content. So that the content only changes when a different button is hovered over.
jQuery(document).ready(function() {
jQuery(".toggle-button").hover(function() {
var target = jQuery(this).data("target");
if (jQuery(this).hasClass("expand")) {
jQuery(this).toggleClass("expand");
jQuery("#" + target).removeClass("active");
} else {
jQuery(".toggle-button").removeClass("expand");
jQuery(".hidden-content").removeClass("active");
jQuery(this).toggleClass('expand');
jQuery("#" + target).toggleClass("active");
}
});
});
This will find a button that has data-target=content1" for example, and when it is hovered over it will toggle an "active" class to a div with the ID "content1". The problem is that when you are no longer hovering, everything disappears. I need the most recent hovered button to keep the "active" class on the content. But I also need the content to change dynamically when the next button is hovered over.
Then fix it to use mouseenter, and move your remove code to the top to remove your classes before adding them back to the element that's been entered. I don't understand exactly what you're trying to do here, but using mouseenter it should be something like:
jQuery(document).ready(function() {
jQuery(".toggle-button").mouseenter(function() {
jQuery(".toggle-button").removeClass("expand");
// jQuery(".hidden-content").removeClass("active");
$(".active").removeClass("active");
var target = jQuery(this).data("target");
jQuery("#" + target).addClass("active");
if (jQuery(this).hasClass("expand")) {
jQuery(this).removeClass("expand");
jQuery("#" + target).removeClass("active");
}
});
});
All you are missing is a check, to ensure the current item matches the target:
jQuery(this).attr('id') == target
Codepen here: https://codepen.io/anon/pen/VgKOPy
Related
The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second.
But when I use my code I need to click on the nav then the li opens and I need to click again to make the code register.
The place of the videos cannot be hardcoded! It needs to be dynamic.
(function($) {
$(document).ready(function(){
$('video').each(function() {
$(this).get(0).pause();
});
$('.slides').children('li').addClass('test');
});
$(document).on('click','span',function(){
if ( $('li').hasClass('current') ) {
$('li.test').find('video').each(function() {
$(this).get(0).pause();
});
$('li.current.test').find('video').each(function() {
$(this).get(0).play();
});
}
});
})(jQuery);
http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010
Unfortunately I won't be available for the next hour or so but will be back after that! Everyone thank you for helping.
I found what is causing the issue :
You are playing the elements whose parent has ".current" class when a span is clicked.
But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).
One solution is changing the selectors like this :
$(document).on('click','span',function(){
console.log('the if is running');
$('.current, .hide').find('video').each(function() {
$(this).get(0).pause();
});
$('.show').find('video').each(function() {
$(this).get(0).play();
});
});
By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.
Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).
I have several div elements which are populated with an index e.g.
Divid1 + index0
Divid2 + index1
Divid3 + index2
A click function has been applied to these individual elements so Jquery SlideToggle could open the div elements that have been assigned to these.
Now I have created a on click function for an image to open these boxes using the trigger function however it doesn't seem to work.
$('image').on('click', function () {
$('#result' + index).trigger('click');
});
I want this to enable the click event that have been assigned:
$('#result'+index).click(function({
$(this).next("#nesteddiv").slideToggle("slow");
});
Thank you
Since you are trying to slideToggle an element adjacent to the one clicked a CSS selector with a wildcard would be most appropriate.
$('.slideToggleImage').on('click', function () {
$("[id^=result]").trigger('click');
});
$("[id^=result]").click(function() {
$(this).next(".nesteddiv").slideToggle("slow");
});
And change the #nesteddiv to a class since an ID should always be unique. It would work, but it's just best practice :)
I have a list of Services with their respective descriptions, which I have linked to with anchor links.
The service details are hidden until I click on a service name. I am not being able to hide the previously clicked on services, they are overlapping.
This is a JSFiddle of what I have been able to put together so far:
https://jsfiddle.net/rdhn60mb/
$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
/*
$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
*/
(The commented out code doesn't work, but it's close to what I'm trying to achieve).
Thank you all for helping me out!
Cintia
I would agree with divy3993's answer but improve it slightly:
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).toggle();
});
The toggle is just a more efficient function in this case.
You can see the example in this Fiddle: https://jsfiddle.net/rockmandew/rdhn60mb/6/
See in your case it's overlapping, as you never close/hide them. So as JavaScript/JQuery runs line by line. We will first close/hide all of them $('.service-details').hide(); onclick and then open/show only the current one.
JQuery
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).css('display', 'block');
});
UPDATE :
Fiddle : Demo
Note: Here in demo i used fadeIn() so it has some smoothing effect. Also using anything else like toggle() is useless. As you are hiding all the service-details before showing so no need of toggle().
To close the div again if the same link is clicked like you wanted.. simple wrap it in an if statment checking if the current active tab has the same id as the href value. If so don't run the show
//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {
//remove the current active class
$('.service-details').removeClass( "active" );
//fade in the div
$($(this).attr('href')).fadeIn();
//add the class active to the div
$($(this).attr('href')).addClass( "active" );
}
Here is a jsfiddle with the edits and I also added a fadeout to make it less jumpy
https://jsfiddle.net/rdhn60mb/21/
So far I have this drop-down menu. When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.
The problem:
I need to display only one drop-down at a time, so that the user can switch between them.
I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class.
Please help, anything will be highly appreciated!
Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
DEMO
UPDATE
If you want also on second click menu to be closed try checking if clicked item has already class clicked:
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked')
} else {
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
}
$('.productSubmenu').width(menuWidth);
});
DEMO2
You also might want to close the links
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$("#product-menu .productSubmenu2").hide(); // this one I added
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
I am attempting to use hover with with to swap div visibility when mousing over navigation buttons.
When there is no mouseover, there is a 'default' div that should appear.
My problem is that every time the mouse transitions between links, the default div briefly reappears.
Is it possible to make the swap seamless, or will a different approach to the swap work? I attempted to set the nav container div with a fadeout/fadein event for the default div, but I didn't have any luck with that.
Refer to the following fiddle for an example: http://jsfiddle.net/ElectricCharlie/Wk8Yd/
$('div.hmnav').hover(function()
{
$('#_wnr00').stop(true,true).fadeOut();
$('#_'+this.id).stop(true,true).fadeIn(400);
},
function ()
{
$('#_'+this.id).stop(true,true).fadeOut(400);
$('#_wnr00').stop(true,true).fadeIn();
});
I just got rid of true,true and it worked fine:
$('div.hmnav').hover(function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
function () {
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
});
Updated your jsFiddle as well.
EDIT: took the time to clean up your jQuery as well:
$('#navbox_inner')
.corner("round 12px")
.parent()
.css({padding:1})
.corner("round 14px")
$('#navbox_inner').on({
mouseenter: function () {
$('#_wnr00').stop().fadeOut();
$('#_' + this.id).stop().fadeIn(400);
},
mouseleave: function(){
$('#_' + this.id).stop().fadeOut(400);
$('#_wnr00').stop().fadeIn();
}
},'.hmnav');
This is much faster, as it binds to one item, and delegates appropriately. I also removed the element selector, as a pure class based / id based selector is faster. Updated your jsFiddle a second time.