Bind vs Click Events in Jquery

Bind vs Click Events in Jquery.


Both perform the same function

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);

});

$('#foo').click(
  alert(message);
);

are same the only difference is you can unbind the event programmatically example

If someone wants to perform the event once and then not perform the event after

that on an element you will have to use bind instead of click and then unbind it 

later 

in the code.

Java Tiff Image Jpeg Image Png Image Convert

Java Tiff Image Jpeg Image Png Image Convert

package com.store.file;

import java.awt.Dimension;
import java.awt.image.BufferedImage;
import java.awt.image.RenderedImage;
import java.awt.image.renderable.ParameterBlock;
import java.io.BufferedWriter;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileWriter;
import java.io.IOException;
import java.net.URLEncoder;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Random;
import javax.imageio.ImageIO;
import org.apache.commons.codec.binary.Base64;
import org.apache.http.protocol.HTTP;

import com.sun.media.jai.codec.FileSeekableStream;
import com.sun.media.jai.codec.ImageCodec;
import com.sun.media.jai.codec.ImageDecoder;
import com.sun.media.jai.codec.SeekableStream;
import com.sun.media.jai.codec.TIFFDecodeParam;

import javax.media.jai.JAI;
import javax.media.jai.NullOpImage;
import javax.media.jai.OpImage;
import javax.media.jai.PlanarImage;

public class PutImageIntoXml {
    public static int DISPLAY_WIDTH = 100;
    public static String transferImage(String storeLocation, String imageName,
            String claimNumber) throws IOException {
        ByteArrayOutputStream stream = null;
        String imageXmlFile = null;
        System.out.println("\nStoreLocation:" + storeLocation);
        System.out.println("\nImage Name:" + imageName);
        String[] contents = imageName.split("\\.");
      
        if (contents.length == 2) {
            if (contents[1].equals("tiff") || contents[1].equals("tif")) {
                try {
                    SeekableStream s = new FileSeekableStream(storeLocation
                            + imageName);
                    TIFFDecodeParam param = null;
                    ImageDecoder dec = ImageCodec.createImageDecoder("tiff", s,
                            param);
                    ArrayList<ByteArrayOutputStream> bytecontents= new ArrayList<ByteArrayOutputStream>();
                    int numofpages = dec.getNumPages();
                    System.out.println(numofpages);
                    for (int i=0; i< numofpages; i++) {
                    RenderedImage op = new  NullOpImage(dec.decodeAsRenderedImage(i),null,null,OpImage.OP_COMPUTE_BOUND);
                    stream = new ByteArrayOutputStream();
                    int width = op.getWidth();
                    int height = op.getHeight();
                    double conversionFactor = (double)DISPLAY_WIDTH / (double)width;
                    float conversionFactor_ = DISPLAY_WIDTH / width;
                    int thumbHeight = (int)((double)height * conversionFactor);
                    int thumbWidth = (int)((double)width * conversionFactor);
                    Dimension dim = new Dimension(thumbHeight, thumbWidth);              
                    JAI.setDefaultRenderingSize(dim);
                    JAI.setDefaultTileSize(dim);
                    JAI.create("encode", op, stream, "tiff");
                    bytecontents.add(stream);
                    }
                    StringBuffer encodedImage = new StringBuffer();
                    int numberofpages = bytecontents.size();
                    for(int i=0;i<numberofpages;i++){
                    stream = bytecontents.get(i);
                    byte[] b = stream.toByteArray();
                    encodedImage =encodedImage.append(Base64.encodeBase64String(b));
                    }
                    imageXmlFile =createImageXML(storeLocation, encodedImage.toString(),
                            claimNumber);
                    System.out.println(imageXmlFile);
                    imageXmlFile=URLEncoder.encode(imageXmlFile,HTTP.UTF_8);
                } catch (Exception e) {
                    e.printStackTrace();
                System.out.println("Some problem with image");
                } finally {
                    stream.close();
                }
            } else {
                try {
                    BufferedImage img = ImageIO.read(new File(storeLocation
                            + imageName));
                    stream = new ByteArrayOutputStream();
                    ImageIO.write(img, "png", stream);
                    stream.flush();
                    String encodedImage = Base64.encodeBase64String(stream
                            .toByteArray());
                    imageXmlFile = createImageXML(storeLocation, encodedImage,
                            claimNumber);
                } catch (Exception e) {
                } finally {
                    stream.close();
                }
                return imageXmlFile;
            }
        }
        return imageXmlFile;

    }

