SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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 ...

  2. #2
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have two closing braces in your second to last example. I have it working on my end.

    Quote Originally Posted by dodox View Post
    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&#180; 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.
    Last edited by synotic; Jul 1, 2007 at 06:56. Reason: Forgot the link

  6. #6
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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">
    <!-- saved from url=(0055)http://home.hetnet.nl/~hans-kuipers5/js/progressbar.htm -->
    <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...

  7. #7
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    addition: This lightbox require JS script prototpye 1.4.0

  8. #8
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


Bookmarks

Posting Permissions

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