Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    May 2009
    Location
    UK
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Time limit on JS loading box

    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

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by andyph View Post
    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
    Last edited by Philip M; 08-21-2010 at 08:10 AM.

  • #3
    New Coder
    Join Date
    May 2009
    Location
    UK
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Code:
    /* 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;
        }
      }
    }

  • #4
    New Coder
    Join Date
    May 2009
    Location
    UK
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Can anyone see anything obvious within the code that I am most likely missing

  • #5
    New Coder
    Join Date
    May 2009
    Location
    UK
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I am still stuck on this one Anyone have any clues?

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •