I'm having trouble changing the position of a jQuery-ui dialog box.
What I'm doing is loading an image into the dialog box within the open event. Because of the unknown height of the image, the dialog box is no longer centred in the window. So I also reposition it after loading the image, but the repositioning seems to be ignored.
But, if I add an alert before the repositioning, it works fine, so clearly some sort of timimg issue is in play here.
Is there any work around for this?
The relevant bit of my code is:
$( "#dialog-message" ).dialog({
open: function(e, ui){
$("#theImage").attr("src","aRandomImage.jpg");
alert(1); // causes the next line to work properly
$(this).dialog("option", "position", {my: "center", at: "center", of: window});
},
...
You have to wait for the image to load before repositionning:
$( "#dialog-message" ).dialog({
open: function(e, ui){
var $img = $("#theImage"), mydialog = $(this);
$img.bind('load',function(){ // bind load event
mydialog.dialog("option", "position", {my: "center", at: "center", of: window});
});
$img.attr("src","aRandomImage.jpg"); // start loading
}
see :
http://css-tricks.com/snippets/jquery/fixing-load-in-ie-for-cached-images/
for IE8 chached images load event fixing.
Related
I'm having a strange problem with the jquery dialog popup that I'm hoping someone here can help. The pop up codes looks like below. It works fine except for one thing. When the pop-up is displayed, it will sometimes push the background content down by about the height of the the dialog window. Is there a way to prevent this from happenning?
$("#searchPopUp").dialog({
modal: true,
bgiframe: false,
autoOpen: false,
resizable: true,
position:{ my: "center", at: "center", of: window },
title: 'Choose one search criteria and<br/>populate the corresponding field below:',
width: 400,
close: function( event, ui ) {},
buttons: {
"Search": function() {
$("#viewDevicesSearchForm\\:searchCommandLink").click();
},
"Close": function() {
$( this ).dialog( "close" );
}
}
});
This is because jquery sets position to relative, and then moves the popup to the right place using top and left. I found two ways to fix the problem:
1) The easier of the two: set margin-bottom of the dialog container to negative its height.
popup.dialog({
...other options...,
open : function() {
popup.css('margin-bottom', 0 - popup.height());
},
});
2) For the dialog container, set the position to absolute and adjust the top and left. To put it in the right place, add the offset position of where it is getting placed to the top value that jquery set. The calculation is similar for left.This should do it, but different parameters to the dialog may require different calculations.
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",
});
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 );
},
The following error just occurs in IE8.
Demo: http://tinyw.in/BLrg
Click on show at Newsletter 313. If you now hover over the blue bar at the left, a layer slides out containing some elements. You can drag each one of this elements. If you start dragging the layer slides back. As you see, in IE8, the dragged element also gets hidden or if you directly drag it over it might get added instantly. And that's the problem, you can open it in IE9, Firefox, Chrome and it works. To see, how it should actually work.
Here's the code which can be found in logic.frontend.js:
(Just a part which is actually used)
$( ".draggable li table" ).draggable({
connectToSortable: ".sortable",
helper: 'clone',
revert: 'invalid',
appendTo: 'body',
start: function(ui) {
$('#elementsContainer').hide('slide', {
direction: "left"
}, 500);
}
});
var height = $('#elementsContainer').outerHeight();
$('#elementsContainerHandle').css('height', height);
$('#elementsContainerHandle').mouseenter(function() {
$('#elementsContainer').css('visibility', 'visible');
$('#elementsContainer').show('slide', { direction: "left" }, 500);
});
$('#elementsContainer').mouseenter(function() {
$(this).css('visibility', 'visible');
});
$('#elementsContainer').mouseleave(function() {
$(this).css('visibility', 'hidden');
});
The problem is, that #elementsContainer gets hidden and due to that all it's children including the dragged element are getting hidden as well. In other browser, .hide() doesn't affect the dragged element because of the option appendTo : 'body'. But in IE8, this seems to break somehow although I'm quite sure the element gets added to the body. I've tried making the draggable visible again with css, .show() etc. but i didn't get it.
Thanks
I am trying to create a number of jQuery dialogs but I would like to constrain their positions to inside a parent div. I am using the following code to create them (on a side note the oppacity option is not working either...):
var d= $('<div title="Title goes here"></div>').dialog({
autoOpen: true,
closeOnEscape: false,
draggable: true,
resizable: false,
width: dx,
height: dy
});
d.draggable('option', 'containment', 'parent');
d.draggable('option', 'opacity', 0.45);
$('#controlContent').append(d.parent());
A bit more helpful and complete version of above solution.
It even limits the resizing outside of the div too!
And the JavaScript is fully commented.
// Public Domain
// Feel free to use any of the JavaScript, HTML, and CSS for any commercial or private projects. No attribution required.
// I'm not responsible if you blow anything up with this code (or anything else you could possibly do with this code).
jQuery(function($)
{
// When the document is ready run the code inside the brackets.
$("button").button(); // Makes the button fancy (ie. jquery-ui styled)
$("#dialog").dialog(
{
// Set the settings for the jquery-ui dialog here.
autoOpen: false, // Don't open the dialog instantly. Let an event such as a button press open it. Optional.
position: { my: "center", at: "center", of: "#constrained_div" } // Set the position to center of the div.
}).parent().resizable(
{
// Settings that will execute when resized.
containment: "#constrained_div" // Constrains the resizing to the div.
}).draggable(
{
// Settings that execute when the dialog is dragged. If parent isn't used the text content will have dragging enabled.
containment: "#constrained_div", // The element the dialog is constrained to.
opacity: 0.70 // Fancy opacity. Optional.
});
$("#button").click(function()
{
// When our fancy button is pressed the stuff inside the brackets will be executed.
$("#dialog").dialog("open"); // Opens the dialog.
});
});
http://jsfiddle.net/emilhem/rymEh/33/
I have found a way to do it. This is now my method for creating a dialog:
var d = $('<div title="Title"></div>').dialog({
autoOpen: true,
closeOnEscape: false,
resizable: false,
width: 100,
height: 100
});
d.parent().find('a').find('span').attr('class', 'ui-icon ui-icon-minus');
d.parent().draggable({
containment: '#controlContent',
opacity: 0.70
});
$('#controlContent').append(d.parent());