    public static String createImageXML(String storeLocation,
            String encodedImage, String claimNumber) {
        StringBuffer out = null;
        Calendar cal = Calendar.getInstance();
        SimpleDateFormat sdf = new SimpleDateFormat(DATE_FORMAT_NOW);
        Random randomGenerator = new Random();
        int randomInt = randomGenerator.nextInt(100);
        try {
            String timeFileSent = sdf.format(cal.getTime());
            out = new StringBuffer();
            out.append("<ABC>");
            out.append("<Document>");
            out.append(encodedImage);
            out.append("</Document>");
            out.append("<WorkType>Documentation</WorkType>");
            out.append(" </ABC>");
            System.out.println("\nWrote the file");
        } catch (Exception e) {
            System.err.println("Error: " + e.getMessage());
        } finally {
        }
        return out.toString();
    }

    public static String[] splitStoreLocationAndImageName(String imageName) {
        String[] storeAndImage = new String[2];
        System.out.println("\nImageName:" + imageName);
        int lastIndex = imageName.lastIndexOf("/");
        System.out.println(lastIndex);
        storeAndImage[0] = imageName.substring(0, lastIndex + 1);
        System.out.println();
        storeAndImage[1] = (imageName.substring(lastIndex + 1));
        return storeAndImage;
    }

    public static final String DATE_FORMAT_NOW = "yyyy-MM-ddHH:mm:ss:";
}

Delete all files of directory using Php

<?php
$dir= "/opt/liferay/6.0.4/test2";
   
class Deletefile{
function deleteDirectory($dir) {
    if (!file_exists($dir)) return true;
    if (!is_dir($dir) || is_link($dir)) {
         chmod($dir, 0777);
        return unlink($dir);}
        foreach (scandir($dir) as $item) {
            if ($item == '.' || $item == '..') continue;
            if (!self::deleteDirectory($dir . "/" . $item)) {
                chmod($dir . "/" . $item, 0777);
                if (!self::deleteDirectory($dir . "/" . $item)) return false;
            };
        }
        return rmdir($dir);
    }

}

$df = new Deletefile();
$df->deleteDirectory($dir);
echo "Reached here";

Read a file in Java

public static String readFile(){
        System.out.println("Reading Dummy file");
        StringBuilder contents = new StringBuilder();
        File aFile = new File("/opt/liferay/6.0.4/test.xml");
        try {
              BufferedReader input =  new BufferedReader(new FileReader(aFile));
              try {
                String line = null;
                while (( line = input.readLine()) != null){
                  contents.append(line);
                  contents.append(System.getProperty("line.separator"));
                }
              }
              finally {
                input.close();
              }
            }
            catch (IOException ex){
              ex.printStackTrace();
            }
           
    return contents.toString();

    }

Simple AUI Dialog Box Example

Simple AUI Dialog Box Example

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/yui-min.js" type="text/javascript"></script>
<script src="/js/aui-base-min.js" type="text/javascript"></script>

<script type="text/javascript">
    function call() {
        document.getElementById("success").submit();
    }
    $(document).ready(function(){
           $('.go_btn').click(function(e) {
              e.preventDefault();
              if (
                      ($("#aui-3-1-1-199 option:selected").text() != "--Please Select--")&&
                      ($("#aui-3-1-1-194 option:selected").text() != "--Please Select--")&&
                      ($("#aui-3-1-1-199 option:selected").text() != "")&&
                      ($("#aui-3-1-1-194 option:selected").text() != "")&&
                      ($("#aui-3-1-1-199 option:selected").val() != 0)&&
                      ($("#aui-3-1-1-194 option:selected").val() != 0)
              )
              {
                 $('.makeform').submit();
              } else {
                  AUI().ready("aui-dialog","aui-overlay-manager","dd-constrain","event",function(A){
                      var d=new A.Dialog({title:"Error",bodyContent:"Please select  Manufacturer and Model from the list",
                          modal:true,resizable:false,width:275,height:88,centered:true}).render();
              });
              }
           });
        });
   
