Develop Reference

Hide tooltip after some time

I want an effect, when someone hovers over an element, he sees a tooltip for a few seconds after which the tooltip disappears, even when the mouse is still on the element. This is what I have:
<div data-sentence-tooltip="yes" data-tooltip-content: "some content"> some text </div>
$('[data-sentence-tooltip="yes"]').tooltip({title: function(){return $(this).attr('data-tooltip-content')}});
I tried the following two, based on other related SO questions:
setTimeout(function(){$(".tooltip").fadeOut("fast");}, 2000);
and
jQuery.fn.delay = function(time,func){
return this.each(function(){
setTimeout(func,time);
});
};
$('[id^="tooltip"]').delay(2000, function(){
$('[id^="tooltip"]').fadeOut('fast');
}
);
But I think I know why none of these are working. Probably because .tooltip or id=tooltip* gets added to DOM on-the-fly.
Ref:
jQuery tooltip, hide after.. time
jquery tooltip set timeout

Taking cue from Zoheiry answer, this is what I finally did:
$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
setTimeout(function(){
$('#enclosingParentDiv').find('.tooltip').fadeOut('fast');
}, 1000);
});
Couple of points to note:
I applied the "mouseover" to each div, because the user is hovering the mouse on the content in the div
I search for .tooltip in the parent div because tooltip gets added as sibling.

Add a function like so
$('[data-sentence-tooltip="yes"]').on('mouseover', function(){
// if the tooltip is a child of the element that is being hovered on
// then write this.
setTimeout(function(){
$(this).find('.tooltip').fadeOut();
}, 2000);
// if the tooltip is a sibling of the element being hovered on
// write this
setTimeout(function(){
$(this).parent().find('.tooltip').fadeOut();
}, 2000);
});
This ensures that your code will only look for the .tooltip after you have hovered on the item which displays it.

I figured this out by looking at the element under inspect in chrome. Not sure if this is entirely foolproof and would work with other browsers
$('input').on('mouseover', function() {
if(!$(this).is(":focus"))
$("#" + $(this).attr("aria-describedby")).delay(800).fadeOut(800);
});
if clause is optional which makes this code effective only when focus is not on the textfield. otherwise the tooltip continue to display

Button that displays and hides a sliding menu

I'm trying to build a header with a menu button that triggers a sliding menu. I can make the menu appear when I press the button, but I also want it to dissappear when I click the button again.
This is the event that triggers when the button is clicked.
$('#nav-button').click(function () {
$("#slidermenu").animate({right: "0px"}, 200);
$("body").animate({right: "300px"}, 200);
});
I looked up the animate method and saw that it has a function called done, which takes two parameters. A promise and a boolean. So I figured I can use a if-statement to check if the animation is done, and if the animation is done, the button would send the slidermenu back.
But how can I test if animate().done() is true? Or is there a more simple way of achiveing this?
Here is my fiddle.

.is(':animated') will return true if it's currently being animated.
In the context of what you're trying to do:
if(!$('#slidermenu').is(':animated'))
{
// Animation has finished
}
As an aside:
I try and do this with CSS only now where possible. If you use jQuery toggleClass and predefine the right attributes in your CSS for the toggled classes, you can add a CSS transition to deal with the animation. Just thought it was worth mentioning (this does come with it's own compatibility issues).

Like DeeMac said, it may be better to do this with css transition instead of jQuery animate. But just to add an option, I'll try to show you how to get this to work with jQuery animation also.
First of all, instead of inspecting if the animation is still running or not, you can just stop the ongoing animation before starting another. It will make the button to respond immediately to the users clicks.
For finding out if the menu is open or not, you can use toggleClass. This way you can just use hasClass to determine in which direction you need to animate the menu.
So, this what I came up with:
$('#nav-button').click(function () {
$("#slidermenu").stop();
animateToPosition = "0px";
if ($("#slidermenu").hasClass("open")) {
animateToPosition = "-300px";
}
$("#slidermenu").toggleClass("open");
$("#slidermenu").animate({
right: animateToPosition
}, 200);
});
I made a Demo. If you are going with the css solution, it's fine. Maybe this will help someone else in the future.

Bootstrap Hover slideUp slideDown Animation

I use this code to make bootstrap dropdown show when mouse hover
var bMobile; // true if in mobile mode
// Initiate event handlers
function init() {
"use strict";
// .navbar-toggle is only visible in mobile mode
bMobile = $('.navbar-toggle').is(':visible');
var oMenus = $('.navbar-nav .dropdown'),
nTimer;
if (bMobile) {
// Disable hover events for mobile
oMenus.off();
} else {
oMenus.on({
'mouseenter touchstart': function(){
event.preventDefault();
clearTimeout(nTimer);
oMenus.removeClass('open');
$(this).addClass('open');
},
'mouseleave': function() {
nTimer = setTimeout(function() {
oMenus.removeClass('open');
}, 500);
}
});
}
}
$(document).ready(function() {
// Your other code to run on DOM ready...
init();
});
$(window).resize(init);
I use this code to remove hover effect from small screens and work on big screens
How can make this code slide animation ?
and if there is code better than this code please add it in comment
I am bad in English, sorry :)

