Need to refresh page to kickstart my code

Need to refresh page to kickstart my code

Hi guys,

I'm developing a simple app via PhoneGap as a means of learning Javascript. I've got a working script, but quite often when I load the page I need to refresh it to get the script to work.

For example, I have the below code (simplified) but when I load the page, initially all the "phase" DIV's are visible. Upon refresh, they work as expected.

Any suggestions? I tried a number of alternative triggers to $(document).ready() to no avail:

  1.             $(document).on('pagecreate', function() {
  2.             document.addEventListener('deviceready', function() {
  3.             document.onreadystatechange = function () {
  4.             $(window).load(function() {

I'm currently shortcutting it with <body onload="onLoad()"> and the function as follows:


function onLoad(){
    document.addEventListener("deviceready", onDeviceReady, false);
} 
Yet it seems to take a few seconds to load which doesn't look great, and while it was working fine earlier - it seems to have stopped working all of a sudden when I look at it in Safari (doing testing on the desktop and via PhoneGap)! So now I need to refresh to trigger the scripting...


$(document).ready(function() {
      $('.Phase').hide();
      ....
      ....
}  


<div class="Phase">stuff</div>