Menu
When a page do a transition to another (and use the location.hash stuff) , this second page does not load any JavaScript. How can I execute JavaScript when a page is loaded (if this one "comes" from a transition from its parent) ?
I have page1.html, with a link to page2.html. This page2.html loads with a transition (slide effect by default).
In page2.html no JavaScript is executed. I tried with a simple
<script type="text/javascript">
alert("x");
</script>
but does not work. I tried with a lot of document.ready, bind, live, oncreate, pagecreate, and so on.
743
Method 1: Using onload method: The body of a webpage contains the actual content that is to be displayed. The onload event occurs whenever the element has finished loading. This can be used with the body element to execute a script after the webpage has completely loaded.
Projects In JavaScript & JQueryYes, you can use multiple versions of jQuery on the same page. To avoid any kind of conflict, use the jQuery.
jQuery Mobile is no longer supported.
Can you combine jQuery and JavaScript? It is possible to run jQuery and JavaScript together in you application. All you need to know is, which is a JavaScript Object when trying to run some methods of it. jQuery can be handy sometimes.
You could use a callback function. After the animation call a function.
in jQuery:
$('#yourElement').animate({
opacity: 0.25,
}, 5000, function() {
// Animation complete. add your callback logic here
});
If using Webkit transitions:
$('#yourElement').addEventListener(
'webkitTransitionEnd',
function( event ) {
// Animation complete. add your callback logic here
}, false );
And if using jQuery Mobile, it appears you can use the 'pageshow' and 'pagehide' event listeners:
http://jquerymobile.com/test/docs/api/events.html
$('div').live('pageshow',function(event, ui){
alert('This page was just hidden: '+ ui.prevPage);
});
$('div').live('pagehide',function(event, ui){
alert('This page was just shown: '+ ui.nextPage);
});
Basically in Jquerymobile when you do a page transition only the content inside
<div data-role="page">
...
</div>
gets changed so effectively all your scripts and everything you have included in
<head></head>
tags is not getting loaded.
So to solve this you need to include your script inside the page, like below
<div data-role="page">
...
<script type="text/javascript" src="yourScript.js"></script>
</div>
Thanks, Dinesh Parne
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
