On first load, the logo is resized just fine. If you go to a news page and then click the Home nav button, the logo is huge, clearly showing that resizeItems isn't actually doing anything the second time you go to index.html.
No, pageinit will not do what is requested here. pageinit will run your code when each page is initialized, not every time it is shown.
Use a pageshow event. This is what it's for. Put it in code loaded from <head>. Or, you may prefer to use pagebeforeshow, if you want your code run before the user actually sees the page. The purpose of each event is really quite self-explanatory.
var $page = $(this); // It's convenient to get a jQuery object for the page
// Do something here
Pretty impossible to diagnose your problem without seeing any code or HTML. I'm guessing you are facing other issues, but I can only guess.
- You're loading jQuery UI. JQM isn't designed to work with jQuery UI. Some people have gotten some parts of jQuery UI to work with JQM. I don't recommend trying this, though, because it will almost certainly break every time there is a new release of JQM, and the two have drifted apart sufficiently that they are now almost impossible to use together.
- If the reason you are loading jQuery UI is because you're using jquery.ui.map, you don't need jQuery UI. jquery.ui.map is designed to work with either jQuery UI or JQuery Mobile.
- You have duplicate IDs (at least logo) in different pages. This WILL NOT work. HTML does not allow more than one element with the same ID in a document. Browsers simply to not know WHICH of multiple elements with the same ID you mean to affect, and so they punt. They all punt in different ways.
I've mentioned this before. It seems to be the #1 mistake made by JQM newbies. They just don't want to take advice not to duplicate IDs, no matter how many times they are told. Use a class instead.
- You need to read and understand the parts of the documentation about how JQM loads pages in the document.
You are my personal hero. The entire issue was id="logo", when it should be class="logo".
But you're right... I don't understand why. Am I misunderstanding that each page is it's own entity? Normally, you can use an ID once per page and a class multiple times per page. I only had id="logo" once per .html file... but then when I changed it to class="logo" it suddenly works.
You have ID logo on every page. Yes, you have duplicate IDs.
Which one of the duplicate IDs would you like to change? The browser cannot guess what you intended. The underlying DOM function is getElementByID(), and it returns ONE element. Which one should it guess that you wanted?
None of this is necessary, though. You could resize your stuff using pure CSS. But it will look equally bad, because resizing a bitmap is never going to look good.