...

View Full Version : Time limit on JS loading box



andyph
08-20-2010, 09:08 PM
Hello,

Is there any way that I can add a limit for the amount of time that a javascript loader bar stays on screen?

The specific loading screen I am using is http://www.fliesen-info-spanien.net/loadbox.php.

This loading box actually activates once the page is loaded apparently, but in my instance, it is loading then disappearing in the matter of a second, but I wouldnt mind leaving it up for a couple of seconds, say 3-5.

Is there any line of code I can add to do this?

Andy

Philip M
08-21-2010, 08:47 AM
Is there any line of code I can add to do this?

Andy

It will require quite a bit more than "a line" of code, but it can be done quite easily if you have access to the source code.

In principle you will need to use the setTimeout() function.

function showBar() {
// code to show the loading bar
setTimeOut("hideBar()", 5000); // 5 seconds delay
}

function hideBar() {
// code to make the loading bar disappear
}


Quizmaster: The cape on which the Pilgrim Fathers landed in 1620 is named after which fish?
Contestant: Haddock

andyph
08-26-2010, 02:18 PM
I have provided the code below as there are a few bits in there that look like they may be able to do what you state Philip, but I'm not too sure, I've changed bits and tested but with no change.

I have left the copyright and licensing notices attached to avoid any issues.


