I have a dynamically created TinyMCE textarea (using an external toolbar), inside a container div. I'm trying to get it to be draggable, and resizeable (the whole text area).
jQueryUI's .draggable() works with tinyMCE, but if I use .resizable(), the tinyMCE external toolbar doesn't appear when I click on the area. If I use tinyMCE's resizing option in its settings, when I click to drag to size it, it breaks the draggable function of jqueryUI (the whole box follows the mouse as well as resizing, and won't let go).
I solved this problem using the handle option of jquery ui draggable and the drag function callback:
div.draggable.handle = "div[role=group], td.mceLast";
div.draggable.drag = function ( event, ui ) {
if ( $( event.srcElement ).is( '.mceResize' ) || $( event.originalEvent.target ).is( '.mceResize' ) ) {
return false;
}
};
This is solution
".mce-resizehandle" is class of tinymce resize button
$( ".selector" ).resizable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
$( ".selector" ).draggable({
cancel: ".mce-resizehandle,input,textarea,button,select,option",
});
Related
I'm using jquery-ui selectmenu and have noticed if you leave the drop menu open and resize your window, the drop menu moves independently of the select.
Here's a fiddle with a totally stock usage:
http://jsfiddle.net/kirkbross/65q0fL5r/
The odd thing is that the example on the jqueryui site doesn't have this issue, even though it's the same code.
Is there an easy fix for this?
$(function() {
$( "#select" ).selectmenu();
});
Here is my quickfix: On window resize, close and re-open the selectmenu if it is currently open:
$(window).resize(function() {
$('.js-selectmenu').each(function() {
var open = $(this).next().attr('aria-expanded') == 'true';
if (open) {
$(this).selectmenu("close");
$(this).selectmenu("open");
}
});
});
I have issue with collapsible jQuery mobile.
I'm using Multipage template, where all the pages are in the same document, separated with the div named page. I have two Collapsible, one on each page. I made an animation to the top of the page, my code is above:
$(document).on("pagecreate",function(event, ui){
// alert("pagecreate event fired - the page has been initialized, the DOM has been loaded and jQuery Mobile has finished enhancing the page.");
$("[data-role='collapsible']").collapsible({
collapse: function( event, ui ) {
$(this).children().next().slideUp(300);
},
expand: function( event, ui ) {
$(this).children().next().hide();
$(this).children().next().slideDown(300);
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
}
});
$('.ui-collapsible-heading-toggle').click(function(){
$("body, html").animate({
scrollTop: $(".ui-collapsible-heading-toggle").offset().top
}, 'slow');
});
In the first collapsible animation works, but in the second, only the animations slideUp and slideDown work, with offset nothing happens.
Why??
Thanks for help!
I'm playing around with jQueryUI Accordion for the first time and I'm trying to make simple expanding div, which switches it's header text and sliding to the bottom of the content, when expanded.
I have the default h3 header saying 'More' and I want it to change to 'Less', when the div is expanded and revert to 'More', when it is closed. Also, the header should slide down and stay below the content, when expanded.
I've been searching for 2 days with no luck.
Change text by #Irvin Dominin aka Edward
$(function() {
$( "#accordion" ).accordion({
header: 'h3',
collapsible: true,
active: false,
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Slide Header by #vitaliy zadorozhnyy
var headers = $('#accordion h3');
headers.click(function () {
var panel = $(this).prev();
var isOpen = panel.is(':visible');
$(this).text(!isOpen ? 'Less' : 'More');
panel[isOpen ? 'slideUp' : 'slideDown']();
return false;
});
Now the problem is these two can't be used together. Any idea how to mix them?
You can use activate event to switch your accordion header text:
Triggered after a panel has been activated (after animation
completes). If the accordion was previously collapsed, ui.oldHeader
and ui.oldPanel will be empty jQuery objects. If the accordion is
collapsing, ui.newHeader and ui.newPanel will be empty jQuery objects.
Code:
$('#accordion').accordion({
activate: function (event, ui) {
ui.newHeader.find(".accordion-header").text("Less")
ui.oldHeader.find(".accordion-header").text("More")
}
});
Demo: http://jsfiddle.net/IrvinDominin/r93wn/
if you use accordion with one item and want to slide it when it is active then use collapsible option
In your case $('#accordion').accordion({collapsible:true});
but if u want to slide header down you can use another approach. I have made some sample on JsFiddle for you.
Hope it helps.
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 have seen only a couple variants on this question asked a couple other places, notably here and here.
Basically, I have a checkers gameboard where each square on the board is a droppable and each gamepiece is a draggable. Each square can only have one piece on it at a time, and I am trying to toggle the enable/disable method depending on whether there's a piece on the square or not.
Here's a link to what I've got so far: http://jsbin.com/ayalaz, and below is the most pertinent code.
function handleDrop(e, ui) {
var tileNumber = $(this).data('tile');
// Make the gamepiece snap into the tile
ui.draggable
.data({ // WHAT IF PIECE IS SET BACK DOWN IN SAME TILE... CHECK FOR IT!
'preRow': ui.draggable.data('curRow'),
'preCol': ui.draggable.data('curCol'),
'curRow': $(this).data('row'),
'curCol': $(this).data('col')
});
$(this).append($(ui.draggable));
ui.draggable
.position({
of: $(this),
my: 'left top',
at: 'left top'
});
$(this).droppable('disable');
//console.log("Gamepiece set down at: (" + $(this).data('row') + "," + $(this).data('col')+ ")");
}
function handleOut(e, ui) {
// HOW TO TOGGLE DROPPABLE??
$(this).droppable('enable');
}
Any advice?
Thanks in advance!
Jeremy
It looks like you are successfully disabling droppable on a tile after the first drop event. Your problem is that you are not initially setting droppable to disabled on the initial set of occupied tiles.
After you've created your game board and pieces, this should accomplish that, assuming my CSS selector accurately reflects your structure:
$('div.gamePiece').parent().droppable("option", "disabled", true);
Note that this is different from the syntax to change droppability in the initial options. From the jQuery UI droppable documentation:
//initialize
$( ".selector" ).droppable({ disabled: true });
//setter
$( ".selector" ).droppable( "option", "disabled", true );
Edit
It appears I was wrong about $(this).droppable('disable'); and $(this).droppable('enable'); jquery-ui does have alias functions for enable and disable.
enable: function() {
return this._setOption( "disabled", false );
},
disable: function() {
return this._setOption( "disabled", true );
},