It's impossible to help from bits and pieces of HTML posted to the forum.
Prepare a demo we can try. You can post a link to your site, or make a demo using jsFiddle or Plunkr. You will need to use Plunkr if you use multi-page template. (Each page in it's own document) as jsFiddle doesn't support that.
I can only offer a couple of comments based on your post:
1. You should not duplicate IDs, either on the same page or even on different pages. You should NOT give every footer the same ID. No harm done, though, unless you actually try to USE the ID in JS code to select a footer.
2. <a href="#popup" data-role="footer"... makes no sense. Why did you add data-role="footer"?
3. position:sticky is a very new browser feature. Many Android users will have trouble, because Android users often do not update to the latest, in many cases because the phone manufacturer or carrier does not permit updates.
Follow the example in the documentation to make a fixed footer. Don't try to do it using your own CSS (position:fixed)
Your markup is nonsensical. You have a non-fixed footer, and then inside that footer you have used a <span> and an <a> tag that are position:fixed and a paragraph that is position:sticky. And then you have an <a> tag inside the footer as well, which inappropriately has data-role="footer".
SPOED is not your footer, you've applied that class to TWO elements, an <a> tag and a <span> inside of your footer.
As well, you are applying JQM CSS classes in ways that they were not intended to be used. I do not understand why you are creating <span>s with ui-btn-inner and ui-btn-text. Is there some reason you did not just create a button as documented?
(If you did it because the footer CSS was messing with your styles, you can prevent the footer CSS from styling the content inside of the footer by wrapping your HTML in a <div> which is a direct child of the footer.)
Frankly, I've no clue from the above just what it is you are trying to do with this.
I have tried jsfiddle, but now I know why this didn't work (multipage support), thanks.
I have tried plunkr, but it doesn't look anywhere like what I've made.
My footer has to be a emergency button, so full width and height of the footer has to be a link/button to the popup screen. The text should be centered. And I don't wan't my footer to be a ugly (90's) looking jquery button. It needs to be a RED footer with white text and the footer should be around 10% height.
The footer should only be visible on certain pages, not all of them.
1. I thought I could use ID's once for style and use duplicated id's in html code. I will keep in mind not to do that again.
2. I've copied this code from a demo on the jquery doc's. Not sure wich version, I'll guess the latest one.
3. Fist attempts I couldn't get the footer right and ended up with a sticky position. I'll try it again and start all over again.
I wish I could give you a awnser about your second post, but I'm a noob. I really have no idea when or why to use a <span> tag.
Sometimes I use the insert option from dreamweaver to put in some jquery (mobile) code, and sometimes I use the jquery doc's or examples. So It could be a mix from codes together. And because I'm a noob at this, I'm not sure all the time if I'm doing it wrong or right :)
I hope the code is correct but I think there will be some improvements.. Let me know..
well it looks ok, but when I put this footer in 1 page, the footer shows on 1 page. When I copy this footer to the 2nd page and change the id from SPOED to SPOED2 (also copy and rename the css ID) the footer shows on page 1 and 2. But, when I copy the footer to the 3rd page, the footer wil show up in every page even when there is no footer code inside page 4,5,6,etc..
You didn't include jQuery or jQuery Mobile in your fiddle!
Here is a fiddle showing the correct way to style a button inside of your footer. I included 3 pages - page 2 does not have a footer. I made it as a multi-page document because of jsFiddle, but it will work just the same in single-page documents for each page.
If you want the footer to "blink" when you go from page 1 to page 3, remove data-id from the footers.
You need to use the debug/inspection tools in your desktop browser to work-out the selectors needed to override jQuery Mobile CSS.
Current JQM is 1.4.5. I don't think Dreamweaver ever came with 1.4.5! Some old copies of Dreamweaver had jQuery Mobile 1.0 alpha, which is WAY obsolete. Don't use it! Don't copy code from documentation for random versions of JQM, as it has changed very significantly with each major version, but especially from 1.3 to 1.4.
I see you have applied many CSS classes that are not intended for you to add. jQuery Mobile adds these classes itself. You risk causing problems if you use these classes inappropriately.
For example, you have:
Do not add ui-mobile-viewport! Where did you get the idea that you are to add that? JQM adds it automatically.
You have a large number of other CSS styles that you have added inappropriately.
Now, if they are applied in the right places, they will do no harm. At least not right now. But in the future, when the CSS may change, they will cause trouble. And, if you use them where their usage is not correct, it will cause trouble.
Maybe you read something about "pre-rendering", where you set all of the CSS and tell JQM not to add CSS. It is an advanced technique that is only needed if you have very complex pages and want to improve rendering performance. Don't do it starting out a project! I would do it only if absolutely necessary.
I noticed you used a multi-page document. I do not recommend this. I made a multi-page document to demonstrate the footer only because of the jsFiddle limitation. I recommend always using single-page per document. You have 14 pages. The user will have to wait until the entire document downloads until they will see anything! What if you have 100 pages, or 1000? Not only will they wait longer, eventually it will be too much for the browser.
The css I have added is to change the looks of the stuff I've added. When there is a style in the HTML doc, then I couldn't get it right with the css document.
I haven't add the ui-mobile-viewport, it was already there. I've picked up the multipage demo as a template to get started.
My school asked me to create multiple pages inside a page. So I thought I should make a multipage doc (multiple pages in 1 file). Just like the jquery mobile Demo's 1.4.5.
I think it is a bit confusing, a single page, a multipage (in a single page) or a multipage as multiple pages in multiple files, the demo only shows how to create 1 document with multiple pages inside this document/page, so I thought this was the way to do.
After filling the page I thought the document was becoming quite large.
I saw pre-rendering a few times, but haven't got into it.
My school doesn't give me up-to-date material, only google. But google gives me also a load of old crap that is "useless" these days. So I'm spending a lot of time learning old stuff that is not relevant. After learning all kinds of plug-ins and widgets I don't see the woods for the trees and I'm not sure anymore when to do what.
This is from "view source" in my browser. It was NOT added by JQM - it came from your server.
I've no idea what cz-shortcut-listen is about. It has nothing to do with jQuery Mobile.
Oh. I just looked it up. Apparently it is from the Colorzilla browser plugin. But I do not have that plugin installed. It modifies HTML in pages. And it shows up in Safari as well, so you must have it in your page source. Remove it!
It should just be:
And that's what the multi-page example on the demo page you linked to shows! So I don't know what you mean when you say you "picked up the multipage demo template to get started". Demo template from where? Surely not from the JQM website!
You have MANY other inappropriate applied CSS classes. For example:
Don't add ui-shadow ui-btn-hover-c! Those are classes that JQM adds ITSELF. And ui-btn-hover-c would be added/removed when the user hovers on the button. It is not right for you to add it yourself.
Why are you using data-ajax='false'? That makes JQM re-load the entire document.Your site will be VERY slow going from page to page. It is often used as an "escape hatch" when a developer has abused IDs and has trouble with ID conflicts. It is a last-ditch work-around.
Where are you getting all this wrong information? Use the documentation at the JQM website!
Here I've got the multipage from. I didn't know a browser could add code to a page. I just used this page as a template to get started.
It's true about the colorzilla extension, when I disable the extension the code cz-shortcut-listen is gone.
Can you tell me how I can see if a code is original or if/when it is added by a browser or jquery?
About the many inappropriate CSS classes, I'm not sure where I get that code from. I thought from the demo page where I get all the things from. Probably I have used a (bad) example that already had attached these JQM classes.
I will try to remove those bad classes this week..
The demo page you cited does not contain the inappropriate CSS classes.
The debug and inspection tools in desktop browsers show the CURRENT state of the document. When you inspected the document, it had already been altered by jQuery Mobile and any Chrome extensions that messed with the document content.
If you want to see the content of a document as delivered to the browser by the server, use "View Source" or - better still - "Save As" in your browser. In Chrome, there is a dropdown to save entire document or HTML only - choose "HTML only". A third way is to use the "sources" tab in the browser's inspection and debug tools.
I took a look at your new version. Much better to use a single document per page, as it will allow the site to grow (yes, I realize this is for a class, and the site will not grow! ;) ) and the first page will be shown much more quickly.
Keep in mind you must keep <head> of each document IDENTICAL. (Other than <title>).
Remote the data-ajax='false' from your links. It is a crutch for broken sites. If you have problems when you remove data-ajax='false', post again and ask how to fix the problems. Such problem usually arise from not keeping <head> identical, or from use of duplicate IDs.
data-ajax='false' will result in poor performance when changing pages, and also make it impossible to use page transitions. I usually suggest that if a site needs to use it on all of it's links, the site should not be using jQuery Mobile.
No, I don't mean for you to remove the scripts and styles from page2, page3, etc.
HOWEVER - that should work if you have written your pages correctly, but only until the user might reload the page with the browser, or navigate directly to page2,3 or some other site might deep-link to page 2,3, etc.
Normally, you should not use data-ajax="false". And, so, normally, the browser will first load the complete page1 along with it's <head>. But when the user navigates from page1 to page2, JQM will use AJAX to load the page content into the same document, without reloading the entire document. In this case, JQM will DISCARD <head>.
The reason you need to include scripts and styles in <head> of every page - even though they are normally discarded - is in case the user should reload the document using the browser reload button, navigate directly to page2, etc. In this case, then, the entire document will be loaded, including <head>, and will completely replace the previous document.
<head> of every page must be IDENTICAL. i.e. cut-and-paste it from page1, or (better) use a server-side include, template, or (for static sites) Static Site Generator to make it easier to insure they are all identical.
The only thing you may change in <head> between different pages is <title>. Everything else is discarded, except when loading the first page that the user navigates to.
Since in almost all cases, <head> is discarded, you should keep it short. Do not included extensive CSS and JS directly in <head>. Only link to files. The files will not be loaded for page2, page3, etc.
Lacking a good understanding of JQM Ajax page loading, many developers seem to give up, and use data-ajax='false'. It's at that point that one should either learn how JQM Ajax page loading works, or abandon JQM and use Bootstrap...
I admit that the documentation is poor. I didn't write it. But it is a difficult concept to get across. It is easy to make wrong assumptions if you have previously written conventional websites, where the document is reloaded with every navigation.
It is, alas, also a fragile approach, and I have no answer for that. It is not just with JQM, but with any "SPA" (single-page application) approach. One can get away with very sloppy practices writing a conventional website, as your sins are erased with every navigation. With JQM or any SPA approach, they persist.
A good example is the ID problem. With the conventional approach, you must avoid duplicating an ID within a page. With JQM, you must avoid duplicating an ID across your ENTIRE SITE.
Always tell us how to reproduce the problem. I get a login page. A user ID and password are pre-populated and I can log in. But then it doesn't show a map, but some icons. I have no idea what to do. And I have no idea which of your two links above is which.
There is a error thrown within the Google maps code. You must not have used it incorrectly. I can't guess what is wrong, as the Google Maps code is minified, which makes it impossible to make any sense of. Google has some forum I think to help you with using Google Maps API.
Yes, as I stated before, the scripts and styles loaded in <head> of every page must be identical. Here, let me show it as a simple outline. I'll omit the actual markup to save typing:
script 3 <- Will NOT be loaded, unless the user pushes browser "refresh" button!
So, above, you should have also loaded script3 in <head> of page 1 - even though it is not needed in page 1.
If you have some script(s) that are only used by a certain page, you can load the script(s) within the page itself, not <head>. Load just before closing </div>.
<div data-role='page' class='page2'>
Blah, blah, blah, blah.
Normally, I suggest loading all scripts in <head> of all pages. But if it is infrequently-used and only used on a certain page, load it as above within the page.
BTW, Phonegap is a bit of a special case. You can save some bytes, and just include empty <head> in all pages except the first one. The reason is that the user has no browser controls. The user doesn't have any way to type-in URLs and navigate directly to a page, and they do not have a refresh button. And so scripts and styles loaded in <head> of other pages (besides the first) has no purpose, it would never be used.
But if you will also make a website version of your app, you will need the identical <head> content for each page.
As well, you will have a problem with Apple App Store approval if your app loads Google Maps on first page. They will reject it, because an app may not be required to be online in order for the app to be used. So, in this case, you MUST load the map script within the page, not <head>, otherwise it would load on page 1.
You will need to load Google Maps API on the specific page with the map.
And you will have to add some code to check if online, and give the user a nice message telling them that the map can only be used when online when they are offline. You need to give a message rather than just having the map fail to load.
As well, Google does not allow you to cache the map code within your app. You must load it online every time.
You can search this forum for previous posts that talk about how to use Google Maps. It is a bit easier if you use jquery.ui.map plugin. Although it is called "jQuery UI map", it can work with jQuery Mobile.