Conditional Draggable jQuery UI - javascript

I have a contenteditable div for use as a rich text editor. Usually, the div should be draggable. But when the div is focused, I need to turn off the draggable function so I can select text by clicking and dragging.
So, I'm trying to use an if statement like so
if (!$('.elemText').is(':focus')) {
$('.elemContainer').draggable();
};
This is not taking effect though, when I focus the contenteditable div.
Similarly, if I reverse it so the div is only draggable when focused. This doesn't take effect either.
if ($('.elemText').is(':focus')) {
$('.elemContainer').draggable();
};
I'm also using some other javascript for handling focus and blur events.
$('.elemText').on({
focus: function() {
if (!$(this).data('disabled')) this.blur()
},
dblclick: function() {
$(this).data('disabled', true);
this.focus()
},
blur: function() {
$(this).data('disabled', false);
}
});
JSFiddle demo

You have to assign the Draggable function every time you're focusing or blurring on the element. I have updated your JSFiddle as can be seen here:
$(document).ready(function() {
$('.elemContainer').draggable();
});
$(".elemText").on({
focus: function() {
$('.elemContainer').draggable("destroy");
if (!$(this).data('disabled'))
this.blur();
}, dblclick: function() {
$(this).data('disabled', true);
this.focus()
}, blur: function() {
$('.elemContainer').draggable();
$(this).data('disabled', false);
}
});
Every time you take focus out of the textbox, the item is being made draggable, and when you focus on it, the .draggable("destroy"); removes the dragging feature.

Use destroy method.
This method removes the draggable functionality completely. This will return the element back to its pre-init state.
So you can do it like this : jsFiddle LIVE DEMO
$('.elemContainer').draggable();
$('.elemText').on({
focus: function() {
if (!$(this).data('disabled')) this.blur();
},
dblclick: function() {
$('.elemContainer').draggable('destroy');
$(this).data('disabled', true);
this.focus();
},
blur: function() {
$('.elemContainer').draggable();
$(this).data('disabled', false);
}
});
For more info read the API Documentation

DONT use destroy! Get on with event.Propagation due to draggable or other events. If you guy enable event propgation on draggable for the given "editable"-div this solution will work fine. without destroying anything! The Problem is about draggable... draggable will prevent your click focus event in your editable div ... thats why its not working. Btw... you just need that smart code:
$('.elemContainer').draggable();
$('.elemText').on({
click: function() {
$(this).focus();
},
focus: function() {
$('.elemContainer').draggable({ disabled: true });
},
blur: function() {
$('.elemContainer').draggable({ disabled: false });
}
});
http://jsfiddle.net/9jdT6/14/

Related

jQuery .hide() on .blur() not working in iOS web app

I have a web app which hides the bottom toolbar while typing to stop it going on top of the keyboard.
$(document).ready( function() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
});
$('#open'); is an <input> box.
Instead of hiding, the lower bar stays. The text 'loading' also appears beneath (for some reason). This is especially strange as I can't find it in the DOM when inspecting on my computer.
Link: www.scriptr.net/webapp
Try listening to a different ready event for mobile. Something like this
document.addEventListener("deviceready",onReady,false);
function onReady() {
$("#open").focus( function() {
$('#bottom').hide();
});
$("#open").blur( function() {
$('#bottom').show();
check();
});
}
just put this code on deviceReady function, work for me
document.addEventListener('focusout', function(e) {window.scrollTo(0, 0)});
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);

Button can't be contenteditable when it's draggable

I'm trying to make a button that the content of it can be editable and at the same time the button can be draggable. I would also like to make it resizable.
This is what I've done. As of now, the button is draggable but it's content can't be edited. When I erase the draggable part, the content can now be edited.
JS:
$(function() {
$('#bt1').on('click', function() {
$(this).attr('contentEditable', true);
});
$('#bt1').on('blur', function() {
$(this).attr('contentEditable', false);
});
$('#bt1').draggable({cancel:false});
});
HTML:
<button id='bt1'>edit</button>
JFiddle:
http://jsfiddle.net/wuYY8/
Try the delay option
Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
$('#bt1').draggable({
cancel:false,
delay:300
});
http://api.jqueryui.com/draggable/#option-delay
I hope this helps you
JSFIDDLE
$("#content").draggable().click(function() {
$(this).draggable( {disabled: false});
}).dblclick(function() {
$(this).draggable({ disabled: true });
});

Trigger Twitter Bootstrap Popover on Keyup Event in Textarea?

I'm trying to get a Bootstrap popover to fire when I make a change/keyup event in a text area. The idea is that a user will enter some text, I'll check to see what type of text and based on that, I will fire (or not fire) a popover.
showPopover = function() {
return $(this).popover("show");
};
hidePopover = function() {
return $(this).popover("hide");
};
$("textarea").on("change keyup", function(e) {
$("[rel=next-popover]").popover({
placement: "left",
trigger: "manual"
}).hover(showPopover, hidePopover).click(showPopover);
};
Somehow, this simple thing is not working (I'm also using the data attributes of Bootstrap popover for the popover data). Here is the jsfiddle: http://jsfiddle.net/bpjavascript/CgRKS/
Try
$("textarea").on("change keyup", function (e) {
$("[rel=next-popover]").popover("show");
});
$("[rel=next-popover]").popover({
placement: "right",
trigger: "manual"
})
Demo: Fiddle

Focus Which not triggered by click

How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});
To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/
Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});
function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration

JQuery .on() method with multiple event handlers to one selector

Trying to figure out how to use the Jquery .on() method with a specific selector that has multiple events associated with it. I was previously using the .live() method, but not quite sure how to accomplish the same feat with .on(). Please see my code below:
$("table.planning_grid td").live({
mouseenter:function(){
$(this).parent("tr").find("a.delete").show();
},
mouseleave:function(){
$(this).parent("tr").find("a.delete").hide();
},
click:function(){
//do something else.
}
});
I know I can assign the multiple events by calling:
$("table.planning_grid td").on({
mouseenter:function(){ //see above
},
mouseleave:function(){ //see above
}
click:function(){ //etc
}
});
But I believe the proper use of .on() would be like so:
$("table.planning_grid").on('mouseenter','td',function(){});
Is there a way to accomplish this? Or what is the best practice here? I tried the code below, but no dice.
$("table.planning_grid").on('td',{
mouseenter: function(){ /* event1 */ },
mouseleave: function(){ /* event2 */ },
click: function(){ /* event3 */ }
});
That's the other way around. You should write:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
}, "td");
Also, if you had multiple event handlers attached to the same selector executing the same function, you could use
$('table.planning_grid').on('mouseenter mouseleave', function() {
//JS Code
});
If you want to use the same function on different events the following code block can be used
$('input').on('keyup blur focus', function () {
//function block
})
I learned something really useful and fundamental from here.
chaining functions is very usefull in this case which works on most jQuery Functions including on function output too.
It works because output of most jQuery functions are the input objects sets so you can use them right away and make it shorter and smarter
function showPhotos() {
$(this).find("span").slideToggle();
}
$(".photos")
.on("mouseenter", "li", showPhotos)
.on("mouseleave", "li", showPhotos);
And you can combine same events/functions in this way:
$("table.planning_grid").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
'click blur paste' : function() {
// Handle click...
}
}, "input");
Try with the following code:
$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change',
function() {
}
);

Categories

Resources