I have a dialog that pops on $(document).ready(function() {, it blocks the whole page with modal : true.
$(function () {
$("#dialog").dialog({
show: { effect: 'drop', direction: "up" },
hide: "explode",
modal: true,
draggable: false,
resizable: false
});
});
The problem is that when $(document).ready(function() { fires, all the images in the page may not be loaded.
It results in having the overlay's height smaller than the page actually is.
(ex :) You have a page with 2 images (height of 100px). When the $(document).ready(function() { fires, you have a height of 800px, then the overlay appears, with a height of 800px. after that, when the images had the time to load, you have a 1000px page... So if I scroll down, there is 200px at the bottom that is not blocked by the overlay.
What i'm trying to do is, when $(window).load(function() { will fire (so everything will be loaded), refresh the height of the overlay, if the dialog had not been closed of course.
I noticed that, once all of the images are loaded, if I zoom +/- or If I open Chrome's developer tool, it refreshes the overlay height.
Thank you!
I fixed it, I wonder if there is a more efficient way to do this..
$(function () {
$("#dialog").dialog({
show: { effect: 'drop', direction: "up" },
hide: "explode",
modal: true,
draggable: false,
resizable: false
});
});
$(window).load(function() {
$(window).resize();
});
So I pop the dialog, then when the images are loaded, I just refresh the size..
Related
I have my fancybox close button diplay:none; when an iframe opens, I want the close button appears in a delay of x time. exactly like this DEMO.
Though it is solved in earlier version of fancy box in here, but in fancybox-3 It works for the first time and thereafter the close button doesn't appear until I refresh the page.
I use the following JS Code for delay:
$(document).ready(function() {
setTimeout(function() {
$(".fancybox-button--close").show();
}, 5000);
});
Any ideas? Thanks.
This is how you can access the toolbar and make it visible, if needed:
$('[data-fancybox="images"]').fancybox({
afterShow : function(instance, slide) {
setTimeout(function() {
instance.$refs.toolbar.show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqrJ
But, if you want to toggle that small close button, here is an example:
$('[data-fancybox]').fancybox({
toolbar : false,
smallBtn : true,
afterShow : function(instance, slide) {
setTimeout(function() {
slide.$slide.find('.fancybox-close-small').show();
}, 3000);
}
});
Demo - https://codepen.io/anon/pen/oeWqRJ
Basically, you can access any element either from instance.$refs (collection of references to interface elements) or from slide.$slide (parent element of the content).
I have a panel which have 2 items, a start button and a save button.
the start button is at the bottom left corner
the save button is at the bottom right corner
the save button is hidden, when shown using show() the save button appears on top of the start button. If all these hide and show calls are removed the buttons rendered in the correct location, both of them.
Anyone know why this maybe ?
It is a straight up panel with items: [startbutton, spacer, savebutton]
Oh god I really hate this one framework..
You're probably confused about the layout management in ExtJS (which is actually quite nice once you understand how it works). Also you want to make sure that you perform a doLayout after you've toggled an element's visibility to make sure that everything gets placed properly.
Look at this jsfiddle: http://jsfiddle.net/LVKyM/
Ext.onReady(function(){
var pnl = new Ext.Panel({
renderTo: 'ctn-panel',
width: 300,
cls: 'my-pnl',
bodyBorder: false,
border: false,
layout: 'hbox',
layoutConfig: {
padding: 5
},
items: [
startBtn = new Ext.Button({
text: 'start',
width: 100,
hidden: true
}), {
xtype: 'spacer',
flex: 1,
}, {
xtype: 'button',
text: 'save',
width: 100
}
]
});
new Ext.Button({
renderTo: 'button-container',
text: 'Show/hide',
handler: function(){
startBtn.show();
pnl.doLayout();
}
});
});
I have a DataTable with 3 controls; General Search, Pagination, and Info (i.e. 'Showing 1 to 10 of 88 Entries' ). I want to place these controls in the header/footer of a jQuery Dialog window.
DataTables provides an options called sDOM, which lets one specify where to put DataTable's controls. But, I want to put the controls in the header and footer of a modal, which can not be done with sDOM.
The General Search control can be created with fnFilter, which is easy enough.
I think Pagination, and Info will require writing a custom pagination plugin, which I would like to avoid.
This is my current progress on jsFiddle.
$('#modal').dialog({
modal: true,
"height": 570,
"width": 1170,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$(".myDialog").append('<div id="dialogFooter" class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><div class="dataTables_info" id="DataTables_Table_X_info"></div></div>');
}
});
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers",
"sDom": 'it<\"F\"p>"',
});
$("#modal").dialog("open");
You are doing it backwards :)
Create the dataTable
Create the modal
Move the autogenerated controls from the dataTable to the footer (or whatever)
forked fiddle -> http://jsfiddle.net/xK3TK/
I Have in the example placed the footer on top and included jQuery UI css (and you have BTW forgotten to close the modal markup </div>)
var dataTableJS = $('#dataTable').dataTable({
"sPaginationType": "full_numbers"
//"sDom": 'it<\"F\"p>"',
});
$('#modal').dialog({
modal: true,
"height": 570,
"width": 770,
autoOpen: false,
auto: true,
dialogClass: "myDialog",
create: function () {
$("#dataTable_info").detach().appendTo('#dialogFooter');
$("#dataTable_paginate").detach().appendTo('#dialogFooter');
$("#dataTable_length").detach().appendTo('#dialogFooter');
$("#dataTable_filter").detach().appendTo('#dialogFooter');
}
});
$("#modal").dialog("open");
H,I am using the KendoUI window and I am getting an issue as i have to open 3 Pop up window that contains divs as a Content in it but of different heights.if I select first one say of height 100px and close it and open the second window of height say 200px,it remains at 100px and hence hiding the content of the second popup window and when i resize the window and close it and when again open it,it remains at the previous dimension that i had resized it.
Why this is happening,not getting any clue on this.Please help me.
if (AccountType == "Bank") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: {AccountID:AccountID},
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '200px',
scrollable: false,
//deactivate: function () { wnd.destroy(); }
}).data('kendoWindow').center();
wnd.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Bank Account Edit");
}
});
}
if (AccountType == "Cash") {
//alert("Return View For Bank")
$.ajax({
type: 'POST',
url: "Popup_Account_Update",
data: { AccountID: AccountID },
success: function (response) {
$('#Update_Window').empty();
$('#Update_Window').html(response);
$popup = $("#Update_Window");
var wnd1 = $popup.kendoWindow({
//content: Main.rootUrl("Home/Customer/" + customer.attributes[1].value),
actions: ["Close"],
modal: true,
//title: customer.attributes[2].value,
visible: false,
width: '500px',
height: '360px',
scrollable: false,
//deactivate: function () { wnd1.destroy(); }
}).data('kendoWindow').center().open();
//wnd1.open();
var tmp = $("#Update_Window").data("kendoWindow");
tmp.title("Cash Account Edit");
}
});
}
<div id="Update_Window" style="display:none;"></div>
As you said: you close it, you did not destroy. Closing a window means hiding it but it is still there with the same content and attributes.
You should not use $('#Update_Window').empty(); since this releases the DOM but not the Kendo Window so it will cause a memory leak. Instead of that, use: destroy.
$('#Update_Window').data("kendoWindow").destroy();
Anyway, my recommendation is not creating and destroying windows since this has some impact in performance, you should try to reuse it.
I've been experimenting with using a UI Dialog window to display an existing form (page with the form and no layout). I'm not sure if I'm doing this the right way but it seems to work fine minus a couple of pieces of bad behavior. This is the behavior right now:
The dialog window with no conent opens (very small/empty)
About a half second later the content loads and the window expands insantly (looks bad visually)
Even though the window width expands when the content is loaded, the title bar does not adjust to the new width and remains very small width wise. Although if resizeable is set to 'true' the title will expand. It's just not responding with a width adjustment when the content from the hidden div is loaded.
How could I go about not displaying the dialog until the content is finished loading into the dialog, and how could I force the dialog title to width adjust right after the content is finished loading?
<A HREF="javascript:newItem('foo')">CREATE NEW FOO ITEM<A>
<script type="text/javascript">
newItem= function(type) {
$("#form_load").load(
'/items/new', {item_type: type}).dialog({
modal:true,
draggable: true,
resizable: false,
width:'auto',
height:'auto',
title: 'Some title',
position: [150, 150]
});
};
</script>
Thanks!
You're going to want to call the dialog after the content is loading.
You can do this by using $.load's callback method.
<script type="text/javascript">
newItem = function(type) {
$("#form_load").hide().load(
'/items/new',
{item_type: type},
function (data) {
$(this).dialog({
modal : true,
draggable : true,
resizable : false,
width : 'auto',
height : 'auto',
title : 'Some title',
position : [100, 100]
});
}
});
}
</script>
You may also want to include a hide/show toggle so the #form_load container isn't displayed until the content is loaded.
See jQuery's $.load docs here: http://api.jquery.com/load/
UPDATE: Added .hide() so content isn't shown until dialog is created.