Response title
This is preview!
Move this topic
JQM fixed footer “floating” issue
in jQuery Mobile
•
3 years ago
In JQM I want to have a fixed footer but at the same time have a max width of the page (contents to the left). It works fine until I add data-position="fixed" (fixed footer). The footer now fills the whole window and not just 480px. Is this OK or is it a bug? Any ideas how to solve the problem?
<div data-role="footer" data-theme="a" data-position="fixed"><h1> </h1> </div>
<div data-role="footer" data-theme="a" data-position="fixed"><h1> </h1> </div>
JS:
$(document).ready(function() {
if ($(window).width() > 480) {
$('#page1').css('width', '480px' );
}
});
$(window).resize(function() {
if ($(window).width() <= 480) {
$('#page1').css('width', '' );}
else {
$('#page1').css('width', '480px' );
}
});
1
Replies(7)
Re: JQM fixed footer “floating” issue
3 years ago
A fixed footer is not a part of the page, and so is not affected by page CSS.
Re: Re: JQM fixed footer “floating” issue
3 years ago
Thanks. I did not realize that because the footer is still "within" data-role="page". To solve the problem is easy. Just to add e.g. an id to the footer and the JS above.
Leave a comment on watusiware's reply
Re: JQM fixed footer “floating” issue
3 years ago
Well, really, it's not quite so simple - it depends on what version of JQM you are using, and just what you mean by "fixed" toolbar. And, honestly, I don't recommend monkeying with the page width, as it will cause problems with MOST transitions. If you insist, I suggest you use transition "none". I've seen others try this, and have never found the result pleasing, but you have to be the judge.
I'm assuming you are doing this to keep it from looking silly on desktop. I'd rather you just encourage desktop users to adjust the size of their window. Which I think they will on their own, since it will, indeed, look silly if the page is too wide.
- You do not need any code for this in any case. Just use responsive CSS rather than using code. It will be a smoother result.
The ideal situation is "fixed external toolbar". This is completely outside of the page. It takes a bit of code to set this up.
If you define your toolbar inside of the page, then you have the option of making it a "persistent" toolbar. In older versions (not sure about 1.4.5) you could set the same data-id on the toolbar in each page, and it would make it persistent across pages. However, styling it is problematical, as if you examine the code and behavior, you will see that the toolbar actually is moved out of the page during transitions, and then back into the page once the transition is done! It is a mess! So, you need to make sure any styling changes accommodate the toolbar both in and out of the page (you will need two selectors for your CSS).
There may also be an issue with having sufficient specificity in your CSS selector. Your desktop browser's developer tools will help you work-out the specific selectors needed. You can get around this with !important, but better to work-out the specificity.
If you still have trouble, I can look at some OLD code of mine that changes header/footer opacity and height (not width) and see just what I did. But I think I have this only for 1.2.
(Edit: it appears that a selector of .ui-header-fixed (for header) or .ui-footer-fixed (for footer) is sufficient, at least for 1.2, probably as well for 1.4.5).
I really do not recommend monkeying with the width of either pages or header/footer. JQM was designed to take the entire width of the window, and the results are not likely to be pleasing if you change it.
Re: Re: JQM fixed footer “floating” issue
3 years ago
Many thanks for the info. I only change the page width on my minimal site of my own and I don't use any footer on this site. I added a footer just as a test.
I am also developing for a bigger project using jQM. The app does not look so good on the desktop or even on a 10" tablet. I tell the users to make the window smaller but they don't - they usually run fullscreen.
Ideally jQM should offer the possibility to set page width and to have the page centered within the window.
I will check external toolbar.
Leave a comment on watusiware's reply
Re: JQM fixed footer “floating” issue
3 years ago
And, finally, I will give the depressing advice: don't use JQM for new projects. I don't, despite the fact that I have used it heavily in the past. It is NOT up-to-date with current browsers, and I see no reason to believe that an updated version 1.5 will ever be released. I hope the developers prove me wrong. But we have been Waiting for Godot... IMO the developers should face reality, and declare it "legacy", a dead parrot...
Re: Re: JQM fixed footer “floating” issue
3 years ago
I am a little depressed. I started to use JQM for a bigger project within healthcare more than a year ago (not working full time). The project is now finished. I noticed that there were no new realeses of JQM...
Regarding browser support: Isn't that handled by jQuery and jQuery is still updated?
If I want to replace jQM what do you recommend? I want to keep PHP and MySQL...
Leave a comment on watusiware's reply
Re: JQM fixed footer “floating” issue
3 years ago
Updates to jQuery will deal with changes to browsers that affect jQuery code. But only jQuery code, it cannot help with jQuery Mobile code or CSS!
As well, jQuery Mobile does not support the current jQuery version. It might work, it might not, there might be some things that don't work. It hasn't been tested, and JQM hasn't been updated for any jQuery since 1.11. Only through 1.11 is supported.
Browser changes may or may not have broken some jQuery Mobile widgets. No current browser has been tested, and none of them are officially supported!
"supported" is a bit of a misnomer, as no updates have been forthcoming, so unlikely things will be fixed even if you report a bug.
I do believe there is 1.5 work-in-progress code in the repo, but no idea what the state of that code is. As it is unreleased, it should be considered buggy.
Here's the support list for 1.4.5. Well, OK, for 1.4. I wasn't able to find a support list for 1.4.5. You would have to follow the release posts on the blog.
I do believe that "for the most part" it still works. But discovering what might be broken with current browsers is up to you. If you do find problems, do share them here, and just in case somebody wakes up, you should also report any bugs as GitHub Issues.
Leave a comment on watusiware's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic
Reply to Kjell Jansson's problem