I'm using Jquery Ui to make a dialog using the following options:
$("#locations-dialog").dialog({
autoOpen: false,
title: '<input type="text" id="location-name" value="New Location">',
draggable: false,
modal: false,
closeOnEscape: true,
width: 660,
height: 515,
});
As it is visible I'm using an input field as a title.
The issue I'm having is that when I click on top of it nothing happens meaning I can't edit the text.
Don't know if I'm doing anything wrong...but in the jquery ui says:
Any valid HTML may be set as the title
As others have said, that's because the dialog widget disables selection for all the elements in its title bar, even if the draggable option is set to false.
You can add the text box to the title bar after the dialog widget is created, as the answer to the duplicate question suggests, or you can call enableSelection() to re-enable selection on the title bar elements:
$("#locations-dialog").dialog("widget")
.find(".ui-dialog-titlebar")
.find("*").andSelf()
.enableSelection();
The binding of the dialog box is what is causing issue. See this URL for full explanation and a work around example.
jQuery UI Dialog - Input textbox in the titlebar is disabled?
Related
I am trying to take the ui-datepicker-header and convert it to an accordion. It actually works (sort of). I want to hide notes here for the user to reveal if they choose.
I need the accordion to be collapsed when the page opens. What I have always open expanded despite using these parameters:
$('.ui-datepicker-header').accordion({
active: false,
collapsible: true,
autoHeight: false,
event: "click"
});
Once the page renders I see the arrow image is correct but I need click the header twice to get it to close. After this it works as expected.
Here's a fiddle demo: http://jsfiddle.net/mv5492/PuWWS/17/
Since these are both ui components I figured this would work fine.
Thanks in advance!
Mike
Move the $('.ui-datepicker-header').accordion(... declaration below the $('.ui-datepicker-header').append() statement that appends the text to the header.
This means that the aria- tags will be applied to the text under .ui-datepicker-header, and the text will be set to display: none when the page loads.
Here is code:
<script type="text/javascript">
$(function(){
var dialogOptions = {
title: "Header",
autoOpen: false,
modal: true,
width: 400,
height: 1000
};
$(".wnd").dialog(dialogOptions);
$("#btn").click(function(){ $(".wnd").dialog("open"); });
});
</script>
<style>
.wnd {background:yellow;height:900px;width:300px;}
</style>
<div class="wnd"></div>
<button id="btn">click me</button>
When dialog is opened and it higher than main window there is a side slider and it doesn't slide down if you try to drag it with the help of mouse cursor (it seemes like locked).
But it slides fine when to put down button (arrow) on keyboard or scroll down with mouse wheel.
Here is demo on jsfiddle.
How to activate that side slider?
Thanks!
A clean solution would be like this one:
http://jsfiddle.net/4fc33/6/
What I'm doing is wraping the jQuery UI overlay create method to turn off the event that prevents scrolling to work correctly.
An alternative approach to not being able to use the window's sliders is to enable sliders on the dialog window, itself. These will show up automatically if you place a cap on the maximum height of the dialog but can be a little tricky with some versions of jQueryUI.
At least on the version of jQueryUI that I am on (1.9) I needed to specify the maximum height on my own because the maxHeight property that should be able to be used according to the documentation didn't work*.
Here's what worked:
$("#dialog").dialog({
modal: true,
width: "auto",
height: "auto"
/* maxHeight: whatever won't work, */
}).css("maxHeight", window.innerHeight-120);
I subtracted 120 pixels off of the window's height to accommodate for the Dialog window's header -- and footer section with its "ok" button.
* The max-height actually would take affect if the dialog was attempted to be resized -- but not upon display.
If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).
I can set an explicit width on the second dialog, but this isn't ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.
Note that I've only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).
Does anyone have any idea how to auto-size the second dialog? Thanks.
EDIT
Some code added as suggested:
<div id="dialog-top" title="Tab data">
<form>
...lots of stuff, including id 'addCodeButton', which
...pops up the second dialog
</form>
</div> <!-- dialog-top -->
<div id="dialog-add-code" title="Code selector">
<select id = "codes" ...etc... >
...
</select>
</div>
$(function(){
$('#addCodeButton').click(function(){
// problem: this 'open' will not set the width of the new dialog
// wider than 'dialog-top' unless an explicit width is given
// (see '460' below)
$('#dialog-add-code').dialog('open');
return false;
});
});
var $dialog = $("#dialog-top").dialog({
autoOpen: false,
modal: true,
buttons: {
...
}
});
$('#dialog-add-code').dialog({
autoOpen: false,
width: 460,
modal: false,
buttons: {
...
}
});
I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.
http://jsfiddle.net/brettzink/NASyR/
you tried .dialog({width:"auto"}); ?
I have a long list of links which bring up different jQuery dialogs. When I scroll down to near the bottom of the page and click a link, it successfully opens my jQuery dialog but the dialog is not visible because the page has scrolled up to the top of the web page -- the dialog shows up below the fold and the user has to scroll back down to see the dialog.
What I want is for the dialog to popup and be visible no matter how far down the page the link is.
Here is my simple dialog jQuery code:
$(function () {
$('#dlg').dialog({
autoOpen: false,
height: 460,
width: 680,
modal: true,
position: 'center'
});
$('.vidlink').click(function(e) {
$('#dlg').dialog('open');
});
});
You can see how it happens on this page:
http://www.ourlaughingplace.com/asp/park.aspx?step=3&locID=WDW&parkID=MGM&DLRparkID=MGM#
Scroll down to "Movie Clips" and click on "Fantasmic Finale" using IE9, if you scroll back down you see that the dialog opened just the way it should -- it just came out below the fold.
I've tried setting the dialog position to 'center' and 'top' but still have same problem.
The value # for the href of the links correspond to the top of the document. With your current code, clicking on the link works as expected: the page is scrolled back to the top.
Either prevent default behavior of the <a> tags that opens the dialog:
$('.vidlink').click(function(e) {
e.preventDefault();
$('#dlg').dialog('open');
});
Or change the href value of those tags to:
Is it possible to make the jQuery UI Accordion first loads collapsed, so, no tab will load opened or active in default.
I know the option to make it collapsible but I want it to load totally collapsed then the user choses one tab.
I'm using the latest jquery 1.4.4 + jquery UI custom 1.8.6
Thanks.
Set active to false
which is the same as setting each tab to display:none;
Can you use this:
jQuery Accordion open collapsed
http://forum.jquery.com/topic/collapse-accordion-all-at-once
Simply set all the according content elements to display: none. This will hide them all, until clicking the accordion title expands the content under it.
James
this worked for me:
$("#accordion").accordion({
heightStyle: "content", header: "h3", collapsible: true, active: false
});