Geek Answers Handbook

Jquery mobile screensaver with javascript

I try to avoid using this for a pop-up screen because it does not work on all devices and for other reasons:

<link rel="apple-touch-startup-image" href="img/splash.png" />

So, I'm trying to use this instead, and it works fine until it moves to a new page, after which it will again be treated as a splash screen (for example, it will be blank when the timer expires), in this case 4 seconds ). How can I stop / limit this behavior so that changePage will only remain on the splash page?

 <body> <div data-role="page" id="splash"> <div class="splash"> <img src="startup.jpg" alt="startup image" /> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(function() { setTimeout(hideSplash, 4000); }); function hideSplash() { $.mobile.changePage("#home", "fade"); } });//]]> </script> </div> </div> <div data-role="page" id="home"> <div data-role="header" data-backbtn="false"> <h1></h1> </div> <div data-role="content"> </div> </div> </body>
+7
source share
2 answers

Good idea is what I think. Use separate pages instead of multiple pages (multiple data-role = page). For index.html or index.php or whatever. Put your splash page. I will explain the reason for this later.

index.html

 <head> <!-- First include all jquery stuff --> <script src="app.js"></script><!-- external script because we can just include it in every page --> </head> <body> <div data-role="page" id="splash"> <div class="splash"> <img src="startup.jpg" alt="startup image" /> </div> </div> </body>

app.js

 $(document).on('pageinit','#splash',function(){ // the .on() method does require jQuery 1.7 + but this will allow you to have the contained code only run when the #splash page is initialized. setTimeout(function(){ $.mobile.changePage("home.html", "fade"); }, 4000); });

Well, that’s why I did it like that because it allows you to say that you have a navigation menu and you want to send people to the home page. You no longer have to show the splash page. You can just reference home.html. In addition, sharing your pages helps keep your home leaner. Hope this helps.

+9
source 
 <link rel="apple-touch-startup-image" href="img/splash.png" />

Valid only for Apple mobile devices.

The real pop-up screen should only be there to show you a nice image while you wait. Its purpose is not to make you wait for a real reason. In your case, it will take 4 seconds from the life of your users to make them look cool.

I changed your code and put it in jsfiddle : you will see that it works now. In order for the splash screen to display full width / height, edit css to remove the fields. I set the timer to 2s, which is more than enough, I think.

+3
source

More articles:


All Articles