i'm using jquery 1.1.0 and i have a custom header here
i've set the css of this header to be a height of 200px; (i hardcoded it for testing, if i place items in there to make it dynamically get to 200 px, it's the same thing)
the problem is when i transition to another page
$.mobile.changePage("#SurveyCreateView", "none", false, false);
the content on the second page basically ignores the height of the custom header i have. (so the content starts all the way at the top) if i resize the window or if i do a back, and navigate to the second view again, then everything is okay.
anybody have any idea how to fix this?
Related
I am using iscroll-probe.js to implement the pull-to-refresh and infinite load in a Phonegap application using the example given in this link.
I am loading the contents dynamically so iscroll is refreshed after the list items have been added.
Everything works perfectly for me except the situation when the total height of the list items is lesser than the screen height.
This is when the scroller is not required hence is disabled but it also disables the pull-to-refresh. This I think is how iscroll works as the scroller is disabled the moment I call the refresh method.
Does anyone know how to make pull-to-refresh work when the content height is smaller than the screen height.
For anyone still interested, I solved this problem by setting a min-height to the #scroller element.
I did this using jquery (I'm not sure if it can be done by using css only).
$('#scroller').css('min-height',($(window).height()+1)+'px');
That is: the #scroller element min-height is set to the window height + 1px.
This way the scroller is always enabled.
Please note that this instruction has to be executed before instantiating the iScroll element.
The jQuery Mobile popup dimensions are limited to having a 15px margin on the left an right sides, and a 30px margin on the top and bottom. If the content is too large for these constraints, then the popup grows longer (not wider), so that the whole page must be scrolled to view the popup content.
I need to change this behavior such that the popup dimensions never exceed the height of the window, and such that the content scrolls vertically within the popup.
It is possible to limit the size of the popup thusly:
$('#popup').on({
popupbeforeposition: function() {
var maxHeight = $(window).height() - 30
$('#popup').css('max-height', maxHeight + 'px')
}
})
...but the popup content is the same, passing the bottom of the popup and still forcing the user to scroll the page, rather than the content within the popup.
How do I allow the popup content to scroll vertically within the popup?
You should use:
$('#popup').css('overflow-y', 'scroll');
Here's a working example: http://jsfiddle.net/Gajotres/mmRnq/
Final notes
If you want to find more about how to customize jQuery Mobile page and widgets then take a look at this article. It comes with a lot of working examples, including why is !important necessary for jQuery Mobile.
I have a simple page with fixed header and footer. When it Slides from page1 to page2, the footer on page is first shown at the position where the content of page2 is ended (somewhat middle) then after page finish sliding the footer re-position itself and move to bottom. Is there any way to avoid this?
In the pageshow event handler of the second page you can try adding the following code snippet:
$.mobile.fixedToolbars.show(true);
I believe this is a bug in JQM. It happens when the page content is shorter than the screen size.
My educated guess, why it happens:
After transitions, JQM triggers updateLayout, which recalculates footer position by hiding-recalulate-showing
Toolbars are hidden using CSS:top property and setting it to 0
So on a long page, to hide the footer CSS:top is set to 0, pushing your footer down to where it would be in a static page flow = the end of your document.
To show the footer, JQM calculates, where you are on your page vs. your screen size and footer height and comes up with some CSS:top = -12345px. Check CSS-top in Firebug when the footer is visible.
= to hide: CSS-top = 0
= to show: CSS-top = -1234px
Now if your page is shorter than the screen height (screen 600px, page 200px for example), hiding the footer by setting CSS:top=0 will stick it to the end of the page, which is right in the middle of your screen at 200px.
Since updateLayout recalculates footer position, it is hidden-recalculated-shown. And there you have your jumping footer.
I've done a fix with pull request on Github - https://github.com/jquery/jquery-mobile/pull/3050.
I guess since the toolbars will switch to pos:fixed with JQM 1.1. nobody bothered to pull it in any more. But it work nevertheless.
Using Jquery UI's tabs I want to be able to set the tab + tab content views together to be a specific height say 500px. Since the height of the tab section varies by theme and I cannot know what height to use in px for the content view so I cannot hard code it. How do you force the whole thing to a specific height?
Thanks!
Put the entire block inside a div and apply max-height CSS property to it.
I have a div in a page (footer) and I want the following to happen with CSS:
If the page has not enough content to fill the window, the div should be at the very bottom.
If the page has enough content (and a scroll bar perhaps appears) then I want the div to be after all the content.
If I do it with position absolute etc, I can't get the second case to work.
Any ideas?
I think you're looking for 100% min-height layout. Check out this post: 100% Min Height CSS layout.
You want to use a sticky footer.
For example: http://ryanfait.com/sticky-footer/
or if you google Sticky footer you find a few alternatives