I recommend using the http://daneden.github.io/animate.css/ project, and adding the css class you want, i'll try to throw together a quick example
Here's a quick and dirty demo
$($(this).find(".dropdown-menu")[0]).addClass('bounceInUp animated');
http://jsfiddle.net/L8nz8zk2/1/

you would want to use something like this to handle the mouse events (no need for the $.on()):
http://api.jquery.com/hover/
so your code would look something like this.
$('CSS SELECTOR OF THE ITEM TO HOVER OVER').hover(function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE DOWN').slideDown();
},function(){
$('CSS SELECTOR OF THE ITEM THAT NEEDS TO SLIDE UP').slideUp();
});
The Jquery animation of slideDown() and slideUp() is what you're looking for, and this combined with the .hover() jquery event handler should be able to give you what you need.
you can lose the .on() calls.

Create a custom toggle with jQuery

I have the following code, which fades in HTML via a .load into a .pop-up modal.
$('.about').click(function(){
$('.pop-up').load('about.php', function(){
$(this).fadeIn();
});
However, I need a second click to make the .about fade out. I understand certain toggle functions are now deprecated. Is there a current method I could use? I have a couple of these functions which will need toggling throughout the code.
Any help would be great.

$('.about').click(function(){
$('.pop-up').load('about.php', function(){
$(this).toggle( "slow", function() {
// Animation complete.
});
});
http://api.jquery.com/toggle/

you can use toggle but by custom code you can do your customization very well
var toggle=0;
$('.about').click(function(){
var $this=$('this');
if(!toggle)
{
$('.pop-up').load('about.php', function(){
$this.fadeIn();
toogle=1;
});
}
else{// or do other action which you want
$this.fadeOut();
toggle=0;
}
});

Using Jquery background to change css - How to Allow only one link at a time

I want to make a list of URLs that get highlighted when you click, the problem is only one link should be highlighted at any one time.
I'm able to get the reset button working. used removeAttr) - $("a").removeAttr("style") - (is there any negatives to doing it this way?)
But I can't get it to be only do one highlight at a time.
Could someone help me with an example code of making only one link highlighted at one time? Right now, it's possible to highlight multiple links.
I was able to make an example on Jsfiddle http://jsfiddle.net/M3vVw/3/

I'd recommend doing it this way: create a CSS rule and apply it to the element you click on, removing the same style from all links first.
jQuery
$("a").click(function () {
$('a').removeClass('back');
$(this).addClass('back');
});
$("#btn").click(function () {
$("a").removeClass("back")
});
CSS
.back {
background-color: #ff3fff;
}
jsFiddle example

I'd suggest using addClass() (as adeneo already suggested), but if you must use attr():
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').attr('style', '');
});
JS Fiddle demo.
Or:
$('a').click(function(){
var that = $(this);
that.css("backgroundColor", "#ff3fff").closest('li').siblings().find('a').removeAttr('style');
});
JS Fiddle demo.
Do remember that using attr()/removeAttr() is incredibly destructive and requires much more work and maintenance (you have to explicitly restructure the CSS of each of the styled element's properties every time); addClass()/removeClass() is far more efficient, since it contains all the styling externally, where it's easy to add/remove that styling to the element when needed.
References:
addClass().
attr().
closest().
css().
find().
removeAttr().
siblings().

You can use this:
$("a").click(function()
{
$(this).css("backgroundColor", "#ff3fff");
$("a").not($(this)).removeAttr("style");
});
$("#btn").click(function(){
$("a").removeAttr("style")
});

LIVE DEMO
CSS:
a.active{
background:#ff3fff;
}
jQuery:
function removeActive(){
$("a").removeClass("active");
}
$("a").click(function( e ){
e.preventDefault();
removeActive();
$(this).addClass("active");
});
$("#btn").click(removeActive);