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:
Related
I have a JQM 1.3 popup which I have set to data-dismissible="true" All is good until the screen is scrolled. The popup scrolls fine and I have a javascript event listener to center the popup when the scrolling stops. The problem is that the underlying -screen div (that jqm creates) does not follow the popup. So if I scroll to the bottom of the screen and then click anywhere outside of the popup it does not dismiss the popup. Using the dev tools I can see that the css for the -screen div never changes after the popup is displayed.
I want the -screen div to track my popup div so that regardless of where I scroll to - anywhere that I click outside of the popup it will dismiss it. Currently if I want to click outside the popup to dismiss it I have to scroll the screen back up to where the popup was first displayed.
I found the problem:
When I was appending the popup I was not appending it down far enough in the DOM. I was appending the popup to 'body' and instead it needs to be appended one level down to the div with data-role="page" or the div with class 'ui-page' set.
The popup is contained within a handlebars template:
$('body .ui-page-active').append(template());
I have a page where I need to show/hide divs based on what button the user clicks. In the page, I have two divs (divBranchList and divGrowerList) and two buttons (btnBranch and btnGrower). I am using the following code to show/hide the divs.
$(document).bind('pageinit', function () {
alert("here");
$("#divBranchList").hide();
//show hide lists
$("#btnGrower").click(function () {
$("#divGrowerList").show();
$("#divBranchList").hide();
});
$("#btnBranch").click(function () {
$("#divBranchList").show();
$("#divGrowerList").hide();
});
});
While this works perfectly when the page loads or if I refresh the page, but fails to work when the user clicks on a listitem and the page comes back from the server after getting some data. The page has both lists visible although if I put a breakpoint at the following line in Firebug's script panel, it does get hit.
$("#divBranchList").hide();
Any ideas why the div is not hiding or how to make it work?
If you're showing and hiding content in a JQueryMobile page, you will probably need to trigger the UpdateLayout event
$("#divBranchList").trigger("updatelayout");
after you've done your showing / hiding...
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?
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 currently use jTemplates to create a rather large table on the client, each row has a button that will open a jQuery UI dialog. However, when I scroll down the page and click on one of those buttons, jQuery dialog will open, but the scroll position get lost and the page jumps back to the top (with the blocking and the actual dialog showing off the screen). Has anyone seen or know what might cause this problem?
Thanks.
Are you using an anchor tag to implement the "button" that pops the dialog? If so, you'll want the click handler that opens the dialog to return false so that the default action of the anchor tag isn't invoked. If you are using a button, you'd also need to make sure that it doesn't submit (by returning false from the handler) and completely refresh the page.
For example,
$('a.closeButton').click( function() {
$('#dialog').dialog('open');
return false;
});
<a class='closeButton'>Close</a>
If your buttons work with an html anchor tag with href="#" replace the href for example by href="javascript:;" or any other method that you use to disable the href. The reason why the scrolling happens is because of href="#" scrolls to the top of your page.
change your code like this
$('a.closeButton').click( function(e) {
e.preventDefault();
$('#dialog').dialog('open');
});
You can try :
scrollTo(0, jQuery("body"));