We Keep Coding

Let draggable do its work only if mouse cursor on a draggable element is default cursor

I have used jQueryUI's draggable method on a div.
var data = '<div> <p> Draggable Div </p> </div>'
$(data).appendTo($(this)).draggable();
It works fine.
My application heavily depends on mouse cursor type.
So, I change cursor every now and then programatically.
Now, I want that:
Draggable class should only be doing its work if the mouse cursor of a draggable element is default cursor.
How can I change this behavior without making changes in jQueryUI.js file if possible.

You can make use of the start event.
$("#data").draggable({
start: function(event, ui) {
if ($(this).css('cursor') === 'auto') { //replace "auto"
event.preventDefault();
}
}
});
I have created a working fiddle here.
I hope this helps.

Custom large mouse cursor with javascript

I want to create custom cursor image, but it is limited to 32x32, while I need about 300x300 image. So it seems that I need to hide cursor cursor: none and create custom large div or image, that will be moving with invisible mouse.
The simplest implementation could be:
$(document).on('mousemove', function(e){
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY
});
});
but I have some problems:
Performance (how should I implement moving div not with left-top properties)
Text selection jsfiddle cannot select text properly
Can anyone help me with this?

On modern browsers, you need to use pointer-event CSS property set to none:
--DEMO--
$(document).on('mousemove', function (e) {
$('#custom-cursor').css({
left: e.pageX,
top: e.pageY,
pointerEvents: 'none'
});
});

If Cursor and Text are in the same Color, add z-index: -1 to the cursor. So the cursor is behind the text and lets you select it.
But if the color is not equal the user will see, that the cursor is behind the text.

On mouse hover show a div like jQuery Tooltip

Let consider fallowing scenario
<p>jhony</p>
<p>ram</p>
<p>lilly</p>
<div id="about"></div>
<script>
$(function() {
$('p').hover(function() {
$('#about').show();
}, function() {
$('#about').hide();
});
});
Know on mouse hover on the p tag a div will showed,But it is taking always a fixed/absolute position,But I want to show it with respect to hovering element.
Example:
If I place mouse on 'jhony' then about div should be shown left to it,
If I place mouse on 'ram' then about div should be shown left to it,
If I place mouse on 'lilly' then about div should be shown left to it.
Finally it should work like jQuery Tooltip.

Why u use jQuery for it? U can use only css
p:hover span{display : block}
or if you want use jQuery/js you must calculate height from top of window to your p and set it for your div:
$(function() {
$('p').hover(function() { $('#about').css('top',this.offset().top
)}

How to make a sliding thingamajig between photos?

See the effect in the photos in the article here:
http://www.popsci.com/science/article/2012-11/and-after-images-show-hurricane-sandys-devastation
Does anyone have any idea how that's done? I suppose I could make two frames with adjustable width within a fixed frame, but what about the handle? And the way the frame line and handle brighten and enlarge when you mouse over? Hover event, to be sure, but what kind of hover event?

It is very simple. You have 2 DIVs with the 2 different images (as background-image in css) overlapping eachother (In e.g absolute positioning.) (Perhaps the "Before" picture above)
Then you have a slider and when dragged it decreases the overlapping DIV's width, making the underlaying DIV show!
This functionallity can be found in a jQuery plugin called "Before/After"
Link: jQuery BEFORE / AFTER

You could of course just write your own that isn't dependant on jQuery UI.
;(function($){
$.fn.slidingThingamajig = function () {
return this.each(function(){
var $this = $(this);
$this.find('.handle')
.css({cursor:'ew-resize'}) // Here's your fancy cursor with directional arrows
.on('mousedown', function(e) {
$this.addClass('resizable');
$this.parents().on('mousemove', function (e) {
$('.resizable').css({width:e.pageX - $('.resizable').offset().left});
}).on('mouseup', function(e) {
$('.resizable').removeClass('resizable');
});
e.preventDefault();
});
});
}
})(jQuery);
You would probably need to tweak this a little, but it's mostly all there.

Fast moving mouse never triggers mouseleave event

When mousing over certain buttons on my site, I'd like for tooltips to appear that instruct users. Basically, whenever a button with the 'has_tooltip' class is moused over, a tooltip is attached.
$('.has_tooltip').live({
mouseenter : function(e) {
if($('#tooltip_container').length > 0){
$('#tooltip_container').remove();
}
var $t = $(this), text = $t.attr('rel'), left = e.pageX-25, top = e.pageY-25;
if($t.attr('rev') === '1') {
text += ' <span class="tooltip_warning">You must be logged in to make use of this.</span>'
}
$tooltip = $('<div id="tooltip_container">'+text+'</div>');
$('body').prepend($tooltip);
$tooltip.css({
left: left+'px',
top: top+'px'
});
},
});
And when a user's cursor leaves the newly created tooltip box, it should disappear
$('#tooltip_container').live({
mouseleave : function(e){
$(this).remove();
}
});
However, a fast moving mouse over a button with the 'has_tooltip' class adds the tooltip, but moves too quickly for the mouseleave event to trigger.
Anyone have some tips on how I can fix this?

'If the mouse does not enter the tooltip (the tooltip appears below the mouse), the browser may not trigger the mouseleave event. You may want to add an additional selector. Try this:
$('#tooltip_container','.has_tooltip').live({
mouseleave : function(e){
$('#tooltip_container').remove();
}
});
I would highly recommend removing the HTML from your tooltip method though... try creating an empty div and add the tooltip text and positioning when you go to show it -- try to add as little to the DOM as possible (create a hidden div for most of the tooltip HTML and only change the actual text content of it as necessary).
Ideally, your mouseenter should simply replace the tooltip text and show the div with correct positioning. The mouseleave event should just hide() the tooltip div (not remove it from the DOM just to be created and added again later).