JQuery reversing SlideToggle in Wordpress - javascript

I have the following simple code:
jQuery( document ).ready(function( $ ) {
$('.menu ul li:has("ul")').hover(function() {
$('>ul', this).stop().slideToggle();
});
});
I'm using the 'no conflict' way of firing jQuery but for some reason my slide toggle is closing on hover rather than opening! What am I doing wrong? I'm sure its simple but I just can't see it.
An example can be seen here http://ng1club.everythingcreative.co.uk

Use mouseenter and mouseleave instead. Sometimes hover without the second function as a hover out, triggers twice.
$('.menu ul li:has("ul")').mouseenter(function() {
$('>ul', this).stop().slideDown();
}).mouseleave(function() {
$('>ul', this).stop().slideUp();
});

Try this according to documentation you can use hover and apply effect on hover and hover out
jQuery('.menu ul li:has("ul")').hover(
function() {
jQuery('>ul', this).stop().slideDown();
}, function() {
jQuery('>ul', this).stop().slideUp();
}
);
.hover()
Sample Fiddle

Related

Check if element is hovered over in jQuery

How can one check if the cursor is hovered over in jquery or js.
I have tried $('#id').is(':hover') but this doesnt seem to be working at all.
I have to mention that i am calling this line inside of a hover() function could this maybe be the problem?
here is my code:
$(document).ready(function() {
/* On hover function, over the menu items */
$('nav ul li').hover(function(){
$('nav ul li').css("background-color", "");
$('#append').css("background-color", "");
$(this).css("background-color", "#9999FF");
$('#append').css("background-color", "#9999FF");
var append;
if($('#menu-item-12')) {
append = 'news';
}else if($('#menu-item-9:hover')) {
append = 'account';
}else if($('#menu-item-11').is(':hover')) {
append = 'check out';
}
$('#appendp').empty();
$('#appendp').append(document.createTextNode(append));
});
Hope someone can tell me whats wrong.
here is jsfiddle link, i did my best :) https://jsfiddle.net/xsv325ef/
A nice way to do it is to store the related texts into an Object literal,
and recall the text depending on the hovered element ID:
fiddle demo
$(function() { // DOM ready shorthand ;)
var $appendEl = $('#appendp');
var id2text = {
"menu-item-12" : "unlock this crap",
"menu-item-9" : "check your gdmn account",
"menu-item-11" : "check the hell out"
};
$('nav ul li').hover(function(){
$appendEl.text( id2text[this.id] );
});
});
Regarding the colors... use CSS :hover
You just need to check if hovered item has this id.
Something like this: https://jsfiddle.net/hrskgxz5/5/
if(this.id === 'menu-item-11') {
append = 'check out';
alert('hovered');
}
$('li').hover(function(){
$(this).css("background-color", "#9999FF");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
You should notice that jQuery .hover() function takes 2 handler function, and here you only provide one. Check the official documentation here.
In your case, you may just use .mouseover() to add a class on top of it, and then set your styles in css file. (Document here)
For example:
$(document.ready(function(){
$('nav ul li').mouseover(function() {
$(this).addClass('active');
});
});
If you do need to toggle the class for that element, the hover function should be as follow:
$(document.ready(function(){
$('nav ul li').hover(function() {
// Stuff to do when the mouse enters the element
$(this).addClass('active');
// Other styles you want to do here
// ...
}, function() {
// Stuff to do when the mouse leaves the element
$(this).removeClass('active');
// Other styles you want to remove here
// ...
});
});
Edit:
As I found out, jQuery .hover() function DO accept single handler. In that case, you'll have to let the class toggle inside:
$(document.ready(function(){
$('nav ul li').hover(function() {
// Stuff to do when the mouse enters the element
$(this).toggleClass('active');
});
});

Jquery on hover and out

I am trying to hide a div whenever I will hover over it and show another one in the same place.. And when I take the mouse out of that.. the previous div will be shown and this div will be hidden...
$(document).ready(function(){
$('#hover_tutor').hover(
function () {
$('#hover_tutor').hide();
$('#hover_tutor_hidden').show();
},
function () {
$('#hover_tutor').show();
$('#hover_tutor_hidden').hide();
}
);
});
<div id="hover_tutor">Blah</div>
<div id="hover_tutor_hidden" style="display:none;">Bleh</div>
But on hovering the hover_tutor... something is happening.. It's jumping up and down.. I don't know what's wrong...
You need to use .mouseenter event for #hover_tutor div and .mouseleave for #hover_tutor_hidden div:
$('#hover_tutor').mouseenter(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').mouseleave(function () {
$('#hover_tutor').show();
$(this).hide();
}
).mouseleave();//trigger mouseleave to hide second div in beginning
Working Demo
You can also use toggle method instent of hide/show on hover event
<div id="hover_tutor" style="display: block;">Blah</div>
<div id="hover_tutor_hidden" style="display: none;">Bleh</div>
$('#hover_tutor').hover(
function () {
$('#hover_tutor').toggle();
$('#hover_tutor_hidden').toggle();
});
Working demo
http://jsfiddle.net/ivyansh9897/8jgjvkqk/
try this,
$('#hover_tutor').hover(function () {
$(this).hide();
$('#hover_tutor_hidden').show();
});
$('#hover_tutor_hidden').hover(function () {
$('#hover_tutor').show();
$(this).hide();
}
));
If you do have the flexibility to modify your html little bit using class attribute there's a better way. Use .toggle() to alter the state of your element on both mouseover and mouseleave.
HTML :
<div id="hover_tutor" class="hello">Blah</div>
<div id="hover_tutor_hidden" class="hello" style="display:none;">Bleh</div>
jQuery :
$(".hello").on("mouseover mouseleave", function(){
$("#hover_tutor").toggle();
$("#hover_tutor_hidden").toggle();
});
jsFiddle

JQuery.hover() not working when hovering over tile

I'm trying to add some functionality when hovering over a 2048 tile. Each tile of value n has a class 'tile-n'.
For the basic 'tile-2' tile, I have the hover functionality:
<script>
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
</script>
But nothing is happening and I don't believe the hover is being registered and I'm not sure why.
My implementation can be seen at: http://kpscript.github.io/PCN-Embark-2048/
The 'tile-2' div can be seen at: html.body.container.game-container.tile-container.tile-2.
Of course, I plan to do more non-trivial things with hover, but for now I can't even get the alert to show.
Try like this, It works for me...
$("body").on('mouseenter', '.tile-2', function () {
alert("in!");
}).on('mouseleave', '.tile-2', function () {
alert("out!");
});
I think you load html using ajax, this should work
<script>
$( "body" ).on('hover','.tile-2',
function(){
alert("in!");
}, function() {
alert("out!");
}
);
;)
You are trying to bind the event to the element before the element is rendered on the page. Wait until its loaded.
$(document).ready({
$( ".tile-2" ).hover(
function(){
alert("in!");
}, function() {
alert("out!");
}
);
});

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

How do I add a delay timer?

I have this code that makes menu items slide down and up. I want to add a timer so there is a delay in the slide down then back up.
$(function () {
$("#menu").find("li").each(function () {
if ($(this).find("ul").length > 0) {
$(this).mouseenter(function () {
$(this).find("ul").stop(true, true).slideDown();
});
$(this).mouseleave(function () {
$(this).find("ul").stop(true, true).slideUp();
});
}
});
});
It appears like you're writing javascript with jQuery
jQuery has a built in .delay function for animation queues.
In your example, delaying the slidedown animation by 300 ms would look like
$(this).find("ul").stop(true, true).delay(300).slideDown();
See jQuery's delay
A smart approach would be to add a hover intent to wait before triggering mouseleave:
jsBin demo
$("#menu").find("li:has(ul)").on('mouseenter mouseleave',function( e ){
var $UL = $(this).find('ul');
if(e.type==='mouseenter'){
clearTimeout( $(this).data('wait') );
$UL.stop(1,1).slideDown();
}else{
$(this).data('wait', setTimeout(function(){
$UL.stop().slideUp();
},180) );
}
});
instead of using if ($(this).find("ul").length > 0) { just use: ("li:has(ul)") to trigger your events only on li elements that has ul as children.
add an event callback e for the mouseenter mouseleave.
if the e event == mouseenter ..... else is mouseleave.
Than clear the data attribute called 'wait' and slideDown the children ul
Now, leaving the original li element to reach the 'distant' ul we have to cross over a white space (demo) that will usually trigger immediately the 'slideUp()', but we set a timeout counter inside that li's data attribute that will wait ~180ms before running.
Reaching the 'distant' ul element - beeing a children of the timeouted 'li' we clear the timeout (step 1) 'retaining' the mouseenter state.
use ~180ms or how much you think is needed to reach with the mouse the 'distant' UL element

Categories

Resources