</script>

2 level Select using JQuery

2 level Select using JQuery



 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="/js/yui-min.js" type="text/javascript"></script>
<script src="/js/aui-base-min.js" type="text/javascript"></script>

<div id="login_area">
<select id="aui-3-1-1-194">
    <option value="">---Please Select---</option>
    <option value="Acer">Acer</option>
    <option value="Apple">Apple</option>
    <option value="AT&T">AT&T</option>
    <option value="Dell">Dell</option>
    <option value="HTC">HTC</option>
    <option value="LG">LG</option>
    <option value="Motorola">Motorola</option>
    <option value="Nokia">Nokia</option>
    <option value="Novatel Wireless">Novatel Wireless</option>
    <option value="Option">Option</option>
    <option value="Pantech">Pantech</option>
    <option value="Palm">Palm</option>
    <option value="RIM">RIM</option>
    <option value="Samsung">Samsung</option>
    <option value="Sharp">Sharp</option>
    <option value="Sony Erricsson">Sony Ericsson</option>
    <option value="Other">Other</option>
</select> <select id="aui-3-1-1-199"></select>
<input class="go_btn" id="device_go" type="submit" value="" /></div>
<script type="text/javascript">
    jQuery(document).ready(function() {

                        function arrwalk(e) {
                            for ( var i = 0; i < e.length; i++) {
                                jQuery('#aui-3-1-1-199').append(
                                        jQuery('<option></option>').val(e[i])
                                                .html(e[i]));
                            }
                        }

                        var acer = [ '--Please Select--', 'Aspire' ];
                        var apple = [ '--Please Select--', 'iPhone 3GS', 'iPhone 4','iPad' ];
                        var dell = [ '--Please Select--', 'Aero', 'Inspiron Mini' ];
                        var htc = [ '--Please Select--', 'Aria (A636)', 'Tilt 2', 'Surround' ];
                        var lg = [ '--Please Select--', 'Adrenaline', 'Encore 550', 'Neon', 'Quantum', 'Vu Plus' ];
                        var motorola = [ '--Please Select--', 'Backflip MB300', 'Bravo', 'Flipout', 'Flipside' ];
                        var nokia = [ '--Please Select--', '2330', '2720', '6350' ];
                        var novatel = [ '--Please Select--', 'Mifi 2372' ];
                        var option = [ '--Please Select--', 'Velocity' ];
                        var palm = [ '--Please Select--', 'Pixi Plus', 'Pre Plus' ];
                        var pantech = [ '--Please Select--', 'Breeze II P2000','Impact P7000', 'Link P7040', 'Pursuit P9020' ];
                        var rim = [ '--Please Select--', 'Curve 8520', 'Curve 8900', 'Pearl 3G', 'Curve 9300', 'Bold 9700', 'Torch 9800' ];
                        var samsung = [ '--Please Select--', 'Captivate i897', 'Go N310', 'Jack', 'SGH-A777', 'Flight A797', 'Focus SGH-i917', 'Galaxy Tab', 'Impression', 'Mythic A897', 'Rugby II A847', 'Strive A687' ];
                        var sharp = [ '--Please Select--', 'FX' ];
                        var att = [ '--Please Select--', 'USB Sierra Lightning', '3G Microcell' ];
                        var sony = [ '--Please Select--', 'SEMC Xperia X10', 'Vivaz' ];
                        var other = [ '--Please Select--', 'Other' ];

                        jQuery('#aui-3-1-1-194').change(
                                function() {
                                    jQuery('#aui-3-1-1-199').empty();
                                    var manvalue = jQuery(
                                            '#aui-3-1-1-194 :selected').text();
                                    switch (manvalue) {
                                    case "Acer":
                                        arrwalk(acer);
                                        break;
                                    case "Apple":
                                        arrwalk(apple);
                                        break;
                                    case "AT&T":
                                        arrwalk(att);
                                        break;
                                    case "Dell":
                                        arrwalk(dell);
                                        break;
                                    case "HTC":
                                        arrwalk(htc);
                                        break;
                                    case "LG":
                                        arrwalk(lg);
                                        break;
                                    case "Motorola":
                                        arrwalk(motorola);
                                        break;
                                    case "Nokia":
                                        arrwalk(nokia);
                                        break;
                                    case "Novatel Wireless":
                                        arrwalk(novatel);
                                        break;
                                    case "Option":
                                        arrwalk(option);
                                        break;
                                    case "Palm":
                                        arrwalk(palm);
                                        break;
                                    case "Pantech":
                                        arrwalk(pantech);
                                        break;
                                    case "RIM":
                                        arrwalk(rim);
                                        break;
                                    case "Samsung":
                                        arrwalk(samsung);
                                        break;
                                    case "Sharp":
                                        arrwalk(sharp);
                                        break;
                                    case "Sony Ericsson":
                                        arrwalk(sony);
                                        break;
                                    case "Other":
                                        arrwalk(other);
                                        break;
                                    }
                                });
                        jQuery('#aui-3-1-1-199').change(
                                   function() {
                                            var phone = jQuery(
                                                    '#aui-3-1-1-194 :selected')
                                                    .text()
                                                    + jQuery(
                                                            '#aui-3-1-1-199 :selected')
                                                            .text();
                                            var prodId = "";
                                            var phoneUrl = "";
                                            var articleId = "a_id/6579/c/277";
                                            var phoneImage = "";
                             
                                            switch (phone) {
                                            case "DellAero":
                                          
                                            case "OtherOther":
                                          
  break;
                                            default:
                                                break;
                                            }
                                            jQuery('#hurl').val(phoneUrl);
                                           :selected').text());
                                            jQuery('#hmodel').val(jQuery('#aui-3-1-1-199 :selected').text());

                                        });
                    });
