Tips: Javascript

Adding text to the OS clipboard

function copyTextToClipboard()
{
var textElement = document.getElementById();
if (window.clipboardData && clipboardData.setData)
{
clipboardData.setData("key", textEelement.value);
}
}
In the onClick() event of the relevant command button would invoke this javascript function (javascript:copyTextToClipboard()). Then the text would be available in the clipboard and can be paste into any text editor.


Show page loading image

If it is a long processing in the server side, sometimes users are confused whether the page has been submitted or not. It becomes worst if the status bar is made hidden on the browser. So the user could submit the page again and again. In previous we were doing lots of hardwork to make the buttons uneditable or hidden immediatedly after clicking it or submitting the form. Now a days, the popular and smart solution of this is to showing some animated image that gives a illusion of loading the page or processing in server side. It can be achieved by a simple javascript method call.

i. Put the entire body content of your html page in a <div> tag with some name e.g. body
ii. Trap the onClick event of html button and call the below javascript method:

function submit()
{
document.forms[0].action="/submit.do";
document.forms[0].submit();
document.getElementById('body').innerHTML=
"<div style='position: absolute; left: 40%; top: 50%; '><img
src='/images/ajax-loader.gif' alt='This will display an animated GIF'/>
}

Confirmation dialogue box using Yahoo API

1. Get the required yahoo .js files from the yahoo site and put it into your page:
<script src="js/event.js"></script>
<script src="js/dragdrop.js"></script>
<script src="js/container.js"></script>
<script src="js/connection.js"></script>
<script src="js/animation.js"></script>

2. set the namespace

YAHOO.namespace("test");

3. Initialize the dialogue boxes:

YAHOO.test.confirmDialog = new YAHOO.widget.SimpleDialog("dialog", {visible:false,
width: "30em", effect:[}effect: YAHOO.widget.ContainerEffect.FADE, duration:0.2}],
fixedcenter:true, modal:true, draggable: true}); YAHOO.test.confirmDialog.setHeader("Confirmation"); YAHOO.test.confirmDialog.setBody("Do you confirm?"); YAHOO.test.confirmDialog.cfg.queueProperty("buttons", [{ text: "Ok", handler:handleOk, isDefault:true}, {text: "Cancel", handler:handleCancel"}]); var keyListener = new YAHOO.util.KeyListener(document, {keys:27},
{fn:handleCancel, scope:YAHOO.text.confirmDialog, correctScope:true}); YAHOO.test.confirmDialog.cfg.queueProperty(keyListeners", keyListheners); YAHOO.text.confirmDialog.render(document.body); YAHOO.util.Event.addListener(window, "load", init);

4. Write the handler functions

var handleCancel=function() { this.hide(); } var handleOk = function() { document.forms[0].submit(); this.hide(); }

5. Call the dialogues from the form

onclick=YAHOO.test.confirmDialog.show();

Resources

http://www.htmlgoodies.com/beyond/dhtml/ Good site to get DHTML tips