We Keep Coding

jQuery collapsible through toggleClass on element

I have an off canvas navigation menu (classname that is enabled via hover-over using jQuery on my Wordpress site. It is, as it should be, not visible on page load.
For the mobile version, I want the same nav menu to be activated by clicking on a menu icon (that I've given two classes, in this order: mobile-nav-toggle show-nav-mobile). The toggle method seems to only work for a vertical toggle. My solution to replicating the same animation on click rather than hover, is by using the toggleClass method on the icon to toggle between a classname that opens the menu nav (show-nav-mobile) and closes it (hide-nav-mobile) Using the below code:
jQuery(".show-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'0px' }, 250);
});
jQuery(".mobile-nav-toggle").click(function(){
jQuery(".mobile-nav-toggle").toggleClass("show-nav-mobile hide-nav-mobile");
});
jQuery(".hide-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'-640px' }, 250);
});
That doesn't seem to do the job though. The jQuery opens the offcanvasmain div just fine, but doesn't close it again.
What is wrong with my approach?

I assume your element initially looks somewhat like this:
<nav class="mobile-nav-toggle hide-nav-mobile">...</nav>
This means that
a) Both these click handlers will always run when clicking, no matter if the element still has the class hide-nav-mobile:
jQuery(".mobile-nav-toggle").click(function(){
jQuery(".mobile-nav-toggle").toggleClass("show-nav-mobile hide-nav-mobile");
});
jQuery(".hide-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'-640px' }, 250);
});
jQuery finds the element at the moment you define the click handler; it doesn't recheck if the element still has this class when clicking later.
b) This never attaches a click handler:
jQuery(".show-nav-mobile").click(function(){
jQuery(".offcanvasmainnav").animate({left:'0px' }, 250);
});
because at the time of calling jQuery(".show-nav-mobile") it cannot find any element with that class.
To fix it, do this all in a single click handler:
jQuery(".mobile-nav-toggle").on('click', function(){
const that = jQuery(this);
that.toggleClass("show-nav-mobile hide-nav-mobile");
jQuery(".offcanvasmainnav").animate({left: that.hasClass('show-nav-mobile') ? '0px' : '-640px' }, 250);
});

Jquery function add/remove class from div on button hover

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

hover trigger called just after multilevelpushmenu first toggle

i use jquery, bootstrap, fa, normalize and jquery.multilevelpushmenu.js v2.1.4 that provide side-menu multi level, i'm tring to combined hover operation with that menu, and the hover call just after first toggle menu, never seen this behavior before.
<script>
$(document).ready(function () {
$('.content gallery-item').hover(function () {
$(this).find('.content img-title').fadeIn(300);
}, function () {
$(this).find('.content .img-title').fadeOut(0);
});
});
</script>
Here what i have tried:
isolate to minimum script / JS-libs
tried to call to dest hover tag with more specific css selector
This is the JSFiddle of the complete scenario.
How can i make it work onload?

CSS way to fix the issue is to give the element a lower z-index. As the menu container is overlapping it that's why it is unable to target the element properly.
This code should fix it.
.multilevelpushmenu_wrapper{
min-width: auto;
}

Fade in/out buttons on mouseover of an image with jQuery. A few bugs to work out