</script>
</form>
</div>
<%
    } else {
%>
<div id="login_area">
<form id="success" action="https://blabla"
    method="post" class="success">

<div id="choose_device">
<div class="entry_text"><em>Please choose the enrolled
device.<img alt="" class="tooltip_trigger"
    src="/mts-theme/images/mts/tooltip_icon.jpg"
    style="width: 18px; height: 18px;" /></em>
<div class="tooltip"></a></em></div>

</div>
<select id="aui-3-1-1-194">
    <option value="<%=make%>" selected="selected"><%=make%></option>
    <option value="">---Please Select---</option>
</select> <select id="aui-3-1-1-199">
    <option value="<%=model%>" selected="selected"><%=model%></option>
    <option value="">---Please Select---</option>
</select> <input class="go_btn" id="device_go" type="submit" value="" /></div>
</form>
</div>
<body onLoad="call()">
</body>
<%
    }
%>

Java Excel Csv File

 Java Excel Csv File

First Convert the excel file into the .csv file and then read through

public static ArrayList<CsvBean> setUpMakeAndModel(String storeLocation) {
        System.out.println("Updating the bean list");
        beanList=new ArrayList<CsvBean>();
        try {
            File file = new File("/..localtion to the file/device.csv");
            BufferedReader bufRdr = new BufferedReader(new FileReader(file));
            String line = null;
            while ((line = bufRdr.readLine()) != null) {
                CsvBean cb = new CsvBean();
                int col=0;
                String[] rowContents=new String[9];
                StringTokenizer st = new StringTokenizer(line, ",");
                while (st.hasMoreTokens()) {
                    rowContents[col] = st.nextToken();
                    col++;
                    if(col==9){
                        break;
                    }
                }
                cb.iD=rowContents[0]==null?"":rowContents[0];
                cb.brand=rowContents[1]==null?"":rowContents[1];
                cb.equipmentMaster=rowContents[1]==null?"":rowContents[2];
                cb.make=rowContents[3]==null?"":rowContents[3];
                cb.model=rowContents[4]==null?"":rowContents[4];
                cb.image=rowContents[5]==null?"":rowContents[5];
                cb.productID=rowContents[6]==null?"":rowContents[6];
                cb.articleID=rowContents[7]==null?"":rowContents[7];
                cb.url=rowContents[8]==null?"":rowContents[8];
                beanList.add(cb);
            }
            bufRdr.close();
        } catch (Exception e) {
            System.out.println("Location of the device list not recognized");
            return null;
        }
        return beanList;

Add Delete User

Every user who has access to a Linux system needs a login and a password. Each user must belong to a primary group and for security or access purposes can belong to several secondary groups.
In order to create new logins, modify or delete users, you must already be logged in as root.  The root login is the highest level and only certain individuals should have access to the root account.

useradd - Adding a new user

Options:

• -d home directory
• -s starting program (shell)
• -p password
• -g (primary group assigned to the users)
• -G (Other groups the user belongs to)
• -m (Create the user's home directory

Example: To add a new user with

• a primary group of users
• a second group mgmt
• starting shell /bin/bash
• password of xxxx
• home directory of roger
• create home directory
• a login name of roger

useradd -gusers -Gmgmt -s/bin/shell -pxxxx -d/home/roger -m roger

top of page

---

usermod - Modifying existing user

Options:

• -d home directory
• -s starting program (shell)
• -p password
• -g (primary group assigned to the users)
• -G (Other groups the user belongs to)

Example: To add the group 'others' to the user roger

usermod -Gothers roger

top of page

---

userdel - Deleting a user

Options:

• -r (remove home directory)

Example: To remove the user 'roger' and his home directory

userdel -r roger

top of page

---

passwd - User's Password

Options:

• user's name (Only required if you are root and want to change another user's password)

Example: To change the password for the account you are currently logged in as...

passwd
Enter existing password
Enter new password
Enter new password again (to validate)

Example: To change the password for the user 'roger' (only you are logged in as root)...

passwd roger
Enter existing password (can be either roger's password or root's password)
Enter new password
Enter new password again (to validate)

top of page

---

Where user and group information stored User names and primary groups are stored in /etc/passwd. This file can be directly edited using the 'vi' editor, although this is not recommended. Format of the file is...

• User (name normally all lower case)
• Password (encrypted - only contains the letter 'x')
• User ID (a unique number of each user)
• Primary Group ID
• Comment (Normally the person's full name)
• Home directory (normally /home/<user name>
• Default shell (normally /bin/bash)

Each field is separated by a colon.
Passwords for each user are stored in /etc/shadow. This file should only be changed using the passwd command.
Group information is stored in /etc/group. This file can be directly edited using the 'vi' editor. Format of the file is...

• Group name
• Group password (hardly ever used)
• Group ID
• User names (separated by commas)

Each field is separated by a colon.

Default files

When a new user is created, the default files and directories that are created are stored in /etc/skel.
This directory can be modified to fit your needs. Modifications only effect new

---

su - Switch User To switch to another user, use the su command. This is most commonly used to switch to the root account.
Example: To switch to root account...
su
Enter root's passwd
Example: To switch to the user 'roger'...
su roger
Enter roger's or root's passwd
To return to original user, enter exit

SSH Login Steps Including Installation on Ubuntu

 First Install

sudo apt-get install openssh-client openssh-server

Since SSH (Secure Shell) scans are so common anymore I wanted to add better protection to my server so I configured SSH to only allow logins with public & private keys instead of password authentication. This is how I set it up on Ubuntu however it should work on any version of Linux. Don't be afraid of the length of this tutorial it's really pretty simple and only a few commands. This HowTo ended up longer than I anticipated because I wanted to explain each step as best I could.

This HowTo assumes that you already have SSH installed properly.

The first thing we need to do is generate the key pair. On your host computer go to "Applications">"System Tools">"Terminal" note this is your regular user terminal not a root terminal. Enter the following command at the terminal.

username@ubuntu:~$ ssh-keygen -t dsa

Generating public/private dsa key pair.
Enter file in which to save the key (/home/username/.ssh/id_dsa):

Enter passphrase (empty for no passphrase):
Enter same passphrase again:

Your identification has been saved in /home/username/.ssh/id_dsa.
Your public key has been saved in /home/username/.ssh/id_dsa.pub.
The key fingerprint is:
5b:ab:73:32:9e:b8:8c:4b:29:dc:2a:2b:8c:2f:4e:45 username@ubuntu

As you see above I chose the default location for the keys which is in the .ssh/ directory in your home directory. At the "Enter passphrase" prompt enter a strong password. This password is needed to use the key so this adds some security in case your private key ever gets stolen. Your private key needs to be protected.

This will generate a DSA (http://www.rsasecurity.com/rsalabs/node.asp?id=2239) key pair. If you notice I say pair it generates a private key id_dsa and your public key id_dsa.pub which we will copy to the server.

Next we need to copy the public key to the server.

username@ubuntu:~$ cd .ssh/

This moves you into .ssh directory where the keys were saved. Now to copy the public key to the server.

username@ubuntu:~$ scp id_dsa.pub serverusername@192.168.1.40:./id_dsa.pub

id_dsa.pub 100% |************************************************* ****|
614 00:00

The "scp" command allows files to be copied to/from a remote server using the SSH protocol to establish a secure connection and to encrypt all data passing between the client and the server.

Now that we copied the public key to the server we have to install the key in the proper directory. To do this login to the server using ssh and your usual password. We still aren't using public key authentication yet but we are close. Once logged into the server issue the following command in the terminal. Note you don't need to be logged in as root just login with your normal user account.

username@server:~$ cd .ssh
serverusername@server:~$ touch authorized_keys2
serverusername@server:~$ chmod 600 authorized_keys2
serverusername@server:~$ cat ../id_dsa.pub >> authorized_keys2
serverusername@server:~$ rm ../id_dsa.pub

Ok so here we set the file permissions to 600 which is gives only the owner read and write access. Then we added the key to the file called authorized_keys2. Note it's important to use the >> because that adds the key to the file without any line breaks. Then finally we removed the key id_dsa.pub from the server. Now if you logout and log back in you should see that you are using the key authentication as shown below.

username@ubuntu:~$ ssh -l serverusername 192.168.1.40
Enter passphrase for key '/home/serverusername/.ssh/id_dsa':
Linux everest 2.6.10-5-386 #1 Tue Apr 5 12:12:40 UTC 2005 i686 GNU/Linux

The programs included with the Ubuntu system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.

Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.
You have new mail.
Last login: Mon Apr 25 19:43:43 2005 from 192.168.1.15
serverusername@everest:~$

There is one more step and that is to disable password authentication on the server. Once this is set the only way to login will be with private and public keys. In order to accomplish this we have to change a line in the ssh_conf file on the server. The ssh_con file is located in the following location on the server /etc/ssh/ssh_config. Once in the file look for the following line:

# PasswordAuthentication yes

Change to:

PasswordAuthentication no
UsePAM no

Hover using Java Script Example

<html>
<head>
<style type="text/css">

#coolmenu{
border: 1px solid black;
width: 170px;
background-color: #E6E6E6;
}

#coolmenu a{
font: bold 13px Verdana;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black;
text-decoration: none;
border-bottom: 1px solid black;
}

html>body #coolmenu a{ /*Non IE rule*/
width: auto;
}

#coolmenu a:hover{
background-color: black;
color: white;
}
c
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}

