sunithasundar
07-18-2007, 06:41 AM
Im my project I want something like, when clicked on a image a small popup appear with two links HIDE and DETAIL. Once clicked on the HIDE link the popup disappears and once clicked on the DETAIL link, one more popup hould appear.
The problem is, when clicked on DETAIL link the popup comes and diappears soon, that is because onClick calls two function in which, one tries to call a popup and other tries to close a popup....
Can anyone suggest me someother way to do that....
My code,
<html>
<head>
<!-- mouseover-->
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<!-- mouseover-->
<!--popup with link-->
<script type="text/javascript">
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=(screen.width) ? (screen.width-250)/2 : 0
var ypos=(screen.height) ? (screen.height-250)/2 : 0
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>
<!-- popup with link-->
</head>
<body>
<!--for mouseover in head n body tag-->
<div id="dhtmltooltip"></div>
<script type="text/javascript">
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>
<!--for mouseover in head n body tag-->
<form name="test" action="" method="post">
<table>
<tbody>
<tr>
<td align="right" height="3" valign="top" width="194"></td>
<td href="search.htm" onClick="return overlay(this, 'subcontent1','center')" name="chat" align="center" height="3" valign="top" width="117"><img src="chat.gif" alt="chat"></td>
</tr>
<tr>
<td name="msg" align="right" valign="top" width="194"></td>
<td name="msg" align="center" valign="top" width="117">Chat</td>
</tr>
</tbody>
</table>
<DIV id="subcontent2" style="position:absolute; display:none; border: 4px solid black; background-color: lightyellow; width: 200px; height: 100px; padding: 4px">
Detail...
</DIV>
<DIV id="subcontent1" style="position:absolute; display:none; border: 4px solid black; background-color: lightyellow; width: 200px; height: 100px; padding: 4px">
Some content...
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td>
<div OnLoad="return overlay(this, 'subcontent2','center'); "> </div>
<div align="right"><a href="" onMouseover="ddrivetip('For more detail!', '#EFEFEF')";
onMouseout="hideddrivetip()"; onClick="overlayclose('subcontent1'); overlay(this, 'subcontent2','center'); ">Detail</a></div>
</td><td></td><td></td>
<td>
<div align="right"><a href="" onClick="overlayclose('subcontent1'); return false; ">Hide</a></div>
</td>
</tr>
</table>
</DIV>
</form>
</body>
</html>
The problem is, when clicked on DETAIL link the popup comes and diappears soon, that is because onClick calls two function in which, one tries to call a popup and other tries to close a popup....
Can anyone suggest me someother way to do that....
My code,
<html>
<head>
<!-- mouseover-->
<style type="text/css">
#dhtmltooltip{
position: absolute;
width: 150px;
border: 2px solid black;
padding: 2px;
background-color: lightyellow;
visibility: hidden;
z-index: 100;
/*Remove below line to remove shadow. Below line should always appear last within this CSS*/
filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);
}
</style>
<!-- mouseover-->
<!--popup with link-->
<script type="text/javascript">
function getposOffset(overlay, offsettype){
var totaloffset=(offsettype=="left")? overlay.offsetLeft : overlay.offsetTop;
var parentEl=overlay.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function overlay(curobj, subobjstr, opt_position){
if (document.getElementById){
var subobj=document.getElementById(subobjstr)
subobj.style.display=(subobj.style.display!="block")? "block" : "none"
var xpos=(screen.width) ? (screen.width-250)/2 : 0
var ypos=(screen.height) ? (screen.height-250)/2 : 0
subobj.style.left=xpos+"px"
subobj.style.top=ypos+"px"
return false
}
else
return true
}
function overlayclose(subobj){
document.getElementById(subobj).style.display="none"
}
</script>
<!-- popup with link-->
</head>
<body>
<!--for mouseover in head n body tag-->
<div id="dhtmltooltip"></div>
<script type="text/javascript">
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>
<!--for mouseover in head n body tag-->
<form name="test" action="" method="post">
<table>
<tbody>
<tr>
<td align="right" height="3" valign="top" width="194"></td>
<td href="search.htm" onClick="return overlay(this, 'subcontent1','center')" name="chat" align="center" height="3" valign="top" width="117"><img src="chat.gif" alt="chat"></td>
</tr>
<tr>
<td name="msg" align="right" valign="top" width="194"></td>
<td name="msg" align="center" valign="top" width="117">Chat</td>
</tr>
</tbody>
</table>
<DIV id="subcontent2" style="position:absolute; display:none; border: 4px solid black; background-color: lightyellow; width: 200px; height: 100px; padding: 4px">
Detail...
</DIV>
<DIV id="subcontent1" style="position:absolute; display:none; border: 4px solid black; background-color: lightyellow; width: 200px; height: 100px; padding: 4px">
Some content...
<table>
<tr></tr>
<tr></tr>
<tr></tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
<td>
<div OnLoad="return overlay(this, 'subcontent2','center'); "> </div>
<div align="right"><a href="" onMouseover="ddrivetip('For more detail!', '#EFEFEF')";
onMouseout="hideddrivetip()"; onClick="overlayclose('subcontent1'); overlay(this, 'subcontent2','center'); ">Detail</a></div>
</td><td></td><td></td>
<td>
<div align="right"><a href="" onClick="overlayclose('subcontent1'); return false; ">Hide</a></div>
</td>
</tr>
</table>
</DIV>
</form>
</body>
</html>