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
Related
I have a mega menu that uses the hoverintent to delay the drop down, I have also set up a lightbox effect for the menu, however the code uses mouseenter and mouseleave, the problem is that whilst the drop down has a delay the lightbox effect doent, so as soon as the mouse passes over the lightbox is triggered. Is there any way that the code below can be changed to use hoverintent instead of mouseenter/mouseleave?
<script>
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
$("#mm-nav-overlay").toggle();
}).mouseleave(function () {
$("#mm-nav-overlay").hide();
});
}
});
</script>
Many Thanks
So I opted in the end to replace the code above with:
$(document).ready(function() {
if (document.documentElement.clientWidth > 801) {
$("#mega-menu").mouseenter(function() {
timer = setTimeout(function(){
$("#mm-nav-overlay").toggle();
},200/* <--- the delay */)
}).mouseleave(function () {
clearTimeout(timer);
$("#mm-nav-overlay").hide();
});
}
});
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
I'm looking to get the most efficient way to produce a latest news ticker.
I have a ul which can hold any number of li's and all I need to to loop through them fading one in, holding it for 5 seconds and then fading it out, one li at a time. The list is displaying with an li height of 40px and the well it displays in is also 40px which with overflow: hidden which produces the desired effect. Also to be able to hold the li in place if the cursor hovers over it while its being displayed would be great to build it.
I know there is the jQuery ticker plugin that is widely used (ala the old BBC style) but I've tried to use it and it seems so bulky for the simplicity I need and it plays havoc with the styling I use.
I've been using this so far:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
setInterval(function(){ tickOut () }, 5500);
But it doesn't actually fade in the next li so the effect is a bit messy.
If someone could suggest some alternations to help produce the effect I need that would be so useful.
Thanks
hide() and call fadein() the element after it becomes the top of the list.
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker'))
$('#ticker li:first').hide()
$('#ticker li:first').fadeIn(1000)
$('#ticker li:not(:first)').css('opacity', '1')
});
}
setInterval(function(){ tickOut () }, 5500);
see:
http://codepen.io/anon/pen/lHdGb
I woudl do it like that:
function tickOut(){
$('#ticker li:first').animate({'opacity':0}, 1000, function () {
$(this).appendTo($('#ticker')).css('opacity', 1); });
}
var interval;
$(function() {
interval = setInterval(function(){ tickOut () }, 5500);
$('#ticker').hover(function() {
if(interval)
clearInterval(interval);
$('#ticker li:first').stop();
$('#ticker li:first').css('opacity', 1).stop();
}, function(){
interval = setInterval(function(){ tickOut () }, 5500);
});
});
See $('#ticker').hover which clears interval and stops animation and returns opacity to 1 when mouse got inside UL (may be changed to do that when only some special element inside LI is under mouse) and starts it again once it left that UL. Demo: http://jsfiddle.net/KFyzq/6/
It's gonna be a long post, but I really had enough of trying to fix this. I'm really looking for some help solving my case.
First:
fade.js:
$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});
The problem here is after the ajax call of the next page, the fade stops working. So what I did is
$(document).ready(function(){
$(".gallery ul li img.a").fadeTo("slow", 0.5); // This sets the opacity of the thumbs to fade down to 30% when the page loads
$(".gallery ul li img.a").live("hover", function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.5); // This should set the opacity back to 30% on mouseout
});
});
But this will only work when I hover over the image then the image will fade out. If I do the same for $(".gallery ul li img.a").fadeTo to .live(...) nothing happens, it simply doesn't work.
how can make this work even after an ajax call, which is supposed to fadeto when it loads then fadeout when i hover over it.
Second:
I have a small slider that slides up on the image, slider.js:
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Full Caption Sliding (Hidden to Visible)
$('.gallery li').hover(function(){
$(".cover", this).stop().animate({top:'106px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'153px'},{queue:false,duration:160});
});
});
I changed $('.gallery li').hover(...) to $('.gallery li').live("hover", function(){...}) but still it didn't work. Also I used .on instead of .live because it's deprecated.
What am I doing wrong ? I'm not a client side dude, most of my work is server side. I just need to make these 2 plugins work after the AJAX call happens.
Ajax:
#dajaxice_register
def gallerypages(request, p):
try:
page = int(p)
except:
page = 1
items = gallerylist(page)
html = render_to_string('gallery_content.html',
{'items': items,},
context_instance = RequestContext(request))
dajax = Dajax()
dajax.assign('#gallery-content', 'innerHTML', html)
return dajax.json()
Edit2:
<b><</b>
and
$(document).on("keydown", "#pagenumber", function(e)
if ( e.which === 13 ) {
Dajaxice.gallery.gallerypages(Dajax.process, {'p': this.value});
}});
I'm not sure, but test this stuff:
JavaScript via jQuery
var initFade = function() {
$(".gallery ul li img.a").fadeTo("slow", 0.5);
}
// your custom callback method
var reBindStuffs = function(data) {
Dajax.process(data);
// rebind your jquery event handlers here... e.g.
initFade();
};
$(document).ready(function(){
// initial first time loaded fade
initFade();
// hover live binder
$(".gallery ul li img.a").live("hover", function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.5);
});
// document keydown listener
$(document).on("keydown", "#pagenumber", function(e)
if ( e.which === 13 ) {
Dajaxice.gallery.gallerypages('reBindStuffs', {'p': this.value});
}});
});
HTML
<!-- a click listener -->
<b><</b>
You were headed in the right direction with live, but live is depreciated for the on event. With on, you can include the selector as one of the arguments. The initial jQuery selector is only the container of the objects you want to add handlers to.
<div id="content">
<div class="sombutton"></div>
</div>
$( document ).ready( function() {
$( '#content' ).on( 'click', '.somebutton', function() {
alert( 'do something' );
} );
} );
Now even if we replace the content within the #conent div, newly added content with the class .somebutton will also have a click handler attached.
http://api.jquery.com/on/
What you mention is a big problem, I refresh by hand. But I also use the .ajaxcomplete functionality. It runs every after every Ajax query
$(document).ajaxComplete(function(){
// Carga tabs por defecto por clases.
if (typeof jQuery.fn.wf_responsivetab == 'function')
{
if ($('#rbtt_1').length)
{
$('#rbtt_1').wf_responsivetab({text: '...',});
$(window).on('resize', function() {$('#rbtt_1').wf_responsivetab({text: '...',});});
}
}
});
Not sure if this is possible but I have a slideshow on my site that when a button is click the relevant slide, slides in.
What I want to do is add a timer so that after 3 seconds the next button is clicked, making my slideshow slide automatically.
$('#button a').click(function(){
var integer = $(this).attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
});
Ive added a Fiddle...
http://jsfiddle.net/5jVtK/
The simplest way to do this is to use setTimeout (happens once after a delay) or setInterval (happens every so often).
setTimeout( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
setInterval( function() { $( '#button a' ).trigger( 'click' ) }, 3000 );
Once you get this implemented, you may want to think about some other niceties, such as stopping the automatic progression when the user's mouse is over the next button or over the slideshow (since that implies interest in what is currently displayed) and resuming the autoadvance on mouseout.
Next: it sounds like you need to figure out how to dynamically find the correct button to trigger to keep advancing through multiple slides. This is one way to do it:
`
function click() {
// Find the button for the next slide in relationship to the currently active button
var $next = $( '#button' ).find( '.active' ).next( 'a' );
// If there isn't one, go to the beginning
if ( ! $next.length ) {
$next = $( '#button' ).find( 'a' ).first();
}
// Trigger the click
$next.trigger( 'click' );
setTimeout(click, 3000);
}
setTimeout(click, 3000);
Here's a link to a fiddle showing this in action:
http://jsfiddle.net/5jVtK/1/
You can trigger the click event of an element with jQuery by doing
$('#button a').click();
To make this happen at a 3 second interval, use setInterval():
function simulateClick(){
$('#button a').click();
};
setInterval(simulateClick, 3000);
Something like this should work. This way we are running a function at an interval and the click also triggers the same function. The timer never needs to activate a button, just activate the function that the button also activates.
$(document).ready(function() {
var timer = setInterval( slideFunction, 5000);
$('#button a').click(function(){
slideFunction();
});
function slideFunction(){
var integer = $('#button a').attr('rel');
$('#myslide .cover').animate({left:-720*(parseInt(integer)-1)}) /*----- Width of div mystuff (here 160) ------ */
$('#button a').each(function(){
$(this).removeClass('active');
if($(this).hasClass('button'+integer)){
$(this).addClass('active')}
});
}
});