Javascript: Timer object

So, yesterday I was working on the UI for our category menus and needed a delay before displaying the menus.

Basically, I wanted to only show the dropdown menus if the user pauses the cursor over the menu in question.  To do this, I needed a timer object that I could start when the user first places the cursor over the menu title and cancel if they move on to quickly.

If you’ve ever used the setTimeout() and clearTimeout() functions that Javascript provides, you know that they don’t always work as advertised.  Especially when many are called very rapidly (as in the case of the user moving the cursor from one side of the screen to the other).  Using just these functions gave us some weird behavior (i.e. menus displaying when they shouldn’t).

To solve the problems we encountered, I created a timer object (sorely lacking in Javascript) that tracks its state so that it more reliably executes and cancels.

Below is the code for the object (requires prototype):

var timer = function(delay, callback){
    this.isRunning = false;
    this.hndl = null;
    this.delay = 0;
    this.callback = null;

    this.start = function(){
        if(!this.isRunning){
            this.hndl = setTimeout(this.callBackFunc.bind(this), this.delay);
            this.isRunning = true;
        }
    };

    this.stop = function(){
        if(this.isRunning){
            clearTimeout(this.hndl);
            this.hndl = null;
            this.isRunning = false;
        }
    };

    this.setDelay = function(d){
        this.delay = d * 1000;
    };

    this.setCallback = function(c){
        this.callback = c;
    };

    this.callBackFunc = function(){
        if(this.isRunning){
            this.isRunning = false;
            this.hndl = null;
            eval(this.callback);
        }
    };

    this.setCallback(callback);
    this.setDelay(delay);
};

You use it by creating a new instance of timer and calling the instance’s start() method for every action you want to delay.

Below are Parameter descriptions:

• delay: how long to wait before running the callback code (in seconds)
• callback: a string of Javascript code to execute after the delay

Example:

    <div onmouseover="myTimer = new timer(0.5, 'myfunction(5, 6, 7)'); myTimer.start();" onmouseout="if(myTimer){myTimer.stop();}">
        Some content
    </div>

The above code will start the timer when the user places the mouse over the div and cancel the action if the user moves the mouse out of the div before the timer has fired.

Javascript: Copy Text to Clipboard – Not anymore

In a previous post (Javascript: Copy Text to Clipboard), I described a method for using Javascript to copy text to a user’s clipboard.

Unfortunately, this method no longer works.  It relied on flash allowing script access to the user’s clipboard, and (with the release of flash 10) that is no longer the case.

Flash 10 requires that a user’s action originate in flash in order to gain access to the clipboard.  This means that IE is now the only browser that can access the clipboard from Javascript.  So unless IE is the only browser you care about, you’re out of luck using Javascript to access the clipboard.

The solution?  Write a flash application to handle copying data to the user’s clipboard.

Javascript: Copy Text to Clipboard

Update: this method no longer works.  For details: http://cthayer.wordpress.com/2009/02/26/javascript-copy-text-to-clipboard-not-anymore/

So, today we’re thinking that our users could benefit from some areas of our site auto-copying text to their clipboards so that they can just click and paste instead of copy, click, and paste.

IE has the handy window.clipboardData object which allows javascript direct access to the clipboard.  However, Mozilla/Firefox disables this functionality by default because of security concerns.  So, while the IE method works in Safari and Opera, it fails in Mozilla/Firefox and therefore we needed another way.

Turns out that while javascript is not allowed to access the clipboard, flash is.  So, by using flash and a little ajax magic you can create a copyToClipboard function in javascript that works in all browsers that support flash and ajax.

This code is posted on the web in many places and in this case it came from here:

function copyToClipboard(text) {
	var flashId = 'flashId-HKxmj5';

	/* Replace this with your clipboard.swf location */
	var clipboardSWF = 'http://appengine.bravo9.com/copy-into-clipboard/clipboard.swf';

	if (!document.getElementById(flashId)) {
		var div = document.createElement('div');
		div.id = flashId;
		document.body.appendChild(div);
	}

	document.getElementById(flashId).innerHTML = '';
	var content = '<embed src="' +
	clipboardSWF +
	'" FlashVars="clipboard=' + encodeURIComponent(text) +
	'" width="0" height="0" type="application/x-shockwave-flash"></embed>';

	document.getElementById(flashId).innerHTML = content;
}