I have multiple boxes in a row and I have added option to resize these boxes using jQuery UI.
You can find the code on JsFiddle: http://jsfiddle.net/alokjain_lucky/ZbTem/
When I resize one box it is pushing the next one to create space. How can I restrict the boxes to push the next box out from the parent?
My jQuery Code:
$(function() {
$( ".resizeable" ).resizable({
containment: "parent",
handles: "e, w",
});
$( ".resizeable" ).resizable( "option", "alsoResize", $(this).siblings().not(this) );
});
Related
I'm creating a side menu in the phonegap, I need to drag to the left with a -400px wide limit, and to the right with a 400px wide limit, the problem is that I only know to do drag between parent and without limits:
$( "#draggable" ).draggable({ containment: "parent" });
or
$( "#draggable" ).draggable({ axis: "x" });
You can use Array for defining a bounding box in containment like below:
$("#draggable").draggable({
cursor: 'move',
//containment: "parent"
containment: [-400,0,400,$(document).scrollTop()+$(window).height()]
});
Online Demo (fiddle)
I want to use jQuery UI Draggable Module and Position Widget simultaneously to create Responsive content.
However, I could not find any usage examples. I've created a simple demo => jsfiddle.net/1ecg2jnc
The problem is; How do I update the offset of the elements when I drag.
<div class="element"
data-x="right"
data-y="top"
data-offset-x="-25"
data-offset-y="+45" >Draggable Element</div>
You can attach a listener to the drag event which updates your offsets. Something like this:
$(this).draggable({
containment: "#zone",
cursor: 'move',
drag: function(event, ui) {
$(event.target).data('offset-x', "+" + ui.offset.left);
$(event.target).data('offset-y', "+" + ui.offset.top);
}
});
After user hits last tab of a form in jQuery UI's accordion how do you get the next div to open and current one to close with the focus on the next input in-line?
Also I am looking for the reverse. If use types shift tab to go in the opposite direction then I am searching for a way to implement the reverse behavior as well. I.e. close the existing accordion div and open up the next accordion div in line and go to the last input in the div and set focus to it.
You need to bind the Tab key press, on the last input field of a form, to the accordion function to activate the next section:
$('#firstform input:text').last().on('keydown', function(e) {
if (e.which == 9) {
if (!e.shiftKey) {
var active = $( "#accordion" ).accordion( "option", "active" );
$("#accordion").accordion( "option", "active", active + 1 );
}
}
});
You also need to activate the first input box of the next form, using the activate event of the accordion:
$( "#accordion" ).accordion({
activate: function( event, ui ) {
$("#secondform input:text").first().focus();
}
});
The procedure is similar for the reverse case, as you can see in the fiddle.
On a web page, I want to display a small div with text in it that is cut off and displayed with ellipses and when there is a mouse-over it should expand to a larger size such that all the text is visible. I then want to be able to use jqueryui drag and drop to move the text box onto a grid. When it is being dragged and placed, I want it to be the small size again.
I have attempted to do this like so:
Mouseover function:
$(function() {
$( ".ui-widget-content" ).mouseover(function(){
$(this).css("width", "200px");
$(this).css("height", "200px");
}).mouseout(function(){
$(this).css("width", "100px");
$(this).css("height", "40px");
})
})
Draggable function:
$(function() {
$( ".ui-widget-content" ).draggable({ snap: "td.chart:not(:first-child)", snapMode: "inner", revert: "invalid", snapTolerance: 40, stack: ".ui-widget-content",
drag: function( event, ui ) {
$(this).css("width", "100px");
$(this).css("height", "40px");
}
});
});
Droppable function:
$(function() {
$( "td.chart:not(:first-child)" ).droppable({
accept: ".ui-widget-content",
drop: function( event, ui ) {
$("#" + ui.draggable.attr("id") ).css("background-color","#D7F970");
}
});
});
Div that is getting dragged and dropped:
Lorem Ipsum
I thought that by using the above, when someone went to drag the div, first the mouse over would be triggered, enlargening the div, then the dragstart would shrink it and it would be fine. However, I am placing it on a table (see selector "td.chart:not(:first-child)" in droppable function), and while it works for the first three rows of the table, the div no longer snaps and gets dropped on the fourth and fifth rows. This problem does not occur if I remove the mouse-over function. Anyone understand what is going on here?
It would maybe help to take a look at your html.
It's just a hunch but maybe it's only a matter of the size of your draggable being too big and being over more than one droppable item.
I would advise trying to change the tolerance of your droppable element to see if it helps :
$( ".selector" ).droppable({ tolerance: "pointer" });
jQuery Documentation states :
Tolerance specifies which mode to use for testing whether a draggable is 'over' a droppable. Possible values:
fit: draggable overlaps the droppable entirely
intersect: draggable overlaps the droppable at least 50%
pointer: mouse pointer overlaps the droppable
touch: draggable overlaps the droppable any amount
It seems that the usual method of making jQuery widgets is to call a function on an element, passing the options as a parameter, and then not touching the widget directly again. Is there a way to change a widget's options after it has been created?
I want to create a draggable box that is aligned to a grid, but if the user resizes the page, I want to scale the grid. In the window resize event, how can I access the grid property of the draggable element?
$('.box').draggable({grid: [40,40]});
...
$(window).resize(function(){ ??? });
From the Jquery ui documentation:
$( ".selector" ).draggable( "option", "grid", [50, 20] );
So you can do
$( ".box" ).draggable( "option", "grid", [width, height] );