Using a function with parameters as parameter

timvw — Tue, 04 Apr 2006 00:46:09 +0000

Imagine that you have a function that expects a reference to a function. Here is an example of such a function:

function bar(fn) { fn(); }

Now imagine that the function that you want to pass to bar accepts a parameter. Here is an example of such a function:

function foo(arg) { alert(arg); }

With the help of a closure this is no problem:

bar(function e() { foo('hello'); });

PS: Kudos go to Weirdan for providing the solution to this problem.

Image scroller

timvw — Thu, 01 Sep 2005 00:09:11 +0000

// +—————————————————————————

// | Author: Tim Van Wassenhove 

// |

// | A javascript picture scroller

// +—————————————————————————

var i = 0;

var pics = new Array();

// define the pictures you want to show (html id, image url, link url)

pics[i++] = new picture(‘pic’ + i, ‘/images/scroller/top03.jpg’, ‘http://www.microsoft.com’);

//pics[i++] = new picture(‘pic’ + i, ‘/images/scroller/top04.jpg’, ‘http://www.khleuven.be’);

pics[i++] = new picture(‘pic’ + i, ‘/images/scroller/top05.jpg’, ‘/rss.php’);

pics[i++] = new picture(‘pic’ + i, ‘/images/scroller/top11.jpg’, ”);

// define the sleep interval

var slow = 100;

/**

 * global variables

 */

var lastindex = pics.length;

var pause;

var pictures;

var offset;

var left;

/**

 * Scroll

 *

 * @param id the id in which the scroller should be drawn

 */

function scroller(id)

{

        // load pictures

        pictures = new Array(lastindex);        

        for (i = 0; i < lastindex; ++i)

        {

                pictures[i] = new Image();

                pictures[i].src = pics[i].pictureurl;

        }

        offset = document.getElementById(id).offsetLeft + 161;

        // attach pictures to html, display:none

        for (i = 0; i < lastindex; ++i)

        {

                purl = pics[i].pictureurl;

                lurl = pics[i].linkurl;

                pid = pics[i].id;

                ileft = 0;

                document.getElementById(id).innerHTML += ‘+ lurl + ‘"> + purl + ‘" id="’ + pid + ‘" style="display: none; position: absolute; left:’ + ileft + ‘px; top: 27px;"/>’;

        }

        // start

        pause = setInterval("start()", 500);    

}

/**

 * A container for a picture

 *

 * @param id the DOM id for this picture

 * @param imageurl the URL where the picture can be found

 * @param linkurl the URL where the user should be directed to if he clicks the picture

 */

function picture(id, pictureurl, linkurl)

{

        this.id = id;

        this.pictureurl = pictureurl;

        this.linkurl = linkurl;

}

/**

 * Determine of the pictures are ready to be displayed

 */

function ready()

{       

        // test if there is a picture that is not completely loaded

        for (i = 0; i < lastindex; ++i)

        {

                id = pics[i].id;

                if (!document.getElementById(id).complete)

                {

                        return false;

                }

        }

        return true;

}

/**

 * Do the actual scrolling

 */

function work()

{

        // move all the pictures to the left

        for (i = 0; i < lastindex; ++i)

        {

                left[i] -= 1;

                // if picture is out the container, position it at the right of the other pictures

                if (left[i] <= offset)

                {

                        n = i - 1;

                        if (n < 0)

                        {

                                n = lastindex - 1;

                        }

                        l = left[n];

                        l += pictures[n].width + 10;

                        left[i] = l;

                }

                id = pics[i].id;

                ileft = left[i];

                document.getElementById(id).style.left = ileft + ‘px’;

        }

}

/**

 * Start the scroller

 */

function start()

{

        if (ready())

        {

                window.clearInterval(pause);

                // calculate positions and make visible

                left = new Array(lastindex);

                for (i = 0; i < lastindex; ++i)

                {                       

                        l = offset;

                        for (n = 0; n < i; ++n)

                        {

                                l += pictures[n].width + 10;

                        }

                        left[i] = l;

                        id = pics[i].id;

                        ileft = left[i];

                        document.getElementById(id).style.display = ‘inline’;

                        document.getElementById(id).style.left = ileft + ‘px’;

                }

                // work 

                interval = setInterval(‘work();’, slow);

        }

}

Download the source for imagescroller.txt.

Tim Van Wassenhove » JavaScript

Using a function with parameters as parameter

Image scroller