I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
Related
I'm trying to use iframe with in fancyapp 3 and I need to set the parameters preload and scrolling to false and auto, but with my current code I'm not able to do so.
Can you please check what it is wrong in it?
Follows the code:
<script>
$("[data-fancybox]").fancybox({
iframe : {
scrolling: 'auto',
css : {
width : '600px'
}
}
});
</script>
<a data-fancybox data "http://www.test.com">show</a>
You can do like this:
$("[data-fancybox]").fancybox({
speed: 230,
infobar: false,
buttons: false,
fullScreen: false,
thumbs: false,
closeBtn: false,
iframe: {
scrolling: 'yes' //'no'//'auto'
}
});
I have a page with multiple links to activate a modal, the issue is the first link works but none of the others allows the content to load in the modal.
link to Modal
$("#dialog-iframe").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
fixed the issue - put it in a class
link to Modal
$(".dialog-iframe").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options
I have the following code, which generates a basic layout for my app:
tabpanel = new Ext.TabPanel({
fullscreen: false,
ui : 'dark',
sortable : false,
tabBarDock: 'bottom',
cardSwitchAnimation: 'flip',
items: [{
title: 'Tab 1',
html : '1',
cls : 'card1',
icon : 'tab1'
}]
});
lists.views.Viewport = Ext.extend(Ext.Panel,{
fullscreen: true,
layout: 'fit',
dockedItems: [{
xtype: 'toolbar',
dock: "top",
title: 'title'
}],
items: [tabpanel],
initComponent: function() {
this.tabpanel.add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
},
});
This doesn't work, probably due to the fact that the TabPanel that is inside the Viewport Panel cannot be pointed to like this. I've searched through the sencha documentation but I can't find how to add the
new lists.views.ItemLists()
to the tabpanel, which in turn is inside the
lists.views.Viewport
Also, there will be other stuff I want to declare before my viewport (or even after it) that I want to add to specific other panels I might add later. What is the best way to achieve this?
Any ideas on how to do this?
Thanks!
If you take the this. off the reference to the tabpanel in the Viewport's initComponent method then it should work because the tabpanel variable is global.
Alternatively, you can access the Viewport's items via the items property, for example,
initComponent: function(){
this.items.get(0).add(new lists.views.ItemLists());
lists.views.Viewport.superclass.initComponent.apply(this, arguments);
}
Hope this helps
Stuart
I'm developing an app with asp.net and jQuery and I have a strange problem, I have the div(used as dialog) and a button to show the dialog, the first time I call the dialog, it shows correctly, I close it but when I try to show for the second time the background grays but the dialog doesn't show (only in IE in firefox it works fine). Is there a way to fix this? Or maybe I'm doing somethign wrong.
<div id="divAuto">
....
</div>
<button id="openAuto">SHOW</button>
And here's the js:
$(document).ready(function() {
var dlg = $('#divAuto').dialog({ autoOpen: false, modal: true, show: "fold", hide: "drop", width: "500", height: "370" });
dlg.parent().appendTo(jQuery("form:first"));
$('#openAuto').click(function() {
$("#divAuto").dialog("open");
return false;
});
});
I'm using "appenTo" because I'm using asp.net buttons in the dialog and it's the "fix" to get the buttons to work.
Thanks in advance for any help.
Ariel
Try initiating the dialog in the click event instead.
$("#divAuto").parent().appendTo($("form:first"));
$("#openAuto").click(function() {
$("#divAuto").dialog({
width: "500",
height: "370",
modal: true,
close: function(event, ui) {
$(this).dialog("destroy");
}
});
});