I'm trying to dynamically add an external popup with a title and a footer, with jquery mobile, but the footer moves to the page instead of staying in the popup div ...
Is it a bug from a jquery mobile? How can I solve it?
var p=$("<div />").appendTo(document.body);
$("<div />").attr("data-role", "header").appendTo(p).html("<h1>title</h1>");
$("<div />").addClass("ui-content").text("content").appendTo(p);
$("<div />").attr("data-role", "footer").appendTo(p).html("<h1>footer</h1>");
p.enhanceWithin().popup({"positionTo":"window", "theme":"a"});
p.popup("open");
here is the fiddle http://jsfiddle.net/stax/y9Lsqmax/2/
By design, the footer is parented with the page, I strongly believe because it can accommodate a navbar or a similar navigation system, or may be eyternal, and moreover it can be positioned at the very bottom of the screen, by using position: fixed. So, IMHO, it is simply not meant to be placed inside a popup.
BUT: You can style a div inside the popup as it looks as footer. Of course, it won't support all the options documented here: jQuery Mobile Toolbar .
$(document).on("pagecreate", "#page1", function () {
var p = $('<div id="popup"/>').appendTo(document.body);
$('<div class="ui-header ui-bar-inherit"/>').html('<h4 class="ui-title">Title</h4>').appendTo(p);
$('<div class="ui-content"/>').text("content").appendTo(p);
$('<div class="ui-footer ui-bar-inherit"/>').html('<h4 class="ui-title">Popup footer</h4>').appendTo(p);
p.popup({"positionTo":"window", "theme":"a", "overlayTheme":"a"});
$("#popup").popup("open");
});
Related
I have a <p> in a jQuery UI accordion that appears:
<p class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 184px " role="tabpanel">
Earlier, when I had several text links in there, it fit perfectly. However, now I have image links, and the images are sharply clipped.
I can duct tape the matter by adding additional <br /> tabs to get more space, but I'd like the accordion panel to include all images, one above the other, and correctly sized.
In If I understand your question correctly you need to tell the accordion to base its height off the content.
$(function() {
$( "#accordion" ).accordion({
heightStyle: "content"
});
});
This is stated and shown on the jQuery UI site here: http://jqueryui.com/accordion/#no-auto-height
Hopefully this is what you are looking for.
I had the same problem with the jQuery Accordion, and I just found the fix!
Simply add this CSS code at the top of your page. It will override the auto crop happening on the thumbnails:
.ui-accordion-content {
min-height:auto !important;
}
I would like to add an animation to collapsible set with jQuery Mobile.
Let me show a simple example of this:
<div id="tiles" data-role="collapsible-set" data-iconpos="right">
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>
jQuery Mobile handles this perfectly and shows me collapsible set of 3 items. What I want is ANIMATION, however I seem not to find anything in the docs.
I haven't tested yet how simple CSS animation(animating height property) would work, however is there a jQuery Mobile way of doing it like turning some internal flag ?
EDIT
I have tested out a simple jQuery animate method and it actually works. Just in case anyone else needs this. It runs smoothly even on my 528MHz Android phone on a default browser. A snippet I have added is really simple:
$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
$(this).next().css('height', '0').animate({
height: '100px'
});
});
Here ya go:
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
$(this).find('p').slideToggle(500);
return false;
});
I liked the idea you were going for so I played around with it a bit. This hooks into the way jQuery Mobile controls collapsible widgets so it's a bit less hacky then binding to the heading element.
The return false; stops the default behavior and the other line toggles the content in/out of view using the jQuery slideUp/slideDown animations. You could also use .fadeToggle() or roll your own animations. If you check event.type you can animate based on the event fired.
Here is a demo: http://jsfiddle.net/VtVFB/
Please note that in jQuery Mobile 1.4 and up you need to bind to the collapsibleexpand and collapsiblecollapse events instead of expand and collapse. So the complete code becomes
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
$(this).find('p').slideToggle(500);
return false;
});
The code is not entirely right.
It overrides the default jquery mobile implementation of the expand collapse events,
but does not handle the change of the expand collapse icons.
A better code will be:
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
$(this).next('p').slideToggle(500);
return false;
});
The accepted answer doesnt account for that it doesnt change the collapsible cursor because of return false, so this is my answer working:
In my Project it was the contents relative to the [date-role="collapsible"] are $(this).find('>*:not(h3)')
/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
$(this).find('>*:not(h3)').each(function() {
if (!$(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
}).on('collapse', function (event) {
$(this).find('>*:not(h3)').each(function() {
if ($(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
});
I have a jQuery Mobile (1.0.1) page with a fixed footer:
<footer data-role="footer" data-position="fixed">
Click Me!
</footer>
When I add elements to the DOM, the footer bar (which obviously shouldn't move) scrolls off the bottom of the screen - in accordance with the height of the elements added to the DOM. There's also white background between the previous end of the (grey) page and the new position of the footer bar.
If I scroll down and back up, the formatting is corrected.
I'm using Chrome, but it also occurs in Mobile Safari and IE.
The code that adds elements to the DOM is:
$("footer a").click(function () {
$("div[data-role='content']").append($("<button>Button A</button>"), $("<button>Button B</button>"), $("<button>Button C</button>"), $("<button>Button D</button>"));
$("div[data-role='content']").trigger("create");
});
What am I missing?
Have you tried calling the JQM updatelayout event?
See this page for some more info.
Try something like this:
$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );
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:
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"));