Scripts
Pagina wordt geladen

Door Bart van Asselt -17-06-2007 00:00 -8.594 views
Dit is een script dat tijdens het laden van de pagina "Bezig met laden" laat zien en de achtergrond wazig maakt. Het is helemaal naar je eigen smaak aan te passen d.m.v css. Vragen of opmerkingen hoor ik graag.
Download alle bestanden als ZIP
pagina-wordt-geladen
Tussen de <head> tags zet je:
[code]
<script language="javascript" type="text/javascript" src="http://pad/naar/common.js"></script>

		<script type="text/javascript">
<!--

function _body_onload()
{
	loff();
}

function _body_onunload()
{
	lon();
	
}
//-->
		</script>[/code]

Verander je body tag naar:
[code]
<body onLoad="_body_onload();" onUnload="_body_onunload();" id="mainCP">
[/code]
Dan het laad gedeelte (moet bovenaan de pagina komen direct na de body tag:
[code]
	<table border="0" cellspacing="0" cellpadding="0" id="loaderContainer" onClick="return false;">
  <tr>
  <td id="loaderContainerWH">
  <div id="loader">
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
  <td>
  <p>
  <strong>
  <img alt="laden" src=Site_bestanden/laden.gif />
  bezig met laden...
  </strong>
  </p>
  </td>
  </tr>
  </table>
  </div>
  </td>
  </tr>
  </table>
	<div class="screenBody" id="screenClient">
	De inhoud van je pagina
	</div>[/code]

Verander je <a href tags naar:
<a onclick="lon();go_to(); return false;" href=

[code]
=============common.js==========



//---------------------------------- Loading



function lsetup_handler(e)
{
	lsetup(this);
	return true;
}

function lsetup(target)
{
	try {
		if (!target)
			target = this;

		var o_set = target.document.getElementById('loaderContainerWH');
		var o_getH = target.document.getElementsByTagName('BODY')[0];

		o_set.style.height = o_getH.scrollHeight;
	} catch (e) {
	}
}

function lon(target)
{
	try {
		if (parent.visibilityToolbar)
			parent.visibilityToolbar.set_display("standbyDisplayNoControls");
	} catch (e) {}

	try {
		if (!target)
			target = this;

		lsetup(target);

		if (!target._lon_disabled_arr)
			target._lon_disabled_arr = new Array();
		else if (target._lon_disabled_arr.length > 0)
			return true;

		target.document.getElementById("loaderContainer").style.display = "";
		var select_arr = target.document.getElementsByTagName("select");

		for (var i = 0; i < select_arr.length; i++) {
			if (select_arr[i].disabled)
				continue;

			select_arr[i].disabled = true;
			_lon_disabled_arr.pop(select_arr[i]);
			var clone = target.document.createElement("input");
			clone.type = "hidden";
			clone.name = select_arr[i].name;
			var values = new Array();
			for (var n = 0; n < select_arr[i].length; n++) {
				if (select_arr[i][n].selected) {
					values[values.length] = select_arr[i][n].value;
				}
			}
			clone.value = values.join(",");
			select_arr[i].parentNode.insertBefore(clone, select_arr[i]);
		}
	} catch (e) {
		return false;
	}
	return true;
}

function loff(target)
{
	try {
		if (parent.visibilityToolbar) {
			parent.visibilityToolbar.set_display(visibilityCount
												 ? "standbyDisplay"
												 : "standbyDisplayNoControls");
		}
	} catch (e) {}

	try {
		if (!target)
			target = this;

		target.document.getElementById("loaderContainer").style.display = "none";

		if (target._lon_disabled_arr) {
			while(_lon_disabled_arr.legth > 0) {
				var select = _lon_disabled_arr.push();
				select.disabled = false;

				var clones_arr = target.document.getElementsByName(select.name);
				for (var n = 0; n < clones_arr.length; n++) {
					if ("hidden" == clones_arr[n].type)
						clones_arr[n].parent.removeChild(clones_arr[n]);
				}
			}
		}
	} catch (e) {
		return false;
	}
	return true;
}



MM_reloadPage(true);[/code]

======css aanpassing=======

[code]/* --- loader ---*/

#loader {
  width: 320px;
  margin-left: auto;
  margin-right: auto;
}

#loader td {
  padding: 3px;
  background: #ffffff;
}

#loader p {
  border:   5px solid #87CEEB;
  padding: 10px;
  margin: 0; 
  font-family:   arial, helvetica;
  font-size:   20px;
  letter-spacing:   -1px;
  border:   5px solid #87CEEB;
  color:   #87CEEB;
  left:   37%;
  top:   35%;
}



#loader strong {
  display: block;
  margin-bottom: 3px;
}

#loaderContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: expression('absolute');
  height: expression(document.documentElement.scrollHeight+'px');
  width: expression(document.documentElement.scrollWidth+'px');
  z-index: 1000;
}

#loaderContainer td {
	padding-top: 150px;
	vertical-align: top;
	text-align: center;
	background-image: url(http://www.bartvanasselt.nl/Site_bestanden/semi-transparent.gif;
}

#loaderContainer td td {
	padding-top: 3px;
	text-align: center;

}[/code]