So, I essentially have what I want already, very simple, but there are some bugs. I just want so when you hover over an image, two left/right buttons appear on the image that allow you to click through other images. Then when you leave the image area (excluding the left/right buttons), the buttons fade out again. Here's what I've got:
$(document).ready(function() {
$('#image-slider').mouseenter(function(){
$('.next').fadeIn('50');
$('.prev').fadeIn('50');
}).mouseout(function(){
$('.next').fadeOut('50');
$('.prev').fadeOut('50');
});
});
Bug #1: However, when you mouseover the image the buttons appear, and if you mouse over the buttons, they disappear. Naturally, of course they do, this is because I told them to fade away when I left the image area. First of all, I need them to stay visible even when you hover over them. So I need to somehow include the buttons as part of my image area in my javascript. That's the first problem/
Bug #2: This is a common problem I see in javascript. When you hover over the image, the buttons fade in, hover off, they fade out. Of course, there's a duration to this, and if you keep hovering in/out/in/out/in/out before the duration can finish, then when you let it fly, it will go on and off and on and off. How can I prevent this? So that is you hover out of the image area while the buttons are fading in, it just stops the animation sequence in its tracks so you don't get that continuous fading in/out.
Thanks in advance!
~ Jackson
ETA: the fix
I got it solved! A combination of your fix and #Pumou's.
I made another div just to wrap the two items and expanded it to cover the image, then I set the mouseover to be that div. Problem #1 solved.
I used puormo's .fadeTo() trick to solve problem #2.
Then, I used tweaks from everyone to shorten up the code so it was neat and tidy. Thanks to all!
I've decided on #jfriend00's solution. It's the shortest, great work!
Here's my final javascript:
$(document).ready(function() {
var b = $('.ps_next, .ps_prev');
$('#slider-wrapper').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(0,1).fadeIn(100) ) :
( b.stop(0,1).fadeOut(100) ) ;
});
});

Problem #2 can be fixed with .stop() which forces any previous animations to just to their conclusion before starting the next one.
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_next').stop(true, true).fadeIn(400);
$('.ps_prev').stop(true, true).fadeIn(400);
}, function () {
$('.ps_next').stop(true, true).fadeOut(400);
$('.ps_prev').stop(true, true).fadeOut(400);
});
});
It may be better to use the .hover() jQuery function which handles both enter and leave rather than mouseenter() and mouseout().
You can see both an example of .stop() and .hover() on this jQuery doc page doing almost the exact same thing you are.
For problem #1, I think we'd need to see the structure of your HTML to know how best to advise on that as their are several choices depending upon how things are structured. You could also do the fadeOut on a delay that was cancelled if they hovered over the button so there was time to get the mouse to the buttons before they disappeared. Or, you could use .hover() on a container that contained both image and buttons.
You can see it working here: http://jsfiddle.net/jfriend00/Zk6rY/.
Shortened the code (as seen in the above jsFiddle) even more to this:
$(document).ready(function() {
$('#imageContainer').hover(function() {
$('.ps_button').stop(true, true).fadeIn(400);
}, function () {
$('.ps_button').stop(true, true).fadeOut(400);
});
});

$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').mouseenter(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
}).mouseout(function(){
$buttons.stop().fadeTo('50','0');
});
});
I have also used stop();. I've also shortened it to use one selector to select both buttons (in this case, it was set to the variable $buttons).
I noticed that if your mouse entered the image div, and then left, and then entered again, the buttons were fading in to 50% opacity because of the stop();. I fixed this by using the fadeTo(); feature: the first one is the duration, which was set to 50 like yours, and the second one is the opacity to fade to (a number between 0 and 1).
I also solved the problem of keeping the buttons there when you hover over them. See this line:
$buttons.mouseenter(function() { $buttons.show(); });
This just uses show();, which gives the element display:block; on mouseover.
Example here: http://jsfiddle.net/purmou/MM4ba/1/
More about stop(); here: http://api.jquery.com/stop
More about fadeTo(); here: http://api.jquery.com/fadeto
EDIT: Updated the code so that it now uses jQuery's hover(); function. Shorter code is always better.
$(document).ready(function() {
var $buttons = $('.next, .prev')
$('#image-slider').hover(function(){
$buttons.stop().fadeTo('50','1');
$buttons.mouseenter(function() { $buttons.show(); });
},
function(){
$buttons.stop().fadeTo('50','0');
});
});
Example: http://jsfiddle.net/purmou/MM4ba/2/
More on hover(); here: http://api.jquery.com/hover

