Executing JS function without <body onload="...">

**dodox** · Jun 30, 2007, 17:10

Hi, I need help from us

I have this JS file:

var a, b, xtime, clock, minute, second = 0;
var xlocation, m = "";

function initTimer(time, location)
{
m = document.getElementById("d2");
i = 125;
xlocation = location;
xtime = time;
clock = time;
//document.getElementById("d1").innerHTML="";
m.style.width=0;

clearTimeout(a);
clearTimeout(b);

startCount();
startProgressBar();

}

function startProgressBar()
{
if (i >= 0)
{
if (clock < 10)
{
m.style.background="red";
}
else
{
m.style.background="blue";
}

m.style.width=i+"px";
a = setTimeout("startProgressBar();", xtime/125*1000);
}
i--;
}

function startCount()
{

if (clock != 0)
{
minute = Math.floor(clock/60);
second = (clock-minute*60);
b = setTimeout('startCount();', 1000);
}
else
{
window.location.href = xlocation;
}
clock --;
showClock();
}

function showClock()
{
minute = minute.toString();
second = second.toString();

if (minute.length < 2)
{
minute = "0" + minute;
}
if (second.length < 2)
{
second = "0" + second;
}
document.getElementById("clock").innerHTML = minute + ":" + second;
}

Basicly, I need execute initTimer(time, location) function everytime If I refresh my browser, but I can´t use onload method...for example...
<body onload="initTimer(180, 'http://www.example.com');">

Is here somebody, who can solve that ?

Thanks a lot ...

**synotic** · Jun 30, 2007, 18:24

It's not completely clear (to me at least) exactly what you are trying to do. If you just want to achieve the same functionality within a script:

Code:

window.onload=function() {
	initTimer(10,'http://www.google.com/');
}

Is that what you're looking for?

**dodox** · Jul 1, 2007, 03:41

Yeh, but If I write this code this way:

....<body>
<script type='text/javascript'>
window.onload = function() {
initTimer(10, 'http://www.google.com');
}
}
</script>
....

it doesn´ twork

**dodox** · Jul 1, 2007, 04:10

addition:
This JS is generating clock (countdown) with progress bar (div with 125px width which is getting smaller with counted time). But I have problem, because I use lightbox script in the same page. And it doesn´ t work properly if I call both script. (I discover, problem is caused by the bod=document.getElementsByTagName('body')[0]; in lightbox script). If I delete lightbox (or command above), it works properly. But I need all of them

**synotic** · Jul 1, 2007, 07:51

You have two closing braces in your second to last example. I have it working on my end.

Originally Posted by dodox

addition:
This JS is generating clock (countdown) with progress bar (div with 125px width which is getting smaller with counted time). But I have problem, because I use lightbox script in the same page. And it doesn´ t work properly if I call both script. (I discover, problem is caused by the bod=document.getElementsByTagName('body')[0]; in lightbox script). If I delete lightbox (or command above), it works properly. But I need all of them

Can you post an example with both scripts? That line in and of itself wouldn't cause any conflict, but it's possible it affects something a few lines down.

What I'm guessing is that perhaps both scripts are calling an onload event, and one is overriding the other. If that's the case, just make sure your preload functions are wrapped as functions and call them with Simon Willison's onload-function-queue function (that's a mouthful!).

Good luck.

**dodox** · Jul 2, 2007, 12:59

thanks for reply synotic: I was reading article which u are linking. But I´m not so strong in JS. I´m really noobie

(noobie in using DOM

)
So here are both srcipts:

First one is lightbox (it´s lightbox without image - so it´s rather modalbox):

/*
Created By: Chris Campbell
Website: http://particletree.com
Date: 2/1/2006

Inspired by the lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
*/

/*-------------------------------GLOBAL VARIABLES------------------------------------*/

var detect = navigator.userAgent.toLowerCase();
var OS,browser,version,total,thestring;

/*-----------------------------------------------------------------------------------------------*/

//Browser detect script origionally created by Peter Paul Koch at http://www.quirksmode.org/