</style>

<script type="text/javascript">

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script>

<div id="coolmenu">
<a href="http://www.javascriptkit.com" onMouseover="showtext('JavaScript tutorials and scripts!')" onMouseout="hidetext()">JavaScript Kit</a>
<a href="http://www.javascriptkit.com/cutpastejava.shtml" onMouseover="showtext('300+ free JavaScripts')" onMouseout="hidetext()">Free JavaScripts</a>
<a href="http://www.javascriptkit.com/jsref/" onMouseover="showtext('Comprehensive JavaScript Reference')" onMouseout="hidetext()">JavaScript Reference</a>
<a href="http://www.codingforums.com" onMouseover="showtext('Web coding and development forums!')" onMouseout="hidetext()">Coding Forums</a>
<a href="http://www.dynamicdrive.com" onMouseover="showtext('Award winning DHTML and JavaScripts')" onMouseout="hidetext()">Dynamic Drive</a>
<div id="tabledescription"></div>
</div>
</body>
</html>

Pop Up Dialog Box Example using Jquery

<html>
<head>
<STYLE type="text/css">
/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden { display: none; }
.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }


/* Interaction Cues
----------------------------------*/
.ui-state-disabled { cursor: default !important; }


/* Icons
----------------------------------*/

/* states and images */
.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


