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.
Related
Am a beginner in jqGrid ,where am using navGrid, for Add(Which is used for File Upload), when i click on add button, it pops up a Modal dialog in top, leftside of the page.its very uneasy to go the top and come again is there any way to position the Add dialog and it should show up next to the + button ?
jQuery(table).jqGrid('navGrid',pager,{edit:false,add:true,del:false,search:false,refresh:true,cloneToTop:true},{},{addCaption:'Add',width:500,recreateForm: true,reloadAfterSubmit:false,closeAfterAdd:true,closeAfterEdit: true, closeOnEscape:true, afterSubmit : UploadAttachedFile });
You can change position of Add dialog inside of afterShowForm callback. For example you can use jQuery UI Position to do this.
The demo use the following code
var $grid = $("#list");
...
$grid.jqGrid('navGrid', '#pager', {del:false}, {}, {
afterShowForm: function ($form) {
$form.closest(".ui-jqdialog").position({
of: "#add_" + $.jgrid.jqID($grid[0].id),
at: "left bottom",
my: "right top"
});
}
});
and the results looks like on the picture below
You can change the values of at and my properties of position to have exact results which you need.
Try this:
Add this to your code of Add button
top:400,left:20
your code should look like:
jQuery(table).jqGrid('navGrid',pager,{edit:false,add:true,del:false,search:false,refresh:true,cloneToTop:true},
{},
{
addCaption:'Add',
width:500,
recreateForm: true,
reloadAfterSubmit:false,
closeAfterAdd:true,
closeAfterEdit: true,
closeOnEscape:true,
afterSubmit : UploadAttachedFile,
top:400, //position from top
left:20 //position from left
});
Everytime I click on the jQuery UI dialog title bar, or the close button, the whole dialog first scrolls up to the top of the screen without triggering any ui events. Then I have to click a second time in order for the close event to be triggered.
Here is my code:
var dialog = $(selector).dialog(
{
autoOpen : true,
modal : true,
title : title,
overlay : {
opacity : "0.1",
background : "black"
},
width : dWidth,
height : dHeight,
autoResize: false,
resizable : true,
effect: 'fade',
zIndex: 100,
close: function(ev, ui) {
if(callback){
callback();
}
}
I have tried to remove all the properties but I still get the bug. I am on jQuery UI 1.8.23, but the same bug appears on 1.9.1.
Any help would be appreciated.
I thing that you have some problems in close: option. Try to remove it or edit it and see what's going on.
Try to put width : dWidth + 'px',
Also try to remove semi colon on callback.
close: function(ev, ui) {
if(callback){
callback()
}
}
It's a bug: http://bugs.jqueryui.com/ticket/3623
Upgrade your jqueryui
This was happening to me in IE, it was not just when clicking buttons but any click after scroll down. Solution was updating jQuery UI http://code.jquery.com/ui/1.11.4/jquery-ui.js
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.
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());