1

I have an existing mobile site which I am using Phonegap to turn into native apps. My existing html tool bar uses css position: fixed which is not compatible in iOS or Android. Therefore, I would like to use the fixed nav/toolbar out of jQuery mobile. I already have it installed and it looks great :-) The only problem is that the rest of the jQuery script (which is not being used) is affecting passing parameters when I use the search function already built into the site. I know there are ways to turn it off, which I have done but it's still not 100% and also it's a little over my head!

I was wondering if there is a way of just using the CSS and JS for the nav bar and leaving the rest out? As that's the only feature I am using. This was mean the site is back to normal and I can use the jQuery mobile nav bar, which I really want to keep now that I have it installed.

Improve this question

2 Answers 2

Reset to default
1

On this page you can view their demo of fixed positioning. I used FireBug to inspect the elements relating to the footer and came up with this fiddle. I didn't test it everywhere, but it works on iPhone. You can view just the frame with the footer by viewing this page.

My solution only references their CSS page for styling. You do not need to have their jquery.mobile-1.2.0.js included. If you were to use this in production, you should go through their CSS page and pick out only the classes used, rather than including the whole CSS page.

Since this solution only uses CSS, it will only work on most newer mobile devices. For a list of devices that support it, check out this site. Scroll down to the part that says "mobile css fixed positioning support". Older devices will fail.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Think I may have to go with this until the above is sorted! I've inserted the classes in the HTML but still not getting the desired result...here is what I have now:jsfiddle.net/barney278/D32ua and here is what I have using the js: jsfiddle.net/barney278/c7wJ5/1 If you get a chance, I would really appreciate if you could have a quick look.
So you're trying to get the 'look and feel' of the JS fiddle with only CSS, correct?
I have updated my original fiddle HERE to show what I think you are after.
Thanks Dave, that's exactly what I was going for, appreciate the help.
Also, welcome to Stack Overflow! If either of these answers were useful, be sure to upvote them.
0

It is still in Alpha, but there is a Download Builder being created to let you get just the parts you want: http://jquerymobile.com/download-builder/

Improve this answer

2 Comments

Perfect! Only thing is I selected what I needed, linked to the the new CSS and JS files, but it doesn't seem to be picking it up..I presume it's ok to use the existing code I have for the navbar? I linked them up exactly as I did before. Here is the code: jsfiddle.net/barney278/BDQfN I even tried ticking everything in the Download Builder to see if I missed something that the toolbar might be relying on
I haven't tried it myself yet, sorry. They do mention it is Alpha on the page. I'd use the link there they have for the issue tracker.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.