I modified one method of JQuery UI Resizable to achieve a centered resize. This works fine if I just link to my modified jQuery UI source. But I would like to link to the CDN hosted minified JQuery UI code and just inject the modified _respectSize method when making the call $("#selector").resizable({ .. });
What is the best way to do this?
Include this after bringing in jQuery UI and before you create your resizable widget.
$.ui.resizable.prototype._respectSize = function() {
//Do your custom thing here.
};
Related
Hello I'm trying to combine in a div the .sortable operation of jquery-ui with swipe evente on mobile device. Unfortunately when a div is .sortable it does not handle the 'swipe' event.
Any Ideas?
jQuery UI doesn't support touchevents at the moment. You could use a plugin which converts the mouseevents as touch events here is link to the Homepage and Github. Thats the only way i know how to make jQuery UI widges touchable.
I want to add a jquery ui effect to a div element when the template is rendered , so I tried using the onRendered callback :
Template.home.onRendered(function(){
this.$('.hidden').show('fold',1000).removeClass('hidden');
});
the removeClass bit work , but the effect is not working , is there any solution to this problem ?
I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?
Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe
jQuery mobile automatically adds classes to all elements on my page on loading... this really messes up the jQuery UI widgets I have on the page. Is there any way to prevent jQuery mobile from automatically adding classes to my HTML elements? I only wan't some of the jQuery mobile widgets on my page, and I want to specify them explicitly.
You can ask jquery mobile not to touch your widget by putting the attribute below:
data-role="none"