/*
 * jQuery UI CSS Framework @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Theming/API
 *
 * To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana,Arial,sans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=03_highlight_soft.png&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=01_flat.png&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=02_glass.png&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=02_glass.png&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=02_glass.png&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=01_flat.png&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
 */


/* Component containers
----------------------------------*/
.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { border: 1px solid #d3d3d3; background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #555555; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555; text-decoration: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { border: 1px solid #999999; background: #dadada url(images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121; text-decoration: none; }
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x; font-weight: normal; color: #212121; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121; text-decoration: none; }
.ui-widget :active { outline: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight  {border: 1px solid #fcefa1; background: #fbf9ee url(images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x; color: #363636; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a { color: #363636; }
.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error {border: 1px solid #cd0a0a; background: #fef1ec url(images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x; color: #cd0a0a; }
.ui-state-error a, .ui-widget-content .ui-state-error a, .ui-widget-header .ui-state-error a { color: #cd0a0a; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error-text { color: #cd0a0a; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

/* Icons
----------------------------------*/

/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(images/ui-icons_222222_256x240.png); }
.ui-state-default .ui-icon { background-image: url(images/ui-icons_888888_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-active .ui-icon {background-image: url(images/ui-icons_454545_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(images/ui-icons_2e83ff_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(images/ui-icons_cd0a0a_256x240.png); }

/* positioning */
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-off { background-position: -96px -144px; }
.ui-icon-radio-on { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-top { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
.ui-corner-bottom { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-right {  -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.ui-corner-left { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
.ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

/* Overlays */
.ui-widget-overlay { background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); }
.ui-widget-shadow { margin: -8px 0 0 -8px; padding: 8px; background: #aaaaaa url(images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x; opacity: .30;filter:Alpha(Opacity=30); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }/*
 * jQuery UI Resizable @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Resizable#theming
 */
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}/*
 * jQuery UI Selectable @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Selectable#theming
 */
.ui-selectable-helper { position: absolute; z-index: 100; border:1px dotted black; }
/*
 * jQuery UI Accordion @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Accordion#theming
 */
/* IE/Win - Fix animation bug - #4615 */
.ui-accordion { width: 100%; }
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }/*
 * jQuery UI Autocomplete @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Autocomplete#theming
 */
.ui-autocomplete { position: absolute; cursor: default; }   

/* workarounds */
* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

/*
 * jQuery UI Menu @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Menu#theming
 */
.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}
/*
 * jQuery UI Button @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Button#theming
 */
.ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
.ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
.ui-button-icons-only { width: 3.4em; }
button.ui-button-icons-only { width: 3.7em; }

/*button text element */
.ui-button .ui-button-text { display: block; line-height: 1.4;  }
.ui-button-text-only .ui-button-text { padding: .4em 1em; }
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: .4em; text-indent: -9999999px; }
.ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 1em .4em 2.1em; }
.ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: .4em 2.1em .4em 1em; }
.ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
/* no icon support for input elements, provide padding by default */
input.ui-button { padding: .4em 1em; }

/*button icon element(s) */
.ui-button-icon-only .ui-icon, .ui-button-text-icon-primary .ui-icon, .ui-button-text-icon-secondary .ui-icon, .ui-button-text-icons .ui-icon, .ui-button-icons-only .ui-icon { position: absolute; top: 50%; margin-top: -8px; }
.ui-button-icon-only .ui-icon { left: 50%; margin-left: -8px; }
.ui-button-text-icon-primary .ui-button-icon-primary, .ui-button-text-icons .ui-button-icon-primary, .ui-button-icons-only .ui-button-icon-primary { left: .5em; }
.ui-button-text-icon-secondary .ui-button-icon-secondary, .ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }
.ui-button-text-icons .ui-button-icon-secondary, .ui-button-icons-only .ui-button-icon-secondary { right: .5em; }

/*button sets*/
.ui-buttonset { margin-right: 7px; }
.ui-buttonset .ui-button { margin-left: 0; margin-right: -.3em; }

/* workarounds */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
/*
 * jQuery UI Dialog @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Dialog#theming
 */
.ui-dialog { position: absolute; padding: .2em; width: 300px; overflow: hidden; }
.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative;  }
.ui-dialog .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
.ui-dialog .ui-dialog-titlebar-close { position: absolute; right: .3em; top: 50%; width: 19px; margin: -10px 0 0 0; padding: 1px; height: 18px; }
.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.ui-dialog .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.ui-dialog .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.ui-dialog .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.ui-dialog .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
/*
 * jQuery UI Slider @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Slider#theming
 */
.ui-slider { position: relative; text-align: left; }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; }
.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

.ui-slider-vertical { width: .8em; height: 100px; }
.ui-slider-vertical .ui-slider-handle { left: -.3em; margin-left: 0; margin-bottom: -.6em; }
.ui-slider-vertical .ui-slider-range { left: 0; width: 100%; }
.ui-slider-vertical .ui-slider-range-min { bottom: 0; }
.ui-slider-vertical .ui-slider-range-max { top: 0; }/*
 * jQuery UI Tabs @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Tabs#theming
 */
.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
/*
 * jQuery UI Datepicker @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Datepicker#theming
 */
.ui-datepicker { width: 17em; padding: .2em .2em 0; }
.ui-datepicker .ui-datepicker-header { position:relative; padding:.2em 0; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position:absolute; top: 2px; width: 1.8em; height: 1.8em; }
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover { top: 1px; }
.ui-datepicker .ui-datepicker-prev { left:2px; }
.ui-datepicker .ui-datepicker-next { right:2px; }
.ui-datepicker .ui-datepicker-prev-hover { left:1px; }
.ui-datepicker .ui-datepicker-next-hover { right:1px; }
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px;  }
.ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; }
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; }
.ui-datepicker select.ui-datepicker-month-year {width: 100%;}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width: 49%;}
.ui-datepicker table {width: 100%; font-size: .9em; border-collapse: collapse; margin:0 0 .4em; }
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;  }
.ui-datepicker td { border: 0; padding: 1px; }
.ui-datepicker td span, .ui-datepicker td a { display: block; padding: .2em; text-align: right; text-decoration: none; }
.ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: .7em 0 0 0; padding:0 .2em; border-left: 0; border-right: 0; border-bottom: 0; }
.ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: .5em .2em .4em; cursor: pointer; padding: .2em .6em .3em .6em; width:auto; overflow:visible; }
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; }

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi { width:auto; }
.ui-datepicker-multi .ui-datepicker-group { float:left; }
.ui-datepicker-multi .ui-datepicker-group table { width:95%; margin:0 auto .4em; }
.ui-datepicker-multi-2 .ui-datepicker-group { width:50%; }
.ui-datepicker-multi-3 .ui-datepicker-group { width:33.3%; }
.ui-datepicker-multi-4 .ui-datepicker-group { width:25%; }
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width:0; }
.ui-datepicker-multi .ui-datepicker-buttonpane { clear:left; }
.ui-datepicker-row-break { clear:both; width:100%; }

