Response title
This is preview!
Move this topic
Run script every time the page is shown
in jQuery Mobile
•
2 months ago
jQuery 1.9.1
jQuery Mobile 1.3.0
I want a script to run EVERY SINGLE time a page is shown, including the homepage and every other page on the site.
Please tell me exactly what code I need and where to put it on the page. I have been trying to figure this out for a week, and I'm getting sick of jQuery mobile and it's quirks.
Thanks.
1
Replies(10)
Re: Run script every time the page is shown
2 months ago
Use the pageinit event and your code in the head section of your page:
- $(document).on( 'pageinit',function(event){
- alert( 'This page was just enhanced by jQuery Mobile!' );
- });
Leave a comment on Godsbest's reply
Re: Run script every time the page is shown
2 months ago
It's still not working. Take a look on your phone (I'm on an iPhone 5)...
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.
Thanks.
Leave a comment on switzer's reply
Re: Run script every time the page is shown
2 months ago
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.
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 mixing JQM 1.2 CSS with JQM 1.3 Javascript. I wouldn't expect that to work well.
- 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.
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.
- $(document).on("pageshow", ".ui-page", function(event) {
- 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 mixing JQM 1.2 CSS with JQM 1.3 Javascript. I wouldn't expect that to work well.
- 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.
Leave a comment on watusiware's reply
Re: Run script every time the page is shown
2 months ago
They are self-explanatory, except when they don't seem to work (which is all the time for me).
So in the head, I have...
<script type="text/javascript" src="js/my.js"></script>
<script type="text/javascript">
$(document).on("pageshow", "[data-role=page]", function(event) {
resizeItems();
});
</script>
In my.js...
function resizeItems(){
var multiplier = (($(window).width() - 100)/600);
if(multiplier > 1){ multiplier = 1; }
var logoWidth = Math.floor(600*multiplier);
$('#logo').css('width',logoWidth);
var iconWidth = Math.floor(124*multiplier);
$('.icon').css('width',iconWidth);
}
The whole idea is for it to resize the logo and (homepage) icons based on the size of the screen.
This seems to work for every page (including index.html), except for when you use a nav button to get from any page back to index.html. Then it completely ignores my request to resizeItems().
Thanks.
Leave a comment on switzer's reply
Re: Run script every time the page is shown
2 months ago
Your code can not work because of your duplicate IDs.
You are trying to do some rather advanced things, combining JQM with Modernizr, jquery UI, jquery.ui.maps, etc. without first understanding the basics of JQM.
You are trying to do some rather advanced things, combining JQM with Modernizr, jquery UI, jquery.ui.maps, etc. without first understanding the basics of JQM.
Re: Run script every time the page is shown
2 months ago
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.
Leave a comment on watusiware's reply
Re: Run script every time the page is shown
2 months ago
What duplicate IDs?
By the way, I just realized that another oddity is that it DOES run resizeItems every time because the icons on the homepage are always correct.
So I'm guessing I have a duplicate ID with id='logo'?
Leave a comment on switzer's reply
Re: Run script every time the page is shown
2 months ago
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.
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.
Re: Run script every time the page is shown
2 months ago
So I guess it's loading every page, and therefore doesn't know which id="logo" to change?
God... this is amazing knowledge.
I owe you a beer. Do you happen to live in North Florida!?
Leave a comment on watusiware's reply
Re: Run script every time the page is shown
2 months ago
JQM manages the loading of pages into the document. It removes pages when they are no longer needed.
However, the first page loaded always stays in the document. And when you change pages, it needs to have the exiting and entering pages in the document at the same time during the transition.
Every developer using JQM should use Firebug or Web Inspector to look at the document structure and understand what JQM is doing with loading pages into the document.
The JQM documentation needs to stop using IDs. Period. It's very misleading. You can use IDs if you are very, very careful with how you use them. It really is not worth the trouble. Use classes.
Note that your code will unnecessarily change the sizes of things on more than one page the way it is written, if you change from an ID to a class. But at least it will work.
However, the first page loaded always stays in the document. And when you change pages, it needs to have the exiting and entering pages in the document at the same time during the transition.
Every developer using JQM should use Firebug or Web Inspector to look at the document structure and understand what JQM is doing with loading pages into the document.
The JQM documentation needs to stop using IDs. Period. It's very misleading. You can use IDs if you are very, very careful with how you use them. It really is not worth the trouble. Use classes.
Note that your code will unnecessarily change the sizes of things on more than one page the way it is written, if you change from an ID to a class. But at least it will work.
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 switzer's question
Statistics
- 10 Replies
- 310 Views
- 1 Followers
