A Simple Tooltip with Images and Text

As a web programmer we need to show tool tip often in our pages but not in an old fashioned way. Something appealing and subtle to the page layout design.

Mostly we go for available open source scripts which are free. I were also doing the same until I decided to write a simple one when I were in need of customizing a free snippet, which took more time.

Writing a tool tip is quite simple

This is a a simple Tooltip for you web pages with minimal code. Images , Text and HTML code can be shown inside the tooltip

Download the source code Here

Get Available Width and Height excluding your toolbars

Often we come across problems with the available screen area with different screen resolutions. The major problem is with the toolbars, somebody having the default toolbars of the browsers, and some buddy will have more toolbars installed, like Google , Y! etc. And even some users will have the taskbar twice the height of the default height for showing the quick launch bar, custom toolbars in the task bar, more tray icons.

The Problem is to find the available screen space excluding the toolbars in different resolutions. Here is a simple way of doing this.
First we find the resolution and then the available real estate/space for showing our stuff. The following function will do that.

 function init(){
var screenH = screen.height;
    var screenW = screen.width;
    alert("Your Screen Resolution:n" + screenW + "px x " + screenH + "px");
    if(document.all){
        availW = document.body.clientWidth;
        availH = document.body.clientHeight;
    }else{
        availW = innerWidth; availH = innerHeight;
    }
    alert("Available Space exculing the Toolbars:n" + availW + "px + x " + availH + "px"); } 

Printing from a popup window

Recently one of my buddy tried to use window.print from a popup window
he were working on in webpage. And everytime he called window.print, it
doesn’t worked and the pop window went blank. He asked me to sort this out.

I tried out with this below technique and it worked.
Actually, window.print doesn’t work in a child window which is opened using the window.open method
we have to use it as

function printChildWindow() {
var newWindow = window.open("yourhtmlhere.html", "newWindow", "height=200,width=300");
......................
newWindow.document.close();
}
The window.print command stalls because the new window is still open
for input. If it is closed with windowName. document. close ; then the print
command will work as expected.

Draggable Divs

Add dragging to your div elements. just adding class=”drag” to the div element will make it draggable.

Here i’m adding an example for a draggable dialog box


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
.Text{
font-family: Verdana,Arial,Sans-serif,'Times New Roman';
font-size: 9pt;
font-weight: normal;
font-style: normal;
color: #666;
text-decoration: none;
}

.alertsBoxTitle{
font-family: Verdana,Arial,Sans-serif,’Times New Roman’;
font-size: 9pt;
font-weight: bold;
font-style: normal;
color: #ffffff;
text-decoration: none;
}
.alertsBox{
background: #ECF1F9;
border: 1px #a1bcdf solid;
}
body{
overflow:hidden;
}
</style><script language=”javascript”>
//browser detection
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);

var is_nav = ((agt.indexOf(‘mozilla’)!=-1) && (agt.indexOf(‘spoofer’)==-1)
&& (agt.indexOf(‘compatible’) == -1) && (agt.indexOf(‘opera’)==-1)
&& (agt.indexOf(‘webtv’)==-1) && (agt.indexOf(‘hotjava’)==-1));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_ie = ((agt.indexOf(“msie”) != -1) && (agt.indexOf(“opera”) == -1));

var dragapproved=false
var z,x,y
var maxleft,maxtop,maxright,maxbottom;

function setdragBounds(){
//you can set the bounds of the draggable area here
maxleft = 10;
maxtop = 10;
maxright = document.body.clientWidth – 10;
maxbottom = document.body.clientHeight – 100;
}

function move(e){
var tmpXpos = (!is_ie)? temp1+e.clientX-x: temp1+event.clientX-x;
var tmpYpos = (!is_ie)? temp2+e.clientY-y : temp2+event.clientY-y;
if (dragapproved){
z.style.left = tmpXpos;
z.style.top = tmpYpos;

if(tmpXpos < maxleft)z.style.left = maxleft;
if(tmpXpos > maxright)z.style.left = maxright;

if(tmpYpos < maxtop)z.style.top = maxtop;
if(tmpYpos > maxbottom)z.style.top = maxbottom;
return false
}
}

