I am looking into the jQuery UI Resizable method and I have to DIVs (one next to the other). I want to be able to resize one and change the other accordingly. One DIV gets bigger and the other DIV gets smaller...
$(document).ready(function () {
$("#right").resizable({
alsoResize: '#left',
});
$("#left").resizable({
alsoResize: '#right',
});
});
Thanks,
Max
You want to tie into the "resize" event (http://docs.jquery.com/UI/Resizable#event-resize)
$("#right").resizable({
resize: function(event, ui) {
// look at the size of the ui element being resized
// and resize the left accordinly
}
});
It looks okay, but try removing the comma at the end of your array, since you don't have any more array elements.
$(document).ready(function () {
$("#right").resizable({
alsoResize: '#left'
});
$("#left").resizable({
alsoResize: '#right'
});
});
Related
I'm dragging sortables from a grey ul list (parent group) to two yellow lists underneath. I am trying to have a hidden button in the grey sortable list appear when dragged into the yellow sortable lists.
I'm using a stupid method of display none and using a mouseUp event handler to make the hidden button appear. It's not achieving the desired effect.
it is also important that the hidden button only appear in the bottom yellow boxes and not appear in the grey sortable lists.
Any help would be much appreciated. Thanks.
http://jsfiddle.net/equiroga/4At6J/4/
//Show js
$(function(){
$(document).mouseup(function(){
$('.button, .button2, .button3, .button4, .button5').show();
});
});
//Sortable js
$(function () {
$("#sortable1").sortable({
helper: "clone",
connectWith: ".sortable",
start: function (event, ui) {
$(ui.item).show();
clone = $(ui.item).clone();
before = $(ui.item).prev();
position = $(ui.item).index();
},
beforeStop: function (event, ui) {
if ($(ui.item).closest('ul#sortable1').length > 0) $(this).sortable('cancel');
},
stop: function (event, ui) {
if (position == 0) $("#sortable1").prepend(clone);
else before.after(clone);
}
});
$(".sortable").sortable({connectWith: ".sortable:not('#sortable1')"});
});
Remove the top code and add this in the stop function:
ui.item.children('.button').show();
EDIT
I added a bt common class to all the buttons and then:
ui.item.children('.bt').show();
http://jsfiddle.net/stevemarvell/4At6J/6/
I am trying to change the opacity of the image after I click the red button
instead of adding the different image, and I should not see the red button on the new image
My JS code is below.
http://jsfiddle.net/mwPeb/7/
<script>
$(document).ready(function () {
$(".specialHoverOne").hover(function () {
// alert("i am here");
$(".ctaSpecialOne").css("visibility", "visible");
},
function () {
$(".ctaSpecialOne").css("visibility", "hidden");
});
$(".ctaSpecialOne").click(function (e) {
alert("clicked");
e.preventDefault();
//$(this).closest('.specialHoverOne').unbind("mouseenter").end().parent().siblings('a').children("img").attr("src", //"http://imgs.zinio.com/magimages/62898189/2012/416242497_200.jpg");
$(this).css({
'opacity': 50
});
});
});
</script>
I'd spend some quality time cleaning up the coding here, it's a bit difficult to find anything and the structure is a bit hard to follow.
If I'm understanding correctly, I believe this is the line you need to make the image above the red button change opacity when said red button is clicked.
$(this).parent().prev().prev().css({'opacity':.5});
More specifically;
$(".ctaSpecialOne").click(function (e) {
e.preventDefault();
$(this).parent().prev().prev().css({'opacity':.5});
});
http://jsfiddle.net/mwPeb/11/
You want the opacity of the red button to change on click? Or the image above it? For starters, to set the opacity, you would change your line:
$(this).css({'opacity':50});
to:
$(this).css({ opacity: 0.5 });
In your current fiddle, you'll see that sets the opacity of the red button. If you want it to set something else, you now have the syntax.
Update:
Instead of wiring up a bunch of .click() events that repeat the same code, might be best to create a function
function setThisOpacity(id) {
$("#" + id).css({ opacity: 0.5 });
//do other stuff if you need to
}
And then in your html markup, just add an onclick="setThisOpacity(someID);" where someID is an actual ID to the item you want to set the opacity.
I have implemented a drag & drop feature using JQuery UI - my current code is provided below:
My JavaScript function receives JSON array from PHP and then uses a loop to create the draggable elements:
<script type="text/javascript">
function init() {
var items = <?php echo $result_j;?>; //items is an one dimensional array
for ( var i=0; i<<?php echo $total_rows_j;?>; i++ ) {
$('<div>' + items[i] + '</div>').data( 'item_name', items[i] ).attr( 'class', 'snk_button' ).appendTo( '#drag' );
}
With the 'items' array I have created several div elements (above code) which I then turn into draggable elements (code below).
$(".snk_button").draggable( {
containment: '#drag_section',//Div #drag_section contains the Div #drag
stack: '#drag div',
cursor: 'move',
revert: true
} )
Below is my droppable code:
$( "#dropp" ).droppable(
drop: handleDrop
});
function handleDrop( event, ui ) {
ui.draggable.draggable( 'option', 'revert', false );
} // End function handleDrop
So far, everything is fine with the draggable items attaching themselves to the droppable div.
Now, I want to tweak this behavior a little:
I want the draggable items to arrange themselves 'automatically' in the droppable div (called '#dropp' in this example), starting from the top left (they will be floating left). Currently this is not happening even though the '#dropp' div has the 'float:left' property set. So, what should I do to have the draggable items arrange themselves when dropped on '#dropp'?
When I take out a draggable item out of the droppable div ('#dropp') I want it return to the div that originally contained the draggable items ('#drag' in this example).
Can you please help implement these 2 behaviors?
After trying this on my own and some R&D for nearly 5-6hrs, I have been able to solve both my problems.
For benefit of others who might be facing the same issues, below is the additional code that is required to implement the behaviors described above:
$( "#dropp" ).droppable({
accept: '#drag div',
drop: function(event, ui)
{
$("div#dropp").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" })
.addClass("moved");
} // End function for handling drop on '#dropp'
}); //End $( "#dropp" ).droppable
This has been added new:
$( "#drag" ).droppable({
accept : ".moved",
drop : function (event, ui)
{
$("div#drag").append (ui.draggable);
$(ui.draggable).css ({ position:"relative", top:"0px", left:"0px" });
} // End function for handling drop on '#drag'
}); // End $( "#drag" ).droppable
That's all is required to implement the behaviors described above. Hope somebody finds the information useful :-)
I am trying to add a 'blur' event to a jQuery combobox using the code below, but its always not firing. What would be the right way of attaching a 'blur' event to a jQuery combobox?
$(document).ready(function() {
$("#dropdown_sel").combobox();
$($('.ui-combobox-input')[0]).css('width', '500px');
$("#toggle").click(function() {
$("#dropdown_sel").toggle();
});
$("#dropdown_sel").blur(function() {
alert('on blur of combo');
});
});
I even tried the code below but it fails to fire, where I use focusout event rather than blur event. I am using IE 8.x.
$("#dropdown_sel").focusout(function () { alert('on blur of combo'); });
You can test the code at this link, where I already have combobox code set up for focusout event: http://jsfiddle.net/vZwRk/79/
Try using event-change:
$( "#dropdown_sel" ).bind( "autocompletechange", function(event, ui) {
alert('on blur of combo');
});
I have a jQuery UI droppable element which I would like to get bigger when a draggable is hovered over it. I have tried both using the hoverClass option and also binding to the drophover event.
Visually, both these methods work fine. However, once the draggable exits the original (smaller) boundary of the droppable, jQuery UI interprets this as a 'dropout', despite still being within the current (larger) boundary.
For example, js:
$("#dropable").droppable({
hoverClass: 'hovering'
}.bind('dropout', function () {console.log('dropout')});
css:
#droppable { background: teal; height: 10px; }
#droppable.hovering { height: 200px; }
In this case, when a draggable hovers over the droppable, the droppable visually increases in size to 200px. If at this point, the draggable is moved down by 20px, I would expect it to still be hovering over the droppable. Instead, jQuery UI fires the dropout event and the droppable reverts to being 10px high.
Anyone know how to get it to behave in the way I'd expect it to?
jsFiddle example: http://jsfiddle.net/kWFb9/
Had the same problem, I was able to solve it by using the following options:
$("#droppable").droppable({
hoverClass: 'hovering',
tolerance: 'pointer'
});
$('#draggable').draggable({
refreshPositions: true
});
Here's the working fiddle: http://jsfiddle.net/kWFb9/51/
See http://bugs.jqueryui.com/ticket/2970
So I made a couple tweaks to your fiddle
First I set the droppable tolerance to "touch" which will activate whenever any part of the draggable is touching it. This causes the hovering class to be applied.
Next I added an animation to resize your draggable element slightly. I wasn't sure if this was functionality you wanted or not so I put it in there anyways.
Lastly, I permanently apply the hovering class to the droppable element when the draggable element is dropped into the droppable zone. This way the droppable doesn't revert to that narrow height when there is an element in it
http://jsfiddle.net/kWFb9/2/
EDIT:
Better fiddle: http://jsfiddle.net/kWFb9/6/
I hope this helps :)
you could create a bigger (i.e. the size of #droppable.hovering) div without background and apply your droppable to it. Note that you didn't provide HTML but the new #drop_container should contain both divs.
JS
var dropped;
$("#droppable").droppable({
drop: function(event, ui) {
dropped = true;
}
});
$('#draggable').draggable({
start: function(event, ui) {
$("#droppable").addClass("hovering");
dropped = false;
},
stop: function(event, ui) {
if (!dropped) {
$("#droppable").removeClass("hovering");
}
}
});
CSS
#droppable { background: teal; height: 10px; }
#droppable.hovering, #drop_container { height: 200px; }
Or you could try another solution with .live() or .livequery() from this article
[EDIT] I've edited my code and here is a jsfiddle: http://jsfiddle.net/94Qyc/1/
I had to use a global var, I didn't find a better way to check wether the box was dropped. If anybody has an idea, that would be great.
There is an other (hum hum) not bad solution :
TL;DR: Fiddle
The problem is that the plugin stores dom element's size values when the widget is created (something like) :
//jquery.ui.dropable.js
$.widget("ui.droppable", {
...
_create: function() {
var proportions,
this.proportions = function() { return proportions; }
And the offset for widgets are initialized in $.ui.ddmanager.prepareOffsets();
So we only need to overwrite the proportions object.
This way allow to access to real plugin properties so we can write something like :
$("#droppable").droppable({
hoverClass: 'hovering',
over: function(ev, ui) {
var $widget = $(this).data('droppable');
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
},
out: function(ev, ui) {
var $widget = $(this).data('droppable'); //ui-droppable for latests versions
$widget.proportions = {
width: $(this).width(),
height: $(this).height()
};
}
})