JavaScript ToolTip

Today i will discuss tooltip in javascript how can you create it and use it very quickly in your code. I have seen that there is no such control for tooltip in asp.net, so the developer try to design there own tooltip. Some of the control in the asp.net has the property tooltip but not all has. So in order to show the tooltop for those control here is the little javascript code to use it. This Sample Javascript code is taken from the Itookia, and I have modified the code according to my need and also the i have use the stylesheet for the formatting.


and the tooltip which contain the help information .

and tooltip which contain the image.

The Css used for this tooltip which i have changed is takend from Itookia

.newDivClass

{

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,

StartColorStr=#ffffff, EndColorStr=#cecfde);

cursor: hand;

width: 300px;

font-size: 11px;

padding-left: 5px;

padding-right: 5px;

border: 1px solid #7b9ebd;

position: absolute;

visibility: hidden;

}

.TitleClass

{

padding: 6px 0 4px 10px;

font: bold 12px Trebuchet MS ,Arial;

float: left;

clear: both;

width: 100%;

}

.mainParagraphClass

{

font: normal 12px Trebuchet MS, Arial;

padding: 0 2px 6px 20px;

margin: 0;

float: left;

}

.MainImageClass

{

font: bold 12px Trebuchet MS ,Arial;

margin-right: 10px;

border: #BDBDBD 1px solid;

float: left;

}

The javascript code which i have modified is

var lastTooltip =null;

showTooltip = function (strTitle,strText,strHelpText,strhelpImage,strmainImage)

{

if (lastTooltip==null)

{

var newDiv = document.createElement("div");

newDiv.className='newDivClass';

var title = document.createElement("span");

title.className='TitleClass';

var titleText = document.createTextNode(strTitle);

title.appendChild(titleText);

var mainParagraph = document.createElement("p");

mainParagraph.className='mainParagraphClass';

if (strmainImage)

{

var mainImg = document.createElement("img");

mainImg.setAttribute("src",strmainImage);

mainImg.className='MainImageClass';

mainParagraph.appendChild(mainImg); }

var mainText = document.createTextNode(strText);

mainParagraph.appendChild(mainText);

newDiv.appendChild(title);

newDiv.appendChild(mainParagraph);

if (strHelpText)

{

var horLine = document.createElement("hr");

horLine.style.width='96%';

horLine.style.clear='both';

var helpDiv = document.createElement("div");

helpDiv.style.styleFloat='left';

helpDiv.style.cssFloat='left';

helpDiv.style.clear='both';

helpDiv.style.paddingLeft='6px';

helpDiv.style.height='24px';

if (strhelpImage)

{

var helpImg = document.createElement("img");

helpImg.setAttribute("src",strhelpImage);

helpImg.style.marginRight='8px';

helpImg.style.verticalAlign='middle';

helpDiv.appendChild(helpImg);

}

var helpText = document.createTextNode(strHelpText);

helpDiv.appendChild(helpText);

newDiv.appendChild(horLine);

newDiv.appendChild(helpDiv);

}

lastTooltip=newDiv;

if (document.addEventListener)

document.addEventListener("mousemove",moveTooltip, true);

if (document.attachEvent)

document.attachEvent("onmousemove",moveTooltip);

var bodyRef = document.getElementsByTagName("body").item(0);

bodyRef.appendChild(newDiv);

}

};

moveTooltip = function (e)

{

if(lastTooltip)

{

if (document.all)

e = event;

if (e.target)

sourceEl = e.target;

else if (e.srcElement)

sourceEl = e.srcElement;

var coors=findPos(sourceEl);

var positionLeft = e.clientX;

var positionTop = coors[1] + sourceEl.clientHeight + 1;

lastTooltip.style.top=positionTop+'px';

lastTooltip.style.left=positionLeft+'px';

lastTooltip.style.visibility='visible';

}

}

hideTooltip = function ()

{

var bodyRef = document.getElementsByTagName("body").item(0);

if (lastTooltip)

bodyRef.removeChild(lastTooltip);

lastTooltip=null;

};

function findPos(obj)

{

var curleft = curtop = 0;

if (obj.offsetParent)

{

curleft = obj.offsetLeft

curtop = obj.offsetTop

while (obj = obj.offsetParent)

{

curleft += obj.offsetLeft curtop += obj.offsetTop

}

}

return [curleft,curtop];

}

and the javascript function calls for all the above image show are

onmouseover="showTooltip('Simple tooltip','This is simple tooltip')"

onmouseout="hideTooltip()"

onmouseover="showTooltip('Simpe tooltip with additional info','This is simple tooltip with additional help info.','Press F1 for more help.','help.png','')"
onmouseout= "hideTooltip()"

onmouseover="showTooltip('Complex tooltip','This is complex tooltip with image.','Press F1 for more help.','help.png','graf.png')"

onmouseout="hideTooltip()"

Hope you will like this post for the tooltip in asp.net using javascript :)
you can now download source code from here

SqlCommand Parameters

Today i will discuss the sqlCommand Parameters which i have not used before this, and i was unaware of the power of the sqlCommand Parameter. Before this i was using the dynamic query by concatenating the string and then executing that query to fetch, update delete the record from database.
I have read the following 2 article Dynamic SQL Needs to die and Dynamic SQL Can Die Automatically and i find these article very useful.
Lets start by Example then i will give the conclusion at the end.
i have created simple table name tblUser in the northwind database and table name is tblUser and is shown below.

and i have following one value in the database for my testing.


The user interface is quite simple which consist of User name , password and login button. In the image below i have set the value of the user name and password which are use name is "asim" and Password "123'3". As you can see in my example input , for user i have not set the password field property " TextMode" to Password.So that user can see the input clearly.

No when i execute the sqlcommand for dynamic query which use the concatenation of the values with the string and generate the query you can see clearly in the image blog that it will give Exception of "Incorrect syntax near '3'.\r\nUnclosed quotation mark after the character string"," and this exception often occure if we don't convert single quote to double in our code.

And when i use sqlCommand with same parameters which contain single quote in the password there is not exception in the execution of the command and i got the smoth execution of the command and result. As you can see in the image blow.

Now i am happy to knew the power of sqlCommand and ready to use it in the my new projects. The Benefits of using the sqlCommand are as fellow taken from Dynamic SQL Needs to die.

1) Single Quote.

If I forgot one of the apostrophes. The code would compile and everything would appear to be fine. However, once I executed the command, it would blow up and result in a Syntax error. This is an easy mistake to make no matter how careful you are. Also, pretend you had 15 values in the Where clause. It'd be a feat indeed to get it right the first time. Another common thing that comes up is that you can just write a function that changes the single quotes to double quotes so it can be used. Well, you'll have to call this on every SQL statement to safely assume it will work. You'll probably forget to do it at least once, and other programmers may forget it or not know that you have this function when they maintain your code.

2) Data Type

Another example is Date fields. Different RDBMS implementations require a different Date Format. It's very easy to forget about this and forget one of the critical formatting chunks. Again, if you are totally careful you probably won't make many mistakes here, but your new programmers probably will. Someone editing your code probably will etc.Another problem is fields that have an apostrophe in them. This happens so often it's amazing.

3) It's a preformance killer.

Your query won't be able to take advantage of cached execution plans. That means that the same query can hit the db over and over again and each time the Server won't be able to reuse plans it's already cached.