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"); } 

WordPress 2.0.7 Released

WordPress 2.0.7 has been released. The major focus of this release was a new security patch under certain versions of PHP with register_globals turned on, plus a fix in Conditional GET support under certain combinations of IIS/PHPCGI versions (AKA the “Feedburner bug”). There are a few other minor bugfixes in there, as well.

You can download the new version here

Resizing the Firefox Search Bar

To make the search bar longer, we need to add a couple of CSS rules to a file named userChrome.css.
This file is located in your profile directory. It can be located at
c:/documents and settings/logged in username/Application Data/Mozilla/firefox/Profiles/

If it is hard to find the profile you can install the the Chrome Edit Extension from
http://downloads.mozdev.org/cdn/chromedit/chromedit.xpi

After installing the extension, restart Firefox.

Next, click on the Tools menu and choose Edit User Files.
You will be shown a new window that has five tabs on it. These tabs represent all of the user
files that you can modify to customize the Firefox browser. The first tab will be named userChrome.css
this is the file that we want to modify.

Else open it in your text editor and look for the following lines


#search-container, #searchbar {
width: 200px !important;  /* < ----- change this pixels as you like. 400px is more than enough. 200 sits quite in the layout and make readable */
}

Save the file, in ur texteditor or by clicking the Save button at the bottom of the Chrome Edit window
and restart Firefox.

Now you will notice that your search bar size is changed.

Thats it.

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.

Read data from a CSV file in PHP

// open the text file
$fd = fopen ("pilots.csv", "r");
// initialize a loop to go through each line of the file
while (!feof ($fd)) {
$buffer = fgetcsv($fd, 4096); // declare an array to hold all of the contents of each
//row, indexed
echo "n";
// this for loop to traverse thru the data cols
// when this is re-created with MySQL use the mysql_num_fileds() function to get
// this number
for ($i = 0; $i < 5; ++$i){
if ($buffer[$i] == ""){
$buffer[$i] = " ";
}
// print 's with each index
echo "$buffer[$i]n";
}
echo "n";
}
fclose ($fd);
?>

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.