PDA

View Full Version : question on bottom slide tooltip



zhnet
04-26-2007, 03:18 AM
1) Script Title: Bottom Slide Tooltip

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex5/bottomtool.htm

3) Describe problem:

Can this tooltip be made to:
- stay firm (not disappear as soon as you move the mouse)
- have clickable content inside?

basically, if a person puts their mouse over a link, the bottom slide comes up, but is perhaps a link to another page, or even an advertiser?

AJ

codeexploiter
04-26-2007, 03:42 AM
Check the following code



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

/***********************************************
* Bottom slide tooltip- by Ron Grafe (mailto:grafer@REMOVETHIScolumbus.rr.com)
* Website URL: http://www.gdevresources.com
* Script modified by and available at Dynamic Drive: http://www.dynamicdrive.com/
***********************************************/

//SET TOOLTIP DESCRIPTIONS BELOW
//Extend or contract array as needed
var description=new Array()
description[0]='This is tool-tip description 1. <a href="http://www.google.com">Google it</a>'
description[1]='<b>This is tool-tip descrition 2. <a href="http://www.yahoo.com">Yahoo!</a>'
description[2]='<i>This is tool-tip description 3'

//Do not edit below here

iens6=document.all||document.getElementById
ns4=document.layers

<!--GLOBAL VARIABLES-->
var thename
var theobj
var thetext
var winHeight
var winPositionFromTop
var winWidth
var startH=2
var openTimer
<!--END GLOBAL VARIABLES-->

<!--GLOBAL FUNCTIONS-->

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

function setObj(text,theswitch,inwidth,inheight) {
thetext=text
if(iens6){
thename = "viewer"
theobj=document.getElementById? document.getElementById(thename):document.all.thename
winHeight=100
if(iens6&&document.all) {
winPositionFromTop=!window.opera? ietruebody().clientHeight : document.body.clientHeight
winWidth=(ietruebody().clientWidth-ietruebody().leftMargin)
}
if(iens6&&!document.all) {
winPositionFromTop=window.innerHeight
winWidth=(window.innerWidth-(ietruebody().offsetLeft+30))
}
if(theswitch=="override") {
winWidth=inwidth
winHeight=inheight
}
theobj.style.width=winWidth+"px"
theobj.style.height=startH+"px"
if(iens6&&document.all) {
theobj.style.top=ietruebody().scrollTop+winPositionFromTop+"px"
//window.status=winPositionFromTop
theobj.innerHTML = ""
theobj.insertAdjacentHTML("BeforeEnd","<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
}
if(iens6&&!document.all) {
theobj.style.top=window.pageYOffset+winPositionFromTop+"px"
theobj.innerHTML = ""
theobj.innerHTML="<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>"
}
}
if(ns4){
thename = "nsviewer"
theobj = eval("document."+thename)
winPositionFromTop=window.innerHeight
winWidth=window.innerWidth
winHeight=100
if(theswitch=="override") {
winWidth=inwidth
winHeight=inheight
}
theobj.moveTo(0,eval(window.pageYOffset+winPositionFromTop))
theobj.width=winWidth
theobj.clip.width=winWidth
theobj.document.write("<table cellspacing=0 width="+winWidth+" height="+winHeight+" border=1><tr><td width=100% valign=top><font type='times' size='2' style='color:black;font-weight:normal'>"+thetext+"</font></td></tr></table>")
theobj.document.close()
}
viewIt()
}

function viewIt() {
if(startH<=winHeight) {
if(iens6) {
theobj.style.visibility="visible"
if(iens6&&document.all) {
theobj.style.top=(ietruebody().scrollTop+winPositionFromTop)-startH+"px"
}
if(iens6&&!document.all) {
theobj.style.top=(window.pageYOffset+winPositionFromTop)-startH+"px"
}
theobj.style.height=startH+"px"
startH+=2
openTimer=setTimeout("viewIt()",10)
}
if(ns4) {
theobj.visibility = "visible"
theobj.moveTo(0,(eval(window.pageYOffset+winPositionFromTop)-startH))
theobj.height=startH
theobj.clip.height=(startH)
startH+=2
openTimer=setTimeout("viewIt()",10)
}
}else{
clearTimeout(openTimer)
}
}

function stopIt() {
if(iens6) {
theobj.innerHTML = ""
theobj.style.visibility="hidden"
startH=2
}
if(ns4) {
theobj.document.write("")
theobj.document.close()
theobj.visibility="hidden"
theobj.width=0
theobj.height=0
theobj.clip.width=0
theobj.clip.height=0
startH=2
}
}
<!--END GLOBAL FUNCTIONS-->
</script>
</head>

<body>
<layer name="nsviewer" bgcolor="#FFFFCC" style="border-width:thin;z-index:1"></layer>
<script type="text/javascript">
if (iens6){
document.write("<div id='viewer' style='background-color:#FFFFCC;visibility:hidden;position:absolute;left:0;width:0;height:0;z-index:1;overflow:hidden;border:0px ridge white'></div>")
}
if (ns4){
hideobj = eval("document.nsviewer")
hideobj.visibility="hidden"
}

function init()
{
clearTimeout(openTimer);
setTimeout("stopIt()",8000);
}
</script>

<p align="center"><font face="Arial" size="-2">Free DHTML scripts provided by<br>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a></font></p>

<!--DEFAULT SETTINGS SNIPPET: PLACE INSIDE ANY TAG THAT SUPPORTS THE ONMOUSEOVER EVENT
onmouseover="setObj(description[0])" onmouseout="clearTimeout(openTimer);stopIt()"
END DEFAULT SETTINGS SNIPPET-->

<!--DEFAULT SETTINGS OVERRIDE SNIPPET: PLACE INSIDE ANY TAG THAT SUPPORTS THE ONMOUSEOVER EVENT
onmouseover="setObj(description[0],'override',your width here,your height here)" onmouseout="clearTimeout(openTimer);stopIt()"
END DEFAULT SETTINGS OVERRIDE SNIPPET-->

<b>Example</b><br>
<a href="#" onmouseover="setObj(description[1],'override',550,30)" >Test link</a>
</body>
</html>


If you want to make the tooltip stay then remove the onmouseout event from the link that generates the tooltip. Check the following code

<a href="#" onmouseover="setObj(description[1],'override',550,30)">Test link</a>

If you want to have hyperlinks in your tooltip provide the required links in the following section of the code


description[0]='This is tool-tip description 1. <a href="http://www.google.com">Google it</a>'
description[1]='<b>This is tool-tip descrition 2. <a href="http://www.yahoo.com">Yahoo!</a>'


In my code i've added a Javascript function which make the tooltip stays even if you move your mouse from the link. And the tooltip will be vanished after small time delay if you want to have like this use the following link (that generate the tooltip)


<a href="#" onmouseover="setObj(description[1],'override',550,30)" onmouseout="init();">Test link</a>

I've made the modifications and testing based on the demo Dynamic drive provided so you need to change this in such a way that it fits your situation