I'm using the jQuery UI resize function, and when user is finished with the operation I'd like it to run this code:
var pl=$('#player iframe')[0];pl.src=pl.src;
Would a callback work? How would I insert it into the resize function?
Specifically, the code I'm using for resize is this:
$(function() {
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper"
});
});
You are using jQueryUI I think.
This is the official documentation:
http://jqueryui.com/resizable/
The event stop is called when you have finished to resize your element.
Other event are:
- create
- resize
- start
- stop
Try this:
$(function() {
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper",
stop: function(e, ui) {
var pl=$('#player iframe')[0];pl.src=pl.src;
}
});
});
resizable has an event called stop, which is "triggered at the end of the resize operation".
http://api.jqueryui.com/resizable/
$( ".resizableaspect" ).resizable({
aspectRatio: true,
helper: "ui-resizable-helper",
stop: function(){
// YOUR CODE HERE
}
});
Related
I'm having an issues using the Drag and Drop in jQuery. I have multiple 'buttons' that i want to effect other divs visible properties. (so drag something onto an area to un hide things)
I cant seem to get it working, anyone got any pointers?
$(document).ready(function () {
$('#btn_IncCat').draggable({
containment: '#content',
cursor: 'move',
snap: '#content',
revert: true,
revertDuration: 900,
opacity: 0.35,
});
$('#MobSelection').droppable({
accept: '.btn',
drop: function (ev, ui) {
ui.draggable.hide(1000);
ui.draggable.addClass('dropped');
drop: $('#btn_IncCat').on("drop", function (event, ui) {
$('#IncidentCatSearch').removeClass('hidden');
})
}
})
});
Above is the jQuery i'm trying to get working. Here is a Jsfiddle of an example. Any pointers would be appreciated. I know that they cant be 'buttons' to work with drag and drop so i will change the HTML to normal divs but styled to looked differently.
Not entirely sure what you would like to achieve, but based on your description, I would use sortable with connected lists and something like this would work: updated Fiddle. Hope this helps. Good luck!
JS:
$( ".row, #MobSelection" ).sortable({
connectWith: ".well",
stop: function (ev, ui) {
$('#IncidentCatSearch').removeClass('hidden');
}
}).disableSelection();
I will simplify my explanation so you get what I am doing. I have two div's and I set up portlets as shown here, however I am dynamically injecting my portlets, no big problem there.
<div id="mainallapplicant" class="myrow"></div>
<div id="contingent_right" class="myrow"></div>
Here is the JavaScript
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
beforeStop: function( event, ui ) {}
});
I am trying to allow a maximum of only one droppable into mainallapplicant. If there is one already there, I will show a confirmation dialog and depending on the answer, I cancel the drop or move out the existing item and replace it with the new item. I tried the following but I am getting nowhere.
$( ".myrow" ).sortable({
connectWith: ".myrow",
revert: true,
start: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.sender.draggable("cancel");
}
},
stop: function(event, ui) {
if ($(this).prev().find(".portlet").length == 1) {
ui.item.remove();
// Show an error...
}
}
});
You can use start to get the current count of portlet elements, then use stop to do the checking
Also notice I added class names to each div to allow only one div to have a maximum of 1 portlet
$(document).ready(function () {
$.count = 0;
$(".myrow").sortable({
connectWith: ".myrow",
revert: true,
start: function () {
$.count = $(".myrow").has(".portlet").length;
console.log("Start " + $.count);
},
stop: function (event, ui) {
if ($(ui.item).parent(".myrow").hasClass("left")) {
if ($.count == 2) {
$(".myrow").sortable("cancel");
}
}
}
});
});
DEMO: http://jsfiddle.net/Ue4dq/
I'm trying to optimize response time on a page with a "large" table that is a jquery droppable that accepts ~6 draggables. Like others I've seen poor response time when making each of the droppables. I've read both this post and this post, but I can't seem to get my code to work.
My basic problem is I don't know how to get a reference to the element in which the draggable was dropped. It seems the only element I can get access to is the actual draggable.
Here's how I've defined my jquery code:
$( "#grid table" ).droppable({
//disabled: 'true',
//activate: function (event, ui) {
// console.log("Activated table")
//},
//over: function (event, ui) {
// console.log("Dragged over")
//},
//activeClass: "ui-state-default",
//hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
tolerance: 'pointer',
drop: function( event, ui ) {
console.log("draggable DROPPED!!!");
//$( this ).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
var cell = document.elementFromPoint(event.pageX - $(window).scrollLeft(), event.pageY - $(window).scrollTop());
console.log('Dropped cell is'+cell);
console.log(ui.position)
console.log(ui.offset)
console.log(document.elementFromPoint(ui.position.left, ui.position.top))
$(cell).animate({ backgroundColor: ui.draggable.attr("colorValue") }, 250);
console.log('Setting background to:'+ui.draggable.attr("colorValue"));
}
Any help you can provide is much appreciated.
$(this) in drop: function( event, ui ) refers to the element in which the draggable was dropped
How can I change CSS property once sorted. Something likes this:
$( "#sort" ).sortable({
$(#div1).css("background-color","yellow");
});
Thanks alot
When you call initiate the plugin, make sure you pass a handler for the stop event:
$('#sort').sortable({
stop: function(){
$('#div1').css('background-color','yellow');
}
});
http://docs.jquery.com/UI/Sortable#events
$( ".selector" ).sortable({
update: function(event, ui) { ... }
});
Look at the events for sortable on the jQuery UI website: http://jqueryui.com/demos/sortable/#events
Depending on the event you want, you can use:
$( "#sort" ).sortable({
change: function(){
$("#div1").css("background-color","yellow");
}
});
I have the following code
$(document).ready(function() {
$('#content_reservation-fullCalendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: <?php echo($event_list); ?>
});
$("#content_reservation-fullCalendar").resizable({
handles: 'e',
create:
function(event, ui){
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize intialized");
},
resize:
function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
console.log("fullCalendar resize callback triggered");
}
});
/*
$("#content_reservation-fullCalendar").bind("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
*/
});
as a drupal theme template, when I set the event callbacks in the initializer they do not get triggered however when I bind the event resize via bind it works, however not for resizecreate. I'm wondering why the events aren't registering as part of the intializer, is there something I'm missing or could it be some configuration issue. I don't receive any php/javascript errors.
Relevant JQuery UI Documentation Page
I have stumbled upon this type of problem myself. It seems that the bind events and the initializer events are not the same thing, go figure, and you cannot trigger the initializer events. For instance, Binding to 'resizecreate' should work, but will not be the same function as you defined in the 'create' function of the initializer.
Try defining your events like so:
//This should define all your events
$('.selector').resizeable().bind({
resizecreate : function(event,ui) {...},
resizestart : function(event,ui) {...},
resize : function(event,ui) {...},
resizestop : function(event,ui) {...},
});
You should be able to trigger these events like:
//You can trigger the events by doing:
$('.selector').trigger('resizecreate');
$('.selector').trigger('resizestart');
$('.selector').trigger('resize');
$('.selector').trigger('resizestop');
Also note that the callbacks will fire when you operate the widget (i.e. resizing the container) as normal when defining the event callbacks with the bind method.
EDIT: Ok, I think I solved it, or at least this worked for me. Since the resizecreate event only fires when the resizeable widget is created, you must bind to it before you create the widget.
The following example defines a resizeable widget and will fire two alerts: one from the bind definition, one from the initializer.
HTML
<div id="resizable" class="ui-widget-content">
<h3 class="ui-widget-header">Resizable</h3>
</div>
JavaScript
$(function() {
$( "#resizable" ).bind('resizecreate',function() {
alert('BIND');
}).resizable({
'create' : function() {
alert('INITIALIZER');
}
});
});
Also note, calling $('#resizable').trigger('resizecreate'); will fire the callback provided to the bind function as noted before (in this case, an alert box with 'BIND').
$('.sidebox').resizable().bind({
resizecreate: function(event, ui) {
console.log('C')
},
resizestart: function(event, ui) {
console.log('RS')
},
resize: function(event, ui) {
console.log('R')
},
resizestop: function(event, ui) {
console.log('RST')
},
});
Try live() or delegate() for all your asynchronous binds
$("#content_reservation-fullCalendar").live("resize", function(event, ui) {
$('#content_reservation-fullCalendar').fullCalendar("render");
});
Initialize the resizable with the resize callback specified:
$( ".selector" ).resizable({
resize: function( event, ui ) {}
});
Bind an event listener to the resize event:
$( ".selector" ).on( "resize", function( event, ui ) {} );
More info : http://api.jqueryui.com/resizable/
Example for custom event :
var element;
element.resizable({
'resize' : function() {
element.trigger('myevent');
}
});
$('.elementselector').bind('myevent', function() {
alert('Custom Event');
});