function getBrowserInfo() {
if (checkIt('konqueror')) {
browser = "Konqueror";
OS = "Linux";
}
else if (checkIt('safari')) browser = "Safari"
else if (checkIt('omniweb')) browser = "OmniWeb"
else if (checkIt('opera')) browser = "Opera"
else if (checkIt('webtv')) browser = "WebTV";
else if (checkIt('icab')) browser = "iCab"
else if (checkIt('msie')) browser = "Internet Explorer"
else if (!checkIt('compatible')) {
browser = "Netscape Navigator"
version = detect.charAt(8);
}
else browser = "An unknown browser";

if (!version) version = detect.charAt(place + thestring.length);

if (!OS) {
if (checkIt('linux')) OS = "Linux";
else if (checkIt('x11')) OS = "Unix";
else if (checkIt('mac')) OS = "Mac"
else if (checkIt('win')) OS = "Windows"
else OS = "an unknown operating system";
}
}

function checkIt(string) {
place = detect.indexOf(string) + 1;
thestring = string;
return place;
}

/*-----------------------------------------------------------------------------------------------*/

Event.observe(window, 'load', initialize, false);
Event.observe(window, 'load', getBrowserInfo, false);
Event.observe(window, 'unload', Event.unloadCache, false);

var lightbox = Class.create();

lightbox.prototype = {

yPos : 0,
xPos : 0,

initialize: function(ctrl) {
this.content = ctrl.href;
Event.observe(ctrl, 'click', this.activate.bindAsEventListener(this), false);
ctrl.onclick = function(){return false;};
this.activate();
},

// Turn everything on - mainly the IE fixes
activate: function(){
if (browser == 'Internet Explorer'){
this.getScroll();
this.prepareIE('100%', 'hidden');
this.setScroll(0,0);
this.hideSelects('hidden');
}
this.displayLightbox("block");
},

// Ie requires height to 100% and overflow hidden or else you can scroll down past the lightbox
prepareIE: function(height, overflow){
bod = document.getElementsByTagName('body')[0];
bod.style.height = height;
bod.style.overflow = overflow;

htm = document.getElementsByTagName('html')[0];
htm.style.height = height;
htm.style.overflow = overflow;
},

// In IE, select elements hover on top of the lightbox
hideSelects: function(visibility){
selects = document.getElementsByTagName('select');
for(i = 0; i < selects.length; i++) {
selects[i].style.visibility = visibility;
}
},

// Taken from lightbox implementation found at http://www.huddletogether.com/projects/lightbox/
getScroll: function(){
if (self.pageYOffset) {
this.yPos = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop){
this.yPos = document.documentElement.scrollTop;
} else if (document.body) {
this.yPos = document.body.scrollTop;
}
},

setScroll: function(x, y){
window.scrollTo(x, y);
},

displayLightbox: function(display){
$('overlay').style.display = display;
$('lightbox').style.display = display;
if(display != 'none') this.loadInfo();
},

// Begin Ajax request based off of the href of the clicked linked
loadInfo: function() {
var myAjax = new Ajax.Request(
this.content,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);

},

// Display Ajax response
processInfo: function(response){
info = "<div id='lbContent'>" + response.responseText + "</div>";
new Insertion.Before($('lbLoadMessage'), info)
$('lightbox').className = "done";
this.actions();
},

// Search through new links within the lightbox, and attach click event
actions: function(){
lbActions = document.getElementsByClassName('lbAction');

for(i = 0; i < lbActions.length; i++) {
Event.observe(lbActions[i], 'click', this[lbActions[i].rel].bindAsEventListener(this), false);
lbActions[i].onclick = function(){return false;};
}

},

// Example of creating your own functionality once lightbox is initiated
insert: function(e){
link = Event.element(e).parentNode;
Element.remove($('lbContent'));

var myAjax = new Ajax.Request(
link.href,
{method: 'post', parameters: "", onComplete: this.processInfo.bindAsEventListener(this)}
);

},

// Example of creating your own functionality once lightbox is initiated
deactivate: function(){
Element.remove($('lbContent'));

if (browser == "Internet Explorer"){
this.setScroll(0,this.yPos);
this.prepareIE("auto", "auto");
this.hideSelects("visible");
}

this.displayLightbox("none");
}
}

