We Keep Coding

run animation only if not already running jQuery UI

I am using jQuery UI's Bounce Effect on a click event like this
$("#myelm").click(function(){
$(".wlbutton").children("span.new").effect( "bounce", "slow");
});
I would want to run the effect only if it's not already running. So if you click twice fast it will only act on the first click. How can I achieve this?
I've tried to clear the queue with jQuery's .stop() without any luck.

You can use .not to filter it:
$('#myelm').click(function(){
$('.wlbutton').children('span.new').not(':animated').effect('bounce', 'slow');
});
However I would use .is function to check instead of a filter because of code readability

Use the :animated selector to check whether the particular element is animating or not. If it is currently getting animated, Just let that click event ignored.
Try,
$("#myelm").click(function(){
var xEle = $(".wlbutton").children("span.new");
if(xEle.is(':animated')) { return; }
xEle.effect( "bounce", "slow");
});
The another way would be using .stop().
$("#myelm").click(function(){
$(".wlbutton").children("span.new").stop().effect( "bounce", "slow");
});
DEMO

jquery document on hover function not working properly

I am wondering a function that will work similar like:
$(document).click(function () {});
but with hover function.
When I tried with :
$(document).hover(function () {});
its not working.Can any body give me some idea about this problem.
i.e.My main aim is when user mouse hover on body or documents any will give an alert message..
thanks.

You want something like this?
$(document).ready(function(){
$('#YourElementId').hover(function(){
alert('mouse hovered');
});
});

Take care of including jQuery in your page. Then, you can do
$('.someclass').on('hover', function(){ alert("something"); });
or
$('.someclass').hover(function(){ alert("something"); });
try to avoid to bind hover to document unless you have to delegate an event so you should do
$(document).on('hover', '.someclass', function() {});
Binding hover to document can provide bad experience to your users, specifically if you are showing alerts, unless, as always, you take care of which element have to show it.

Detect scroll events with bootstrap-modal modalOverflow?

I have a number of tooltips a date pickers used in my modal. How can I detect if the overflow modal has been scrolled so I can either reposition any open floating elements and reposition them according to the modal scroll position?
Thx
window.scroll is not firing!
An example of this is available here: Long modals (bottom of page)
http://jschr.github.io/bootstrap-modal/

OK, I sorted it.
The scroll event doesn't propagate to the document level of the DOM so $(document).on doesn't work.
I got around it with this hack.
This did work.
$(document).on("shown", "#modalcontact", function() {
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function(){
//do stuff
});
});
This didn't work.
$("#modalcontact").modal({
shown: function (){
$(".modal-scrollable").scroll(function(){
//do stuff
});
}
});
This didn't work.
$(document).on("scroll", ".modal-scrollable", function(){
//do stuff
});

You already answered your own question, but I would add that it's working this way as well:
$("#modalcontact").modal().on('loaded.bs.modal', function(){
$(this).parents('.modal-scrollable').scroll(function(){
//Do stuff
});
});
I've struggled to manage to work with shown event, but it was because the content was loaded remotely.

Try
$(document).on('scroll', '.modal-scrollable', function(){
//your code here
});
The scroll event handler can be bound to more than just the window.

This worked for me, whereas the earlier answers didn't for some reason. But I am opening the modal window using code, so that I can dynamically fill it with content before it is shown.
$('#modalcontact').modal('show');
$(".modal-scrollable").unbind("scroll");
$(".modal-scrollable").scroll(function () {
$('body').append('Hey hey hey!');
});

Is it possible to bind a handler to a jQuery effect?

I would like to call function when slideUp or slideDown are performed on an element. Is this possible?
Something like:
$('#panel').on('slideUp', function() { open--; });
$('#panel').on('slideDown', function() { open++; });
Update: The problem is that there are a ton of slide calls (e.g.: $().slideUp()) all over the page, within ajax responses, hash link clicks, etc.. I was hoping to bind to the slide itself somehow rather than add code to each calling function.

You cannot bind to an event since there is no such.
But you can pass a handler that will be called after animation is finished
$('#panel').slideUp(function() { ... });
http://api.jquery.com/slideUp/

If you really want to do this, you can use custom events and your own little plugin, something like this:
$.fn.mySlideToggle = function() {
this.slideToggle();
this.trigger('mySlideToggle');
}
$('div').on('mySlideToggle', function(){ console.log('hey') });
$('button').on('click', function(){ $('div').mySlideToggle(); });
Here's a little demo (check console): http://jsbin.com/asejif/2/edit
In your case it is redundant though, since you can use the callback that the slide events provide, but it might be useful for other things...

Trying to toggle a panel whilst changing the icon to 'view more' and 'view less'

I've just started learning jQuery/javascript, so this might seem like a really basic question, but it's annoying me nevertheless.
I have a panel of 6 <li>s, 3 of which are hidden until clicking on the 'view more' link at which point the panel toggles to reveal the other 3. The icon is changing from 'more' to 'less', but then not changing back to 'more'. Can anyone see the problem in the code?
Any help would be greatly appreciated :)
Thanks,
David
$(document).ready(function() {
$('.allApps').hide();
$('.moreAppsIcon').click(function() {
$('.moreAppsIcon').removeClass("moreAppsIcon").addClass("lessAppsIcon");
$(this).toggleClass("active");
$('.allApps').slideToggle("slow");
return false;
});
$('.lessAppsIcon').click(function() {
$('.appsMore').slideToggle("slow", function () {
$('.appsMore').removeClass("appsMore").addClass("moreAppsIcon");
$(this).toggleClass("active");
return false;
});
});
});

It's easier to use .live() here, like this:
$('.moreAppsIcon').live('click', function() {
//and...
$('.lessAppsIcon').live('click', function() {
Otherwise your functions aren't being bound correctly. For example $('.lessAppsIcon') finds elements with that class at that time and binds a click handler to them...elements getting that class later don't get that click handler, whereas .live() works on the selector of the element at the time of the event, having the result you want.
So basically you're attaching n event handlers, one for each element matching initially...when you do .addClass() the other elements don't get that event handler all the sudden, it's on the DOM elements you initially found, not dynamically added to others when they change class. For the same reason .removeClass() doesn't remove the event handler. However, if you use .live() like above, it'll have the effect of changing event handlers like you're after.

I figured it out. It was pretty much what Nick was saying actually to do with the time of the event. I added an id to the <li> to handle the click event. This is what it looks like:
$(document).ready(function() {
$('.allApps').hide();
$('#moreOrLess').click(function() {
$('.allApps').slideToggle("slow", function() {
$('#moreOrLess').toggleClass("moreAppsIcon").toggleClass("lessAppsIcon");
$(this).toggleClass("active");
});
return false;
});
});
Cheers for the help though Nick :)