Featured Post

The great debacle of healthcare.gov

This is the first time in history when the president of the United States of America, or probably for any head of state around the world,...

Wednesday, November 28, 2007

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()
"<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


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



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

No comments: