How to make a unclickable link ?

For a link, put hash # symbol as URL in href attribute, like :

<a href=#>Click me</a>

If you want make a link unclickable using JavaScript, find the element and set its href property to #

document.getElementById("myLink").href = "#";

How to add favicon to the web application or website ?

A favicon (short for favorites icon), also known as a shortcut icon, website icon, URL icon, or bookmark icon is a 16×16 or 32×32 pixel square icon associated with a particular website or webpage.
This would then automatically be used in Internet Explorer's favorites (bookmarks) display.

It is better to have icon file in .ICO, .PNG or .JPEG format.

The following format is cross-browser compatible and is supported by Internet Explorer, Firefox, Chrome, and Opera :
<link rel="shortcut icon" href="http://www.example.com/myicon.ico" />
<link rel="shortcut icon" href="/somepath/myicon.ico" />

The following shows the supported format of link tags, using examples, for HTML and XHTML :
<link rel="icon" type="image/vnd.microsoft.icon" href="/somepath/image.ico" />
<link rel="icon" type="image/png" href="http://example.com/image.png">

Most web browsers do not require any HTML to retrieve a favicon that conforms to the de facto file name and type (favicon.ico) located in the web site's root.

How to reload the page ?

Use a button click to reload the page but you can use a text hyperlink or any trigger you like.

Examples :

<input type="button" value="Reload Page"onClick="window.location.reload()">

<input type="button" value="Reload Page" onClick="history.go(0)">

<input type="button" value="Reload Page" onClick="window.location.href=window.location.href">

You can also use document object instead of window.

How to print a web page using JS ?

window.print() Function 

Examples

<A HREF="javascript:window.print()" mce_HREF="javascript:window.print()" mce_HREF="javascript:window.print()">Click to Print This Page</A>

<A HREF="javascript:window.print()" mce_HREF="javascript:window.print()"> <IMG SRC="print_image.gif" mce_SRC="print_image.gif" BORDER="0"> </A>

<FORM>

   <INPUT TYPE="button" onClick="window.print()">

</FORM>

To make sure that your visitors have JavaScript enabled before you provide them with a button that only works using JavaScript, you can use JavaScript to print out the button.

That way if they have it disabled, no button appears, saving them the frustration of clicking a button that does absolutely nothing :

<SCRIPT LANGUAGE="JavaScript">

 if (window.print) {

   document.write('<form> <input type=button name=print value="Print" onClick="window.print()"> </form>');

 }

</SCRIPT>

How to target Window or Frame for display ?

With an ordinary HTML link using the <a> tag you can target the page that the link refers to so that it will display in another window or frame.

Of course the same can also be done from within Javascript.

To target the top of the current page and break out of any frameset currently in use you would use :

<a href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" target="_top"> in HTML.

In Javascript you use : 

top.location.href = 'page.htm';

To target the current page or frame you can use

<a href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" target="_self"> in HTML.

In Javascript you use :

self.location.href = 'page.htm';

To target the parent frame you can use

<a href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" target="_parent"> in HTML.

In Javascript you use :

parent.location.href = 'page.htm';

To target a specific frame within a frameset you can use

<a href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" target="thatframe"> in HTML.

In Javascript you use :

top.frames['thatframe'].location.href = 'page.htm';

To target a specific iframe within the current page you can use

<a href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" mce_href="page.htm" target="thatframe"> in HTML.

In Javascript you use :

self.frames['thatframe'].location.href = 'page.htm';

How to add Cool tooltip to images ?

You can add tooltip to the images using the attribute title, which displays a simple non-configurable tooltip.

Like : 

<img src="myImage.jpg" mce_src="myImage.jpg" mce_src="myImage.jpg"  

     mce_src="myImage.jpg" title="this is tooltip">

but, you can also define your advanced Cool tooltip using the CSS, HTML and JavaScript.

Cool Tooltip

CSS

Make a CSS file (mycss.css) and define this CSS class :

.xstooltip

{

    visibility: hidden;

   

    top: 0; 

    left: 0;

   

    font: normal 8pt sans-serif;

    padding: 3px;

    border: solid 1px;

    background-repeat: repeat; 

    background-color: orange;

}

HTML and Javascript

Link CSS file to HTML inside HEAD section :

<head>

  <link rel="stylesheet" href="mycss.css" mce_href="mycss.css">

Add Javascript also in the HEAD section :

 <script>

  function xstooltip_findPosX(obj) {

     var curleft = 0;

     if (obj.offsetParent) {

       while (obj.offsetParent) {

            curleft += obj.offsetLeft

            obj = obj.offsetParent;

        }

     } else if (obj.x) {

        curleft += obj.x;

     }

     return curleft;

  }

  function xstooltip_findPosY(obj) {

    var curtop = 0;

    if (obj.offsetParent) {

        while (obj.offsetParent) {

            curtop += obj.offsetTop

            obj = obj.offsetParent;

        }

    } else if (obj.y) {

        curtop += obj.y;

    }

    return curtop;

  }

  function xstooltip_show(tooltipId, parentId, posX, posY) {

    it = document.getElementById(tooltipId);

   

    if ((it.style.top == '' || it.style.top == 0)

        && (it.style.left == '' || it.style.left == 0)) {

        // need to fix default size (MSIE problem)

        it.style.width = it.offsetWidth + 'px';

        it.style.height = it.offsetHeight + 'px';

       

        img = document.getElementById(parentId);

   

        // if tooltip is too wide, shift left to be within parent

        if (posX + it.offsetWidth > img.offsetWidth)

            posX = img.offsetWidth - it.offsetWidth;

        if (posX < 0 )

            posX = 0;

       

        x = xstooltip_findPosX(img) + posX;

        y = xstooltip_findPosY(img) + posY;

       

        it.style.top = y + 'px';

        it.style.left = x + 'px';

    }

   

    it.style.visibility = 'visible';

  }

  function xstooltip_hide(id) {

    it = document.getElementById(id);

    it.style.visibility = 'hidden';

  }

</script>

</head>

Add a tooltip DIV

<div id="tooltip_123" class="xstooltip">

  Time spent: 00:00:08<br/>

  Page viewed: 4<br/>

  Location: Loopback <img src='flags/x0.gif' /><br/>

  Browser: Mozilla – 1.7.11<br/>

  Operating system: Linux - i686 (x86_64)

</div>

Apply tooltip on any element like: image

<img id="the_image"

  ....

  onmouseover="xstooltip_show('tooltip_123', 'the_image', 289, 49);"

  onmouseout="xstooltip_hide('tooltip_123');"

/>