/* RTL support */
.ui-datepicker-rtl { direction: rtl; }
.ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; }
.ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; }
.ui-datepicker-rtl .ui-datepicker-buttonpane { clear:right; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; }
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current { float:right; }
.ui-datepicker-rtl .ui-datepicker-group { float:right; }
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header { border-right-width:0; border-left-width:1px; }
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width:0; border-left-width:1px; }

/* IE6 IFRAME FIX (taken from datepicker 1.5.3 */
.ui-datepicker-cover {
    display: none; /*sorry for IE5*/
    display/**/: block; /*sorry for IE5*/
    position: absolute; /*must have*/
    z-index: -1; /*must have*/
    filter: mask(); /*must have*/
    top: -4px; /*must have*/
    left: -4px; /*must have*/
    width: 200px; /*must have*/
    height: 200px; /*must have*/
}/*
 * jQuery UI Progressbar @VERSION
 *
 * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Progressbar#theming
 */
.ui-progressbar { height:2em; text-align: left; }
.ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
</STYLE>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"
type="text/javascript">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.js"
type="text/javascript">
</script>

<script type="text/javascript">
$(document).ready(function(){

$( "#dialog1" ).dialog({
            autoOpen: false,
            show: "blind",
            hide: "true"
        });

        $( "#opener" ).click(function() {
            $( "#dialog1" ).dialog({ height: 150,
                        width: 100,
                        modal: true,
                        position: 'center',
                        title:'Hello World',
                        overlay: { opacity: 0.5, background: 'black'},
                        font: 'Monospace'
                        } );
                        $("#dialog1" ).dialog("open");

            return false;
        });
})
</script>
</head>
<body>
<div id="dialog1" title="Basic dialog">
    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<a  id="opener" href="#">Button 5</span>
</body>
</html>