/* This notice must be untouched at all times.
Copyright (c) 2010-2010 Frank Korner. All rights reserved.

loadbox.js v. 0.0

The latest version is available at
http://www.hotscripts.com/listing/loadbox-window/

Created 1.05.2010 by Frank Korner (Web: http://www.hotscripts.com/listing/loadbox-window/)
Last modified: 31.05.2010

Easy-to-use cross-browser loadbox.
Just include the script and css file at the <head> section of your html-document:
<link rel="stylesheet" href="/loadbox/loadbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/loadbox/loadbox.js"></script>
and
Into the a-tag where you want to show the Loading Screen Overlay
onclick = "load();"
or into the form-tag
onsubmit = "load();"

Important Note: The script is activated only after the page has finished loading!!! The LoadBox Script link may not be removed!!!

Tab Width: 4
LICENSE: LGPL

This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.

This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/

function load() {
a=setInterval("start_img()",60);
if(!window.opera){
document.getElementById("loadingImage").style.display = "none";
document.getElementById("loading_img").style.display = "block";
}
var hoehe=screen.height;
var breite=screen.width;
if(hoehe < document.body.clientHeight){
document.getElementById("darkenx").style.height = document.body.clientHeight+"px";
}
else{
document.getElementById("darkenx").style.height = hoehe+"px";
}
document.getElementById("darkenx").style.display = "block";
document.getElementById("loadbox").style.display = "block";
document.getElementById("message_string").innerHTML="Loading...";
}
function stop_load(){
if(self.stop) stop();
else if(document.execCommand) document.execCommand('Stop');
document.getElementById("message_string").innerHTML="Loading !! ABORTED !!";
if(window.a)clearInterval(a); //if(typeof(test1)!="undefined")
if(window.t)clearTimeout(t);
}
function quit() {
if(window.a)clearInterval(a); //if(typeof(test1)!="undefined")
if(window.t)clearTimeout(t);
document.getElementById("loadbox").style.display = "none";
document.getElementById("darkenx").style.display = "none";
}
function initLoadbox(){

if (!document.getElementsByTagName){ return; }
var anchors = document.getElementsByTagName("a");

for (var i=0; i<anchors.length; i++){
var anchor = anchors[i];

if (anchor.getAttribute("href") && (anchor.getAttribute("rel") == "loadbox")){
anchor.onclick = function () {load();}
}
}
}
function up() {
var y = 0;
if (window.pageYOffset) {
y = window.pageYOffset;
} else if (document.body && document.body.scrollTop) {
y = document.body.scrollTop;
}
if (y > 0) {
}
return y;
}
function clearinput(){document.getElementById("plain").value = ""; document.getElementById("plain").style.color = "#000000";}
function setinput(){if(document.getElementById("plain").value == ""){document.getElementById("plain").value = "Search term"; document.getElementById("plain").style.color = "#cfcfcf";} else return;}

var led1 = new Image(); // Image-Object
led1.src = "/loadbox/images/led1.gif"; // led1
var led2 = new Image(); // Image-Object
led2.src = "/loadbox/images/led2.gif"; // led2
var led3 = new Image(); // Image-Object
led3.src = "/loadbox/images/led3.gif"; // led3
var led4 = new Image(); // Image-Object
led4.src = "/loadbox/images/led4.gif"; // led4
function createDiv(){
var _body = document.getElementsByTagName("body") [0];
var _div = document.createElement("div");
var _div2 = document.createElement("div");
//---------------------------------table
var tbl = document.createElement("table");
var tblBody = document.createElement("tbody");
// creating all cells
for (var j = 0; j < 1; j++) {
// creates a table row
var row = document.createElement("tr");

for (var i = 0; i < 22; i++) {
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var cell = document.createElement("td");
// var cellText = document.createTextNode("cell is row "+j+", column "+i);
// cell.appendChild(cellText);
cell.innerHTML="<img name='Bild"+i+"' src='"+led1.src+"' />";
row.appendChild(cell);
}
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
_div2.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("id", "loading_img");
tbl.setAttribute("width", "268");
tbl.setAttribute("border", "0");
//--------------------------------table
var _adloadbox = document.createElement("a");
var _astop = document.createElement("a");
var _img_ad = document.createElement("img");
var _img = document.createElement("img");
var _p = document.createElement("p");
var _img_stop = document.createElement("img");
_adloadbox.setAttribute('id', 'adloadbox');
_adloadbox.setAttribute('href', 'http://www.hotscripts.com/listing/loadbox-window/');
_adloadbox.setAttribute('onmouseover', 'this.focus();');
_astop.setAttribute('id', 'astop');
_astop.setAttribute('href', 'javascript:quit()');
_astop.setAttribute('onmouseover', 'stop_load();');
_adloadbox.innerHTML="LoadBox Script";
_div.setAttribute('id', 'darkenx');
_div.setAttribute('onclick', 'quit();');
_div2.setAttribute('id', 'loadbox');
_div2.setAttribute('onclick', 'quit();');
_img_ad.setAttribute('id', 'AdBanner');
_img_ad.setAttribute('src', 'http://www.dolphinworld.net/banner/could-be-you.gif');
_img.setAttribute('id', 'loadingImage');
_img.setAttribute('src', '/loadbox/images/loading.gif');
_p.setAttribute('id', 'message_string');
_p.setAttribute('style', 'padding:10px');
_img_stop.setAttribute('id', 'stopclose');
_img_stop.setAttribute('src', '/loadbox/images/stop.png');
var _text = document.createTextNode("Loading...");
_p.appendChild(_text);
_div2.appendChild(_img_ad);
_div2.appendChild(_img);
_div2.appendChild(_p);
_astop.appendChild(_img_stop);
_div2.appendChild(_astop);
_div2.appendChild(_adloadbox); //adloadbox This link may not be removed!!!
_body.appendChild(_div);
_body.appendChild(_div2);
}

function start () {
createDiv();
quit();
initLoadbox();
//document.getElementById("plain").onfocus = clearinput;
//document.getElementById("plain").onblur = setinput;
}

var pos=0;
var richtung=true;
function start_img() {
if (document.images){

var i,led;

if(pos<0)richtung=true;
if(pos>20)richtung=false;
if(richtung)pos++;
if(!richtung)pos--;

for(i=0;i<=21;i++)
{
//New
if(i<=10)led=led2.src;
if(i>10 && i<=15)led=led3.src;
if(i>15)led=led4.src;
if(i>pos)led=led1.src;
//New
document.images["Bild"+i].src=led;
}
}
}
window.onload = start;
window.onunload=function(){t=setTimeout("quit()",10000000);}
window.onfocus=function(){quit();}
//document.onmousedown=function(){quit();}
document.onkeydown=function(){quit();}

function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}

andyph
08-27-2010, 04:02 PM
Can anyone see anything obvious within the code that I am most likely missing :)

andyph
09-02-2010, 07:33 PM
I am still stuck on this one :D Anyone have any clues?

I have changed/added certain parts etc but had no luck yet.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum