Show tooltip on mouseover

Step 1: Copy this css style code into your header tage right before the end of header tag

<style type=”text/css”>

#dhtmltooltip{
position: absolute;
border: 1px solid red;
width: 150px;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=115);
}

</style>

Step 2 :Copy the following code into page with your body html tags

<div id=”dhtmltooltip”></div>

<script type=”text/javascript”>

/***********************************************
* Freejavascriptkit.com
* Visit http://www.freejavascriptkit.com for more free Javascripts source code
***********************************************/

var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all[“dhtmltooltip”] : document.getElementById? document.getElementById(“dhtmltooltip”) : “”

function ietruebody(){
return (document.compatMode && document.compatMode!=”BackCompat”)? document.documentElement : document.body
}

function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!=”undefined”) tipobj.style.width=thewidth+”px”
if (typeof thecolor!=”undefined” && thecolor!=””) tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}

function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20

var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000

//if the horizontal distance isn’t enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it’s width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+”px” : window.pageXOffset+e.clientX-tipobj.offsetWidth+”px”
else if (curX<leftedge)
tipobj.style.left=”5px”
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+”px”

//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+”px” : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+”px”
else
tipobj.style.top=curY+offsetypoint+”px”
tipobj.style.visibility=”visible”
}
}

function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility=”hidden”
tipobj.style.left=”-1000px”
tipobj.style.backgroundColor=”
tipobj.style.width=”
}
}

document.onmousemove=positiontip

</script>

Step 3: Add the following code to your link or page element which needs a tool tip

onMouseover=”ddrivetip(‘Free javascripts from www.freejavascriptkit.com’,’lightgreen’, 300)”;
onMouseout=”hideddrivetip()”

Note : You can refer more detail on “http://www.freejavascriptkit.com/free_javascripts/tooltip_hint/dhtml_mouseover_tooltip.html”

unicode issue in Perl CGI

When some special character(or other language data) is displayed as ‘? ? ? ? ?’ in browser, then you have to make the following change.

1.In your table set the collation of the field that is to be displayed as “Binary”.

If this does not work then you can try the below option in your cgi script

2. Set the meta-type in your templates file as

“<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />”.

If the above two does not work,then try the third option.

3.

use Encode qw(encode decode);

my $text = decode (‘utf8’, $value_to_be_decoded);


update query based on condition

$con = sfContext::getInstance()->getDatabaseConnection(‘propel’);
$c2 = new Criteria();
$c2->add(TblTopPeer::TF_ZIPCODE,$topForecastInfo->getForZipcode());
$c2->add(TblTopPeer::TF_FORCASTDATE,$topForecastInfo->getForForecastdate());

$c3 = new Criteria();
$c3->add(TblTopPeer::TF_FID,$topForecastInfo->getForId());
$c3->add(TblTopPeer::TF_USERID,$topForecastInfo->getForUserid());
$c3->add(TblTopPeer::TF_LATITUDE,$zipInfo->getZipLatitude());
$c3->add(TblTopPeer::TF_LONGITUDE,$zipInfo->getZipLongitude());
BasePeer::doUpdate($c2, $c3, $con);

OR

$con = Propel::getConnection();

// select from...
$c1 = new Criteria();
$c1->add(CommentPeer::POST_ID, $post_id);

// update set
$c2 = new Criteria();
$c2->add(CommentPeer::RATING, 5);

BasePeer::doUpdate($c1, $c2, $con);

How to apply or condition for mysql query in symfony

$cs = new Criteria();
$criterion = $cs->getNewCriterion(HfArticlesPeer::AR_DESCRIPTION,’%’.$searchText.’%’,Criteria::LIKE);
$criterion->addOr($cs->getNewCriterion(HfArticlesPeer::AR_TITLE,’%’.$searchText.’%’,Criteria::LIKE));
$criterion1 = $cs->getNewCriterion(HfArticlesPeer::AR_STATUS,’ARCHIVE’,Criteria::EQUAL);
$criterion1->addOr($cs->getNewCriterion(HfArticlesPeer::AR_STATUS,’PUBLISHED’,Criteria::EQUAL));
$cs->add($criterion1);
$cs->add($criterion);
$cs->add(HfArticlesPeer::AR_CATEGORY ,InsuranceCatId,Criteria::EQUAL);
$searchResInsuranceArticle = HfArticlesPeer::doSelect($cs);

No connection params set for propel

When you are using symfony framework , and when you get the error as

“No connection params set for propel” ,Do the following changes .

In config /databases.yml file

Replace

all:
propel:
class: sfPropelDatabase
param:
datasource: symfony
dsn: mysql://root:@localhost/mywebsite

with

all:
propel:
class: sfPropelDatabase
param:
phptype: mysql
host: localhost
database: databaseName
username: root
password: password
dsn: mysql://root:password@localhost/databaseName
datasource: propel

In config/propel.ini

Replace

propel.targetPackage = lib.model
propel.packageObjectModel = true
propel.project = projectFolderName
propel.database = mysql
propel.database.createUrl = mysql://root:password@localhost/databaseName
propel.database.url = mysql://root:password@localhost/databaseName

with

propel.targetPackage = lib.model
propel.packageObjectModel = true
propel.project = projectFolderName
propel.database = mysql
propel.database.createUrl = mysql://localhost/
propel.database.url = mysql://root:password@localhost/databaseName

This will rectify your problem.

how to create html element dynamically in javascript

var itemManCnt=2;
function addMoreHomeImage()
{
if(itemManCnt==6)
{
alert(“You can upload only 5 files”);
return false;

}
var parentObj=document.getElementById(‘FileElementItem’);
var divClrBoth = document.createElement(“div”);
divClrBoth.setAttribute(“class”,”ClrBoth”);
divClrBoth.setAttribute(“id”,itemManCnt);

var divClrSelect = document.createElement(“div”);
divClrSelect.setAttribute(“class”,”Select”);

var file= document.createElement(“input”);
file.setAttribute(“type”,”file”);
file.setAttribute(“id”,”InsuranceHomeImage”+itemManCnt);
file.setAttribute(“name”,”InsuranceHomeImage”+itemManCnt);
divClrSelect.appendChild(file);

var divRemove= document.createElement(“div”);
divRemove.setAttribute(“class”,”AddNew”);

var divRemoveLink = document.createElement(“a”);
divRemoveLink.setAttribute(‘onclick’,’deleteHomeImage(‘+itemManCnt+’)’);itemManCnt++;
divRemoveLink.innerHTML=’Remove’;
divRemove.appendChild(divRemoveLink);

divClrBoth.appendChild(divClrSelect);
divClrBoth.appendChild(divRemove);

parentObj.appendChild(divClrBoth);
}
function deleteHomeImage(iEle)
{
var parentObj=document.getElementById(‘FileElementItem’);
var olddiv = document.getElementById(iEle);
–itemManCnt;
parentObj.removeChild(olddiv);
}

Implementation example

<div id=”FileElementItem” class=”FileElement”>
<div class=”ClrBoth”>
<div class=”Select”>
<input type=”file” name=”InsuranceHomeImage1″ id=”InsuranceHomeImage1″>
</div>
<div class=”AddNew”>
<a onclick=”addMoreHomeImage()”>Add New</a>
</div>
</div>
</div>