function drags(e){
if (!(is_ie)&&!(!is_ie))
return
var firedobj=(!is_ie)? e.target : event.srcElement
var topelement=(!is_ie)? “HTML” : “BODY”

while (firedobj.tagName!=topelement && firedobj.className!=”drag” && firedobj.tagName!=’SELECT’ && firedobj.tagName!=’TEXTAREA’ && firedobj.tagName!=’INPUT’ && firedobj.tagName!=’IMG’){
//here you can add the elements that cannot be used for drag . using their class name or id or tag names
firedobj=(!is_ie)? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.className==”drag”){
dragapproved=true
z=firedobj
var tmpheight = z.style.height.split(“px”)
maxbottom = (tmpheight[0])?document.body.clientHeight – tmpheight[0]:document.body.clientHeight – 20;

temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=(!is_ie)? e.clientX: event.clientX
y=(!is_ie)? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function(“dragapproved=false”)

</script>
</HEAD>

<BODY>
<div id=”Dialog” style=”width:316px;height:119px;max-width:316px;position:absolute;top:50px;left:140px; z-index:1000;” class=”drag”>
<table width=”100%” style=”width:315px;height:119px” cellspacing=”0″ cellpadding=”0″ class=”alertsBox” id=”dialog_table”>
<tr style=”cursor:move”>
<td class=”alertsBoxTitle notselectable” colspan=”2″ align=”left” height=”21″ style=”cursor:move;background-color:#32426F”>Drag Me</td>
</tr>
<tr>
<td align=”center” colspan=”2″ height=”5″> </td>
</tr>
<tr>
<td align=”center” colspan=”2″>
<table width=”97%” border=”0″ cellspacing=”0″ cellpadding=”0″ align=”center”>
<tr>
<td valign=’top’ align=”center”>
</td>
</tr>
<tr>
<td valign=’top’ colspan=”2″ class=”Text”>You can place text here</td>
</tr>
<tr>
<td valign=’top’ colspan=”2″ align=”center”><br/><input type=”button” value=”Ok”/></td>
</tr>
</table></td>
</tr>
</table>
</div>
</BODY>
</HTML>

you can set the area in which the div(s) can be dragged using setdragBounds function

Detecting Ajax Support

check if your browser/javascript supports Ajax.
For this we can use prototype’s getTransport method.

if (Ajax.getTransport()) {
//supports ajax
}else{
alert(‘Ajax not supported’)
}

You can include this onload of your page. Make sure that before checking this , to include the prototype.js in your page

This will actually check for XML parsers in IE / FF with browser specific methods.

trim, ltrim and rtrim in javascript

Trim , Left trim (ltrim) and Right Trim (rtrim) in javascript


//Function to trim the space in the left side of the string
function ltrim ( s ){
return s.replace( /^s*/, "" );
}

//Function to trim the space in the right side of the string
function rtrim ( s ){
return s.replace( /s*$/, "" );
}

//*Function to trim the space in the  string
function trim(s) {
var temp = s;
return temp.replace(/^s+/,'').replace(/s+$/,'');

ltrim() will remove all the spaces to the left in a string rtrim() will remove all the spaces to the right in a string trim() will all the left , right and spaces inside the string Ex: var x = ” thestring”; ltrim(x) will return “thestring”; var y = “thestring “; rtrim(y) will return “thestring”; var z = ” the st ri ng “; trim(z) will return “thestring”

Check for Duplicates in an array

This Function will check for duplicate entries in an array and return true or false

For Single Dimensional Array
Array.prototype.chkforDuplicates = function (value)
// Returns true if the passed value is found in the
// array. Returns false if it is not.

{
var i;
var ctr = 0;
for (i=0; i < this.length; i++) { // use === to check for Matches. ie., identical (===), ; if (this[i] == value) { return true; } } return false; }; For Multi Dimensional Array
Array.prototype.chkforDuplicates = function (value,Idx)
// Returns true if the passed value is found in the
// array. Returns false if it is not.

{
var i;
var ctr = 0;
for (i=0; i < this.length; i++) { // use === to check for Matches. ie., identical (===), ; if (this[i][Idx] == value) { return true; } } return false; }; ong>Note: Idx is the Value of the Column You want to check for duplicates

How to Find the Index/Position of an element in an array

This js function will find the index of an array element with the given value in an array.
for Example you are having an array like

var mnuArray = new Array(“Groups”,”Services”,”Applications”);

And want to know the index/position of and element in an array, then
you can call mnuArray.findIndex(“Services”);
This will return “1”.

This will be helpful if you are having a large size array/the elements are unknown which you have populated from an dB

Array.prototype.findIndex = function(value){
var ctr = "";
for (var i=0; i < this.length; i++) { // use === to check for Matches. ie., identical (===), ; if (this[i] == value) { return i; } } return ctr; };

And advanced version of this function is,
If you want to do the same in the case of multidimensional arrays
then use the following

Array.prototype.findIndexByCol = function(value,cIdx){
var ctr = "";
for (var i=0; i < this.length; i++) { // use === to check for Matches. ie., identical (===), ; if (this[i][cIdx] == value) { //alert(this[i][cIdx]+"===="+value); return i; } } return ctr; };