DEMO FIDDLE
var b = $('.btn');
$('#image-slider').bind('mouseenter mouseleave', function(e) {
var check = ( e.type === 'mouseenter' ) ?
( b.stop(false, true).fadeIn(300) ) :
( b.stop(false, true).fadeOut(300) ) ;
});
(with your markup and the use of ternary-operators)

You all might be looking for this awsmness.....
$(document).ready(function () {
$('#content').hover(function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
}, function () {
$('.a').stop(true).fadeOut(500);
$('.i').stop(true).fadeTo(500, 1);
});
$('.a').hover(function () {
$('.i').stop(true).fadeTo(500, 0.95);
}, function () {
$('.a').stop(true).fadeTo(500, 0.7);
$('.i').stop(true).fadeTo(500, 0.9);
});
});
http://jsfiddle.net/Sourav242/p0z0oh82/

CSS Change in multiple locations on hover (jquery solution needed)

I'm working in wordpress, trying to figure out how to change the css color of a side nav element when a remote image is hovered.
I would have done this easily with CSS and just assign the CSS hover class for each item, but since this is a CMS, the navigation and the image gallery will change dynamically.
So, I'm looking for a JQuery of how to accomplish this. Any suggestions?
Here's an example of the html:
<div class="imgGallery">
<img class="page-item-54" src="/image1.jpg">
<img class="page-item-66" src="/image2.jpg">
<div>
When someone hovers over the specific image above, it changes the css of the image below:
<ul class="pageNav">
<li class="page-item-54">Sub Gallery 1</li>
<li class="page-item-66">Sub Gallery 2</li>
</ul>
Thanks!
Troy

You can use the jQuery hover function to hook up handlers for the mouseenter and mouseleave events of the images (which jQuery will happily simulate on browsers that don't support them):
$(".imgGallery img").hover(
function() {
// Code for when the hover starts, the (raw) hovered `img`
// element is `this`, from which we can get the class name
// to feed into a selector for finding the relevant `li`
$(".pageNav ." + this.className).css(/* your change here */);
},
function() {
// Code for when the hover ends, the (raw) unhovered `img`
// element is `this`
$(".pageNav ." + this.className).css(/* your change here */);
}
);
Here's a live example with just one pageNav, and a revision with multiple pageNavs just to show that it is updating multiple locations simultaneously.
mouseenter and mouseleave (IE innovations that still aren't supported natively by many browsers, but which jQuery provides if missing) are a lot less difficult to work with for this sort of thing than mouseover and mouseout, since mouseover and mouseout bubble. (In your case, it may not matter much, as you're using imgs; if you were using elements that could have child elements, though, it would make a big difference.)

Here is a possible solution.
You may want to look at changing <ul class="pageNav"> to <ul id="pageNav"> (unless you know for sure you will never duplicate this class).
Edit: updated to allow for multiple classes in the img tag.
$(function() {
var $pageNav = $('.pageNav');
// hook up hover function to all images under the imgGallery class
$('.imgGallery').find('img').hover(function() {
// find "page-item-" class
var pageItemClassName = this.className.replace(/.*(page-item-\d+).*/, "$1");
// toggle hovered class on matching item under unordered list
$pageNav.find('.' + pageItemClassName).toggleClass('hovered');
});
});​
You can then make a hovered css class which will apply when hovered. For example:
.pageNav .hovered {
background-color: #009900;
}

You can FAKE a CSS HOVER with the code bellow
$(document).ready(function() {
var images = $(".imgGallery img");
$.each(images, function(i, item) {
$(item).mouseover(function() {
$(this).css({
"background-image": "url('alternate_image.png')",
"background-repeat": "no-repeat"
});
}).mouseout(function() {
$(this).css({
"background-image": "url('original_image.png')"
});
});
});
});

In this jQuery script, I add and remove a second class class "over" that you can style accordingly.
$(function () {
$('div.imgGallery img').hover(
function () {
$('ul.pageNav li[class=' + $(this).attr('class') + ']').addClass('over');
},
function () {
$('ul.pageNav li[class=' + $(this).attr('class') + ' over]').removeClass('over');
});
});