/*-----------------------------------------------------------------------------------------------*/

// Onload, make all links that need to trigger a lightbox active
function initialize(){
addLightboxMarkup();
lbox = document.getElementsByClassName('lbOn');
for(i = 0; i < lbox.length; i++) {
valid = new lightbox(lbox[i]);
}
}

// Add in markup necessary to make this work. Basically two divs:
// Overlay holds the shadow
// Lightbox is the centered square that the content is put into.
function addLightboxMarkup() {
bod = document.getElementsByTagName('body')[0];
overlay = document.createElement('div');
overlay.id = 'overlay';
lb = document.createElement('div');
lb.id = 'lightbox';
lb.className = 'loading';
lb.innerHTML = '<div id="lbLoadMessage">' +
'<p>Loading...</p>' +
'</div>';
bod.appendChild(overlay);
bod.appendChild(lb);
}

------------------------------------------------------------------------

Here is second one (it´s countdown sript with progress bar) - it´sJS sript with HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>Progressbar driven by javascript ( js ). DHTML HTML CSS Internet Explorer ( IE ) / Firefox ( FF ) / Mozilla / / Opera / Netscape ( NS ).</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META content="Progress Bar using javascript ( js ) and HTML ( DHTML )."
name=description>

<SCRIPT type=text/javascript>

var a, b, xtime, clock, minute, second = 0;
var xlocation = "";

function initTimer(time, location)
{
i = 125;
xlocation = location;
xtime = time;
clock = time;
//document.getElementById("d1").innerHTML="";
document.getElementById("d2").style.width=0;
clearTimeout(a);
clearTimeout(b);

startProgressBar();
startCount();
}

function startProgressBar()
{
if (i >= 0)
{
document.getElementById("d2").style.width=i+"px";
a = setTimeout("startProgressBar();", xtime/125*1000);
}
i--;
}

function startCount()
{

if (clock != 0)
{
minute = Math.floor(clock/60);
second = (clock-minute*60);
b = setTimeout('startCount();', 1000);
}
else
{
window.location.href = xlocation;
}
clock --;
showClock();
}

function showClock()
{
minute = minute.toString();
second = second.toString();

if (minute.length < 2)
{
minute = "0" + minute;
}
if (second.length < 2)
{
second = "0" + second;
}
document.getElementById("clock").innerHTML = minute + ":" + second;
}

</SCRIPT>
<body onload = "initTimer(30,'http://www.example.com')">

<span id="clock"></span>
<div id="empty" style="PADDING-RIGHT: 0px; WIDTH: 125px; HEIGHT: 8px; BACKGROUND-COLOR: white;float: left; position: relative;">
<div id="d1" style="width: 100%; border: 1px solid black; position: relative;">
<div id="d2" style="HEIGHT: 8px; width: 100%; BACKGROUND-COLOR: BLUE;">

</div></div></div>
<div style="float: left; margin: 0 0 0 5px"><INPUT type=button onClick="initTimer(30,'http://www.example.com');" value="Refresh">
</div>
</BODY></HTML>

------------------------------------------------------------------------
So that´s all. I repeat where is problem - I need execute countdown with progress bar (second one) with body onload or with clicking on refresh button. But It doesn´t work properly with onload (it work properly only with clicking on refresh button). Prblem is caused (on 99%) by lightbox script.

Thanks to all for solving my problem...

**dodox** · Jul 2, 2007, 13:07

addition: This lightbox require JS script prototpye 1.4.0

**Chroniclemaster1** · Jul 2, 2007, 13:35

I agree. I'm having some trouble understanding the code (I don't use browser/OS detects and my AJAX is pretty basic), so I wasn't able to do anything productive with it. But anytime someone says "onload" problems with multiple scripts I think of the Willison's code...

Although if he doesn't come up with a better name for it, I'm going to seriously consider going back to Scott Andrew's addEvent function. Expecting us to swallow a name like that just to include IE for Mac is bit much to ask I think.

The SitePoint Forums have moved.

User Tag List

Thread: Executing JS function without <body onload="...">

Thread Tools

Display

Executing JS function without <body onload="...">

Bookmarks

Bookmarks

Posting Permissions