I have a jQueryUI dialog box that loads its content the moment someone opens it using the "open" event to initiate the $('#dialogDiv').load() call.
Works great except the dialog box grows extremely tall if there's a lot of content being loaded. What I want is to limit the height. The maxHeight jQueryUI dialog option would seem to work perfect, except it only takes effect the moment you resize. The initial load will grow the dialog really tall and then when you try and resize, it immediately shrinks to the maxHeight.
How can I make a dynamically loading dialog box that won't grow beyond a certain height?
Adding the CSS position:absolute;overflow:hidden for class .ui-dialog will fix the problem.
Use height option while initalization...
for eg-
<script>
$(function() {
// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
$( "#dialog" ).dialog( "destroy" );
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
here you can see "height:140"
this defines that the dilog will be of only that size, no matter how much data is inside..
for more detais about the events,options,methods download(from here), extract and check out the
jquery-ui-1.8.5.custom > development-bundle > docs > dialog.html
Related
I have an off canvas navigation on a website that I am working on. The default state for the off canvas navigation is closed which works well on the mobile site as you can toggle it open and select your links but on the desktop having it closed and toggling it on hides information from the user and I would like it to be open by default when the user arrives at the page.
Currently the navigation uses jQuery to make the toggle:
$( "#main-menu-toggle, #main-menu-caption, .menu-mask" ).on( "click", function() {
// toggle the classes in the body the css does the rest
$( "body" ).toggleClass( 'main-menu-open' );
// for screen readers lets set the ARIA atributes
if ( $( "body" ).hasClass( 'main-menu-open' ) ) {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
});
And there is a call in there when the page loads as well as resizes to show and hide the menu depending on screen size:
// show or hide the main navigation menu when the page is loaded
showHideMenu();
$( window ).resize(function() {
waitForDraggingStop(function(){
showHideMenu();
}, 500, "window resize in progress");
});
// adds or removes the classes for the menu addition or removal
function showHideMenu() {
if ( 955 < $( window ).width() ) {
$( "body" ).addClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'true' );
} else {
$( "body" ).removeClass( 'main-menu-open' );
$( '#navbar, #main-menu-toggle' ).attr( 'aria-expanded', 'false' );
}
}
The issue is that the menu has an animation associated with it and so when you arrive on the desktop there is a delay and then the menu animates out. This quickly becomes annoying to the user as they have to wait for the page to finish its animations before they can use the screen.
The Question:
Is there a better way to do this using the CSS/JS that will have the menu expanded by default when the user comes to the page above 955px and collapsed by default below the same mark AND allow for the direction to be reversed on the click of the toggle later on and avoid the delays associated with animation using JS to add the open class?
I ended up solving this using the method from my comments:
I treated the jQuery added class like a status toggle instead of a state like open or closed.
Above 955 the css would default to open in the absence of the toggle but its presence would close it and below 955 the absence would keep it closed but its presence would open it.
This would completely remove the jQuery adding the class on load as well as the resize function.
Additionally I renamed the body class to "main-menu-open-close" to reflect the toggle.
I've looked around this site a bit, and can't seem to find a solution that works for me...
I'm trying to disable parent window while opening a popup- I've tried:
<body onClick="func1()" onFocus="func1()">
with
editwindow = window.open("","","width=300, height=300");
with the following function in my header:
function func1(){
if (editwindow && !editwindow.closed) editwindow.focus();
}
My problem is that this method doesn't effectively "disable" the parent window. I need links and buttons not to respond when clicked on. It seems like the browser is giving preference to the links first, and then re-focuses to the popup window.
Any help would be appreciated.
Instead of reinventing the wheel, and dealing with pop-up blocker headaches in the future ruining your User Experience, you might consider using jQuery UI's modal dialog.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Delete all items": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
I have no idea if I'm doing this right but I'm trying to make it so when the delete Button is clicked a Dialog in my jQuery UI comes up
try adding:
$( this ).dialog( "close" );
on the close
In my application I have used EditLive Editor. When I try to open a popup on the same page where edtor is present it gets hidden behind it. Could anyone please help me how can i get my jquery dialog over the eitor.
Thanks
Try give a heigher z-index to jQuery dialog.
Code examples
//Initialize a dialog with the zIndex option specified.
$( ".selector" ).dialog({ zIndex: 3999 });
//Get or set the zIndex option, after init.
//getter
var zIndex = $( ".selector" ).dialog( "option", "zIndex" );
//setter
$( ".selector" ).dialog( "option", "zIndex", 3999 );
The issue you are dealing with is tied to how browsers and applets coexist. In general the applet ignores z-index and always appears on top - this is not an EditLive issue but an issue with applets in general.
EditLive in specific has an API to address this called setBackgroundMode
EditLive 8: http://docs.ephox.com/display/public/EditLive/setBackgroundMode+Method
EditLive 6/7: http://docs.ephox.com/display/EditLive7/setBackgroundMode+Function
Note that you should wait for the callback to fire before performing other actions (e.g. displaying AJAX lightboxes)