Page OnLoad

Last time we investigate the Page onResize Event. This is a “window” event that is triggered when a user resized the browser window for any reason. We used this event to trigger a redraw of elements that exist with the Page environment we are creating.

When a user enters your web site, the page needs somewhere to trigger a start up or creation of elements. Usually people encode HTML5 elements in .html files such as index.html. Often PHP is scripted around the HTML5 elements like you see within a WordPress Theme Development. We are however only going to use Javascript to manage the output of our display.

To do this we use the windows events to trigger an initilisation or startup of your script the moment the window element is loaded into the browser window. To do this we use the onload event and attach it to the window elements handle.

We still need an index.html file to load our Javascript files which contain all our code, although this HTML5 page will contain no elements outside of the meta tags and script tags associated with the head of the document.

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<meta name="robots" content="all"> 
<meta charset="utf-8">

The beginning of a HTML5 document is defined by the DOCTYPE “html” whereas previous versions such as HTML3 or HTML4 had some difficult headers to remember. We can see that a meta tag defines the character set of the page, we do this to match the character set being used in the mySQL database so that text that is transferred across is the same foundation. This is followed by a meta tag used by search engines to define what content they can search. And lastly we define the chosen character set for use.

<script type="text/javascript" src="scripts/0-config.js"></script> 
...
<script type="text/javascript" src="scripts/5-page.js"></script> 

After the meta tag, we start to load our objects as seperate files. After development takes place we can shrink these files by taking out white spaces and cleaning up code so that all the text can be compiled into one or two files to be loaded.

A habit I picked up from one of my previous workplaces was to number the importance of the objects files so that their dependance on each other is more apparent for development. Lower numbered files dont rely on other files, where as higher numbered files might rely on multiple lower numbered files to run. Our Page object is the highest at 5, it becomes the parent of all the elements used throughout the script and web site.

If we were to keep to a strict Javascript output, we would begin to load our objects using the Javascript tags as follows. This might seem sensible, we can create a function that would take a single input that could define the loaded files. We actually do this for files that arent related to the initial startup.

this._elements.css = document.createElement("link");
this._elements.css.id = "pagestyle";
this._elements.css.type = "text/css";
this._elements.css.rel = "stylesheet";
this._elements.css.href = 
  Config._protocol + Config._host + Config._path + "/styles/mindmap.css";
document.getElementsByTagName("head")[0].appendChild(this._elements.css);

Instead, we load the first and initial CSS3 file in the index.html page. The reason will be very apparent if you test this scenario. Because the HTML page is rendered first, it preloads all the objects required to run the document in the window. This makes the CSS available at the document onload. If you load the first CSS3 file by the Javascript it is delayed until the load of the script and during its runtime. This causes your styles to be delayed for a very very short time, although its like a blink of the eye as the site changes from lacking styles to after loading the style sheet.

<link id="minmap" type="text/css" rel="stylesheet" href="styles/mindmap.css">

With the styles loaded and ready as the elements are created, the elements take on their styles at the time of their creation. This leaves no changes in display during the loading of any displayed elements.

This leaves us with a simple title tag, and the closes of the “document.head”. We can see here that the “document.body” is immediately closed with zero content, this page loaded at the moment will load a blank white document with no elements attached. The HTML5 document is then closed completing our index.html page.

<title>MindMap 0.1.0</title>
</head><body></body></html>

The document.title is added here because within our script, during the loading of objects or changes to our page object we can use script to change the Pages Title. This is then reflected on the browsers tab which contains the document window.

So how do we start the load and running of our script. Lets investigate what we did last time and expand on it.

function onresizer(){}
function onloader(){
	if (window.location.pathname === '/map/editor.html'){ Editor.start(); }
	else if (window.location.pathname === '/map/manager.html'){ Manager.start(); }
	else { Page.start(); }
}

We lasted added an OnResizer event that then triggered a timer to delay the final triggering of the onresize function within our Page script. This time we follow the same pattern except we are going to trigger the initialisation of the Page object and load of the sites elements within that Page object.

You can see we have created an onloader function that similar to the onresizer function detects the path currently active and ensure the corresponding pages start function is triggered. This is similar to the onResizer function we created last time. Currently we are just using the default index.html that loads our Page object, we can create other level 5 Page objects to load other display types.

start: function() {
	Page.setMeta();
	Page.setElements();

	Page.init();

	Page.prepare();
	Page.setTitle("by ProMantix");

}

Within our Page object we define the load and startup of our script. This sets out the body of the document which we left out earlier. We are loading everything in Javascript and maintaining the display purely with Javascript.

It is worth noting here, we do not use Jquery or any other libraries here, it is much much better to learn how to code using the base Javascript Language, this gives you a better grasp on how it actually works, and youll realise, everything Jquery does, you can do to.

So, now we have our onloader function within our Config Object and also now a start function in our Page Object. This is now where we trigger the first load of our Javascript to load our site. Similar to the onresizer function we are going to cascade through the windows handles looking for one to attach to.

if(window.addEventListener){ 
	window.addEventListener("load", onloader, false);
	window.addEventListener("resize", onresizer, false);
	window.addEventListener("orientationchange", onresizer, false);
}
else if (window.attachEvent){ 
	window.attachEvent("onload", onloader);
	window.attachEvent("onresize", onresizer);
	window.attachEvent("orientationchange", onresizer);
} 
else if (window.onload){
	window.onload = onloader;
	window.onresize = onresizer;
	window.onorientationchange = onresizer;
}

The function above now looks for the onload in the cascade. We add an Event Listener to the windows onload handle which triggers our onloader function which then calls on the Page.start(); function. The resize function is listening the entire time for a window change and as soon as one is triggered it fires every time it sees a move event in the mouse changing the browser window. It can also be triggered by a code command to change the windows size. The onload event however is only triggered once at the initial load of the window object. This is where we begin the script which will then through our control manage the window and document objects.

You can see in the above function that we have added the Orientation Change event handle, this is used by mobile devices when you change the orientation of your phone or tablets screen. ie when you turn it sideways and back again. The onresize event is not triggered in this case, because the mobile phones operating system is managing the change in screen size. The onorientationchange handle is used in the specific case use.

With these two functions defined in our Config File we can now code purely in our Javascript knowing that the Page,start will run the scripts, and the Page.resize will redraw them on any change event to the Page and the document and window.

Next time we will look more at the Page object and the functions we have already defined in the Page.start function above. Functions of the Page object we will begin to setout our Pages Body using document.body as we append the elements we will create, load and manage.

« »

1 comment

Leave a comment

Your email address will not be published. Required fields are marked *