I'm trying to have a fixed header for my jQuery Mobile project like this demo page.
I've tried the attributes of data-position="fixed" data-fullscreen="true", however my header isn't visible as you scroll and then fades in. How can I remove this fade in / out functionally?
I have found this similar question but I think it might be outdated as although they discuss the issue they don't mention this demo page which seems to do what they need:
Which version of JQuery Mobile are you using? The "True fixed toolbars" were added to the last version jQuery Mobile 1.1.0 Final. Check it at http://bit.ly/JjPmwo
Related
I have a JQM 1.4 + Phonegap 3.3 app in which there is a long text page. I would like it to be scrollable. But the touch scroll doesn't work in Android 2.3.
How to fix this ?
Thanks
CSS overflow scroll doesn't work on android 2.x, so you have to do that by yourself. Some solution here:
use javascript plugin, like iScroll or touchScroll
make scroll button.
The problem with my function is that when I scroll down, the clone of the element I want to drag is positioned under my mouse pointer, this only happens in FF, IE and Safari, Chrome works like it should.
I already tried all answers on this question :
jQuery draggable shows helper in wrong place after page scrolled
But without succes,
I use jQuery 1.8.3 & jQuery UI 1.10.3
hopefully anyone has any idea on how to fix this.
You can view a live version of my webpage here : http://www.solar-sell.eu/uw-pv-systeem/?gezin=true
The people are the draggable elements and the house is the drop area.
Thanks in advance!
It seems to me that the problem is a jQuery UI bug - http://bugs.jqueryui.com/ticket/9315
I'm building a mobile app using jQuery Mobile 1.3.0, EaselJs 0.6.0 and TweenJs 0.4.0.
So, when I load the page, some content gets visually duplicated. The DIVs are not really duplicated, it is just visual.
This bug only appears on Safari (Windows + OSX).
If I click and slide to select the page, the bug disappears.
If I switch page (with jQuery Mobile slide transition), it also disappears.
Here is a screenshot:
My code is massive so I cannot really post it fully here. I've just spent 2 hours playing around with my code to try to fix this. I really have no clue.
If you have an idea and need more information, then please let me know.
Not a pretty answer, but a workaround that worked for quite a few:
This sounds like a possible racing-condition, you can try setting a timeout(couple MS) when the page is loaded and then have it re-renderd after that timeout through switching display: none/block on the body.
I am building a mobile website and need a fixed positioned button (for quick link to scroll to top) that should move across while scrolling the screen. fixed position is not supported by mobile browsers. Can anyone suggest the way around for the same. I am using twitter bootstrap. I have observed fixed position header and footers for mobile in jquery mobile framework but could use it in twitter bootstrap page.
Thanks in advance.
You can use a navbar-fixed-top or navbar-fixed-bottom navbar on your site and that will function properly on mobile devices. Refer to the Optional Display variations section under navbars http://twitter.github.com/bootstrap/components.html#navbar.
I have created bottom fixed tabs using jquery mobile data-role="navbar" inside a JQ footer. The issue is it creates a div on runtime outside the page flow which is absolute, more than the height of the page content. This is getting created on runtime and appears only when the navbar code is written. Need some help on it.
First, are you viewing the website on a mobile device (and which mobile OS if so).
This issue has appeared in my experience, but only when using a standard web browser.