Tooltip in Javascript question; adding a delay
Madison Kelly
linux-5ZoueyuiTZhBDgjK7y7TUQ at public.gmane.org
Wed Apr 20 21:13:03 UTC 2005
psema4 wrote:
> My apologies, here's a complete example:
>
> == snip ==
>
> In the stm() and htm() functions, you'll want to replace the
> references to the textboxes in form01 with the DIV names used by your
> tooltipping script.
>
> Not sure if I can clarify any better without knowing which "canned"
> scripts your using.
>
Hi,
Thank you very, very much for that script! I tried it out (copied
ver-batim to a test file) and the text appeared right away with out a
delay. This is under Mozilla 1.7.6. The script I am using is a modified
version of:
http://migoicons.tripod.com/dhtips.htm
My modified version is next. I've incorporated it into my main
'tle-bu.js' file which I use for all JS needed by my program. I've
documented right in the 'tle-bu.js' file how I call it now. Here is the
script which currently works great but with no delay.
Thanks again for your help!
Madison
-=-=-[ portion of tle-bu.js ]-=-=-
<!--
/* Integrated into the main 'tle-bu.js' file and modifications to better
suit TLE-BU done by Madison Kelly */
/*
Pleas leave this notice.
DHTML tip message version 1.2 copyright Essam Gamal 2003
(http://migoicons.tripod.com, migoicons-PkbjNfxxIARBDgjK7y7TUQ at public.gmane.org)
All modifications are done in the style.js you should not modify this
file. Created on : 06/03/2003
Script featured on and can be found at Dynamic Drive
(http://www.dynamicdrive.com)
*/
var ua = navigator.userAgent
var ps = navigator.productSub
var dom = (document.getElementById)? 1:0
var ie4 = (document.all&&!dom)? 1:0
var ie5 = (document.all&&dom)? 1:0
var nn4 =(navigator.appName.toLowerCase() == "netscape" &&
parseInt(navigator.appVersion) == 4)
var nn6 = (dom&&!ie5)? 1:0
var sNav = (nn4||nn6||ie4||ie5)? 1:0
var cssFilters = ((ua.indexOf("MSIE 5.5")>=0||ua.indexOf("MSIE
6")>=0)&&ua.indexOf("Opera")<0)? 1:0
var
Style=[],Text=[],Count=0,sbw=0,move=0,hs="",mx,my,scl,sct,ww,wh,obj,sl,st,ih,iw,vl,hl,sv,evlh,evlw,tbody
var HideTip = "eval(obj+sv+hl+';'+obj+sl+'=0;'+obj+st+'=-800')"
var doc_root =
((ie5&&ua.indexOf("Opera")<0||ie4)&&document.compatMode=="CSS1Compat")?
"document.documentElement":"document.body"
var PX = (nn6)? "px" :""
if(sNav) {
window.onresize = ReloadTip
document.onmousemove = MoveTip
if(nn4) document.captureEvents(Event.MOUSEMOVE)
}
if(nn4||nn6) {
mx = "e.pageX"
my = "e.pageY"
scl = "window.pageXOffset"
sct = "window.pageYOffset"
if(nn4) {
obj = "document.TipLayer."
sl = "left"
st = "top"
ih = "clip.height"
iw = "clip.width"
vl = "'show'"
hl = "'hide'"
sv = "visibility="
}
else obj = "document.getElementById('TipLayer')."
}
if(ie4||ie5) {
obj = "TipLayer."
mx = "event.x"
my = "event.y"
scl = "eval(doc_root).scrollLeft"
sct = "eval(doc_root).scrollTop"
if(ie5) {
mx = mx+"+"+scl
my = my+"+"+sct
}
}
if(ie4||dom){
sl = "style.left"
st = "style.top"
ih = "offsetHeight"
iw = "offsetWidth"
vl = "'visible'"
hl = "'hidden'"
sv = "style.visibility="
}
if(ie4||ie5||ps>=20020823) {
ww = "eval(doc_root).clientWidth"
wh = "eval(doc_root).clientHeight"
}
else {
ww = "window.innerWidth"
wh = "window.innerHeight"
evlh = eval(wh)
evlw = eval(ww)
sbw=15
}
function applyCssFilter(){
if(cssFilters&&FiltersEnabled) {
var dx = " progid:DXImageTransform.Microsoft."
TipLayer.style.filter = "revealTrans()"+dx+"Fade(Overlap=1.00
enabled=0)"+dx+"Inset(enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=in
enabled=0)"+dx+"Iris(irisstyle=PLUS,motion=out
enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=in
enabled=0)"+dx+"Iris(irisstyle=DIAMOND,motion=out
enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=in
enabled=0)"+dx+"Iris(irisstyle=CROSS,motion=out
enabled=0)"+dx+"Iris(irisstyle=STAR,motion=in
enabled=0)"+dx+"Iris(irisstyle=STAR,motion=out
enabled=0)"+dx+"RadialWipe(wipestyle=CLOCK
enabled=0)"+dx+"RadialWipe(wipestyle=WEDGE
enabled=0)"+dx+"RadialWipe(wipestyle=RADIAL
enabled=0)"+dx+"Pixelate(MaxSquare=35,enabled=0)"+dx+"Slide(slidestyle=HIDE,Bands=25
enabled=0)"+dx+"Slide(slidestyle=PUSH,Bands=25
enabled=0)"+dx+"Slide(slidestyle=SWAP,Bands=25
enabled=0)"+dx+"Spiral(GridSizeX=16,GridSizeY=16
enabled=0)"+dx+"Stretch(stretchstyle=HIDE
enabled=0)"+dx+"Stretch(stretchstyle=PUSH
enabled=0)"+dx+"Stretch(stretchstyle=SPIN
enabled=0)"+dx+"Wheel(spokes=16
enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=forward
enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=0,motion=reverse
enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=forward
enabled=0)"+dx+"GradientWipe(GradientSize=1.00,wipestyle=1,motion=reverse
enabled=0)"+dx+"Zigzag(GridSizeX=8,GridSizeY=8
enabled=0)"+dx+"Alpha(enabled=0)"+dx+"Dropshadow(OffX=3,OffY=3,Positive=true,enabled=0)"+dx+"Shadow(strength=3,direction=135,enabled=0)"
}
}
/* Modified by Madison to take the values from the page instead of from
the array */
var timerID;
function
stm(ttitle,ttext,TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign,TitleFontFace,TextFontFace,TipPosition,StickyStyle,TitleFontSize,TextFontSize,Width,Height,BorderSize,PadTextArea,CoordinateX,CoordinateY,TransitionNumber,TransitionDuration,TransparencyLevel,ShadowType,ShadowColor)
{
/* Maddy: put a 1 or 2 second delay here but make sure this funtion
doesn't run if the onMouseOut event occurs... */
if(sNav)
{
var ab = "" ;var ap = ""
var titCol = (TitleColor)? "COLOR='"+TitleColor+"'" : ""
var txtCol = (TextColor)? "COLOR='"+TextColor+"'" : ""
var titBgCol = (TitleBgColor)? "BGCOLOR='"+TitleBgColor+"'" : ""
var txtBgCol = (TextBgColor)? "BGCOLOR='"+TextBgColor+"'" : ""
var titBgImg = (TitleBgImag)? "BACKGROUND='"+TitleBgImag+"'" : ""
var txtBgImg = (TextBgImag)? "BACKGROUND='"+TextBgImag+"'" : ""
var titTxtAli = (TitleTextAlign &&
TitleTextAlign.toLowerCase()!="left")? "ALIGN='"+TitleTextAlign+"'" : ""
var txtTxtAli = (TextTextAlign &&
TextTextAlign.toLowerCase()!="left")? "ALIGN='"+TextTextAlign+"'" : ""
var add_height = (Height)? "HEIGHT='"+Height+"'" : ""
if(!TitleFontFace) TitleFontFace = "Verdana, Helvetiva, Tahoma,
Sans-Serif"
if(!TextFontFace) TextFontFace = "Verdana, Helvetiva, Tahoma,
Sans-Serif"
if(!TitleFontSize) TitleFontSize = 1
if(!TextFontSize) TextFontSize = 1
if(!Width) Width = 200
if(!BorderSize) BorderSize = 0
if(!PadTextArea) PadTextArea = 0
if(!CoordinateX) CoordinateX = 10
if(!CoordinateY) CoordinateY = 10
hs = StickyStyle.toLowerCase()
if(ps==20001108){
if(TitleBgColor) ab="STYLE='border:"+BorderSize+"px solid"+"
"+TitleBgColor+"'"
ap="STYLE='padding:"+PadTextArea+"px "+PadTextArea+"px
"+PadTextArea+"px "+PadTextArea+"px'"}
var closeLink=(hs=="sticky")? "<TD ALIGN='right'><FONT
SIZE='"+TitleFontSize+"' FACE='"+TitleFontFace+"'><A
HREF='javascript:void(0)' ONCLICK='stickyhide()'
STYLE='text-decoration:none;color:"+TitleColor+"'><B>Close</B></A></FONT></TD>":""
var title=(ttitle||hs=="sticky")? "<TABLE WIDTH='100%' BORDER='0'
CELLPADDING='0' CELLSPACING='0'><TR><TD "+titTxtAli+"><FONT
SIZE='"+TitleFontSize+"' FACE='"+TitleFontFace+"'
"+titCol+"><B>"+ttitle+"</B></FONT></TD>"+closeLink+"</TR></TABLE>" : ""
var txt="<TABLE "+titBgImg+" "+ab+" WIDTH='"+Width+"' BORDER='0'
CELLPADDING='"+BorderSize+"' CELLSPACING='0' "+titBgCol+"
><TR><TD>"+title+"<TABLE WIDTH='100%' "+add_height+" BORDER='0'
CELLPADDING='"+PadTextArea+"' CELLSPACING='0' "+txtBgCol+"
"+txtBgImg+"><TR><TD "+txtTxtAli+" "+ap+" VALIGN='top'><FONT
SIZE='"+TextFontSize+"' FACE='"+TextFontFace+"' "+txtCol
+">"+ttext+"</FONT></TD></TR></TABLE></TD></TR></TABLE>"
if(nn4)
{
with(eval(obj+"document"))
{
open()
write(txt)
close()
}
}
else eval(obj+"innerHTML=txt")
tbody =
{
Pos:TipPosition.toLowerCase(),
Xpos:CoordinateX,
Ypos:CoordinateY,
Transition:TransitionNumber,
Duration:TransitionDuration,
Alpha:TransparencyLevel,
ShadowType:ShadowType.toLowerCase(),
ShadowColor:ShadowColor,
Width:parseInt(eval(obj+iw)+3+sbw)
}
if(ie4)
{
TipLayer.style.width = Width
tbody.Width = Width
}
Count=0
move=1
}
}
function MoveTip(e) {
if(move) {
var X,Y,MouseX = eval(mx),MouseY = eval(my); tbody.Height =
parseInt(eval(obj+ih)+3)
tbody.wiw = parseInt(eval(ww+"+"+scl)); tbody.wih =
parseInt(eval(wh+"+"+sct))
switch(tbody.Pos) {
case "left" : X=MouseX-tbody.Width-tbody.Xpos; Y=MouseY+tbody.Ypos; break
case "center": X=MouseX-(tbody.Width/2); Y=MouseY+tbody.Ypos; break
case "float": X=tbody.Xpos+eval(scl); Y=tbody.Ypos+eval(sct); break
case "fixed": X=tbody.Xpos; Y=tbody.Ypos; break
default: X=MouseX+tbody.Xpos; Y=MouseY+tbody.Ypos
}
if(tbody.wiw<tbody.Width+X) X = tbody.wiw-tbody.Width
if(tbody.wih<tbody.Height+Y+sbw) {
if(tbody.Pos=="float"||tbody.Pos=="fixed") Y = tbody.wih-tbody.Height-sbw
else Y = MouseY-tbody.Height
}
if(X<0) X=0
eval(obj+sl+"=X+PX;"+obj+st+"=Y+PX")
ViewTip()
}
}
function ViewTip() {
Count++
if(Count == 1) {
if(cssFilters&&FiltersEnabled) {
for(Index=28; Index<31; Index++) { TipLayer.filters[Index].enabled = 0 }
for(s=0; s<28; s++) { if(TipLayer.filters[s].status == 2)
TipLayer.filters[s].stop() }
if(tbody.Transition == 51) tbody.Transition = parseInt(Math.random()*50)
var applyTrans =
(tbody.Transition>-1&&tbody.Transition<24&&tbody.Duration>0)? 1:0
var advFilters =
(tbody.Transition>23&&tbody.Transition<51&&tbody.Duration>0)? 1:0
var which = (applyTrans)?0:(advFilters)? tbody.Transition-23:0
if(tbody.Alpha>0&&tbody.Alpha<100) {
TipLayer.filters[28].enabled = 1
TipLayer.filters[28].opacity = tbody.Alpha
}
if(tbody.ShadowColor&&tbody.ShadowType == "simple") {
TipLayer.filters[29].enabled = 1
TipLayer.filters[29].color = tbody.ShadowColor
}
else if(tbody.ShadowColor&&tbody.ShadowType == "complex") {
TipLayer.filters[30].enabled = 1
TipLayer.filters[30].color = tbody.ShadowColor
}
if(applyTrans||advFilters) {
eval(obj+sv+hl)
if(applyTrans) TipLayer.filters[0].transition = tbody.Transition
TipLayer.filters[which].duration = tbody.Duration
TipLayer.filters[which].apply()
}
}
eval(obj+sv+vl)
if(cssFilters&&FiltersEnabled&&(applyTrans||advFilters))
TipLayer.filters[which].play()
if(hs == "sticky") move=0
}
}
function stickyhide() {
eval(HideTip)
}
function ReloadTip() {
if(nn4&&(evlw!=eval(ww)||evlh!=eval(wh))) location.reload()
else if(hs == "sticky") eval(HideTip)
}
function htm() {
if(sNav) {
if(hs!="keep") {
move=0;
if(hs!="sticky") eval(HideTip)
}
}
}
//-->
/*
- This has been modified by Madison to take these values from the
calling page/script and no longer from the arrays
- When calling a tooltip use [''] for the default value or over-ride
by providing a new value. Don't quote integers!
- Values are taken as:
<a
onMouseOver=\"stm('title','text','TitleColor','TextColor','TitleBgColor','TextBgColor','TitleBgImag','TextBgImag','TitleTextAlign','TextTextAlign','TitleFontFace','TextFontFace,'TipPosition','StickyStyle','TitleFontSize','TextFontSize','Width','Height','BorderSize','PadTextArea','CoordinateX','CoordinateY','TransitionNumber','TransitionDuration','TransparencyLevel','ShadowType','ShadowCol')\"
onMouseOut=\"htm()\">Blah</a>
Please see below for an explanation of each option (adapted from the
Readme file that came with the source of the tooltip):
- 1 Title:
Sets the tip message's title. Leave it empty for none. You may
also insert single quoted html tags. Example:
<font color='red'> single quoted </font>. [QUOTES REQUIRED!!]
- 2 Text:
Sets the tip message's body text. You may also insert single
quoted html tags. [QUOTES REQUIRED!!]
- 3 TitleColor:
Sets the title's text color (the bold text at the top). You
could use HEX values like '#ffffff' or normal like 'white'.
[QUOTES REQUIRED!!]
- 4 TextColor:
Sets the text's text color in the tip message. You could use HEX
values like '#ffffff' or normal like 'white'. [QUOTES REQUIRED!!]
- 5 TitleBgColor:
Sets the title's background color. Leave it empty to make
transparent. [QUOTES REQUIRED!!]
- 6 TextBgColor:
Sets the text's background color. Leave it empty to make it
transparent. [QUOTES REQUIRED!!]
- 7 TitleBgImag:
You may want to insert a background Image for the TITLE rather
than a background color. If the image is not in the same directory
or folder as your html file enter the full location of the
image. Example: ["pictures/bgimg.gif"] and don't forget to specify the
image's extension; '.jpg', '.gif', ect. [QUOTES REQUIRED!!]
- 8 TextBgImag:
You may want to insert a background Image for the TEXT rather
than a background color. If the image is not in the same directory
or same folder as your html file enter the full location of the
image. Example: ["pictures/bgimg.gif"] and don't forget to specify
the image's extension; '.jpg', '.gif', ect. [QUOTES REQUIRED!!]
- 9 TitleTextAlign:
Sets the position or alignment of the TITLE. You have 3 choices;
'left' which is the default, 'center' and 'right'. Leave Empty
for left. [QUOTES REQUIRED!!]
- 10 TextTextAlign:
Sets the position or alignment of the TEXT. You have 3 choices;
'left' which is the default, 'center' and 'right'.
[QUOTES REQUIRED!!]
- 11 TitleFontFace:
Sets the title's font family or face. Example ["Tahoma"]. Leave
Empty for 'Verdana, Helvetiva, Tahoma, Sans-Serif' which is the
default. [QUOTES REQUIRED!!]
- 12 TextFontFace:
Sets the TEXT'S font family or face. Example ["Tahoma"]. Leave
Empty for 'Verdana, Helvetiva, Tahoma, Sans-Serif' which is the
default. [QUOTES REQUIRED!!]
- 13 TipPosition:
Sets the tip message's popup position. You have 5 choices;
'left', 'center', 'right', 'float' and 'fixed'.
if you set it as:
a: 'left' - The tip message will popup on the left side of the
mouse.
b: 'center' - The tip message will popup in the center. The
mouse will be in the center of the tip message.
c: 'right' - This is the default position. You may leave the
entry empty or set it as 'right'. In this case the tip message will
popup on the right side of the mouse.
d: 'float' - The tip message will not move with the mouse.
Rather it will popup at the coordinates of the X-Coordinate and
Y-Coordinate entries. If you scroll down or left the
scroll values are added to the X-Coordinate and Y-Coordinate
values so the tip message will always float in the same place no
matter how much you scroll left or right. In simple
words, "Static position".
e: 'fixed' - The tip message will not move with the mouse.
Rather it will popup at the coordinates of the X-Coordinate and
Y-Coordinate entries. It will not float with the scrollbars.
[QUOTES REQUIRED!!]
- 14 StickyStyle:
Sets the 'Sticky Style' type of the tip message. You have 2
choices; 'sticky' and 'keep'.
a: 'sticky' - The tip message will not hide after your mouse
goes off the link and it will only be positioned once. A Close link
is automatically generated and inserted at the top right of the tip
message so if you would like to hide the tip message just
click it. The properties ('color', 'bgcolor', ect) of the close link
are set from the title's properties so the close link
and title will have exactly the same style and look as the title.
This is designed specially for the need of inserting links
in the tip message or any thing that involves using the mouse in tip
message's content. leave this entry empty for none sticky
style.
b: 'keep' - The tip message will not hide after your mouse goes
of the link rather the tip message will move with your mouse
around the page. This will produce the same effect as if you didn't
specify the mouse out function in the link.
[QUOTES REQUIRED!!]
- 15 TitleFontSize:
Sets the title's font size. Numbers only. You many use negative
or positive values like -1 or +1 or absolute values like 1, 2, 3.
The default size is 1. [NO QUOTES !!]
- 16 TextFontSize:
Sets the Text's font size. Numbers only. You many use negative
or positive values like -1 or +1 or absolute values like 1, 2, 3.
The default size is 1. [NO QUOTES !!]
- 17 Width:
Sets the width of the tip message. Full Numbers only. The
default width is 200. [NO QUOTES !!]
- 18 Height:
Sets the height of the tip message. Full Numbers only. The
default height is the height needed to fit the content however you may
want to add extra height. If you do enter the value here. [NO
QUOTES !!]
- 19 BorderSize:
Sets the border size which is the colored frame around the tip
message. It's color is set from the title's bgcolor. Again Full
Numbers only. if you don't want a border set it as 0 or leave
its entry empty. [NO QUOTES !!]
- 20 PadTextArea:
Adds extra padding to the area of the text. This adds extra
space from the left, top, right, and bottom in the text content.
[NO QUOTES !!]
- 21 CoordinateX:
a: If the tip message's position is set as 'left' or 'right' it
sets the X-coordinate of the tip message relative to the position of
the mouse.
b: If the tip message's position is set as 'float' or 'fixed'
it sets the X-coordinate of the tip message relative to the window.
You may set positive or negative numbers.
The default value is 10. [NO QUOTES !!]
- 22 CoordinateY:
a: If the tip message's position is set as 'left', 'right' or
'center' it sets the Y-coordinate of the tip message relative to
the position of the mouse.
b: If the tip message's position is set as 'float' or 'fixed'
it sets the Y-coordinate of the tip message relative to the window.
You may set positive or negative numbers.
The default value is 10. [NO QUOTES !!]
- 23 Transition: (Not supported outside IE; Don't use in TLE-BU!)
Sets the transition number. The transition is the cool visual
effect when the tip message shows. You have a choice from 0 to 51
different effects. 23 is random for the 22 first effects and 51
is random for all. To disable the transition set the value to -1.
Full Numbers only. Make sure that the FiltersEnabled variable is
set to 1 or the transition won't play. This requires Microsoft
Internet Explorer 5.5 or later. [NO QUOTES !!]
- 24 TransitionDuration: (Not supported outside IE; Don't use in TLE-BU!)
Sets the duration of the transition. The time desired of
transition action in seconds. You may use decimal numbers such as 0.3 or
full numbers like 1. Setting the value to 0 also disables the
transition. This requires Microsoft Internet Explorer 5.5 or later.
[NO QUOTES !!]
- 25 TransparencyLevel: (Not supported outside IE; Don't use in TLE-BU!)
Add transparency level from 1 to 99. The decreasing values
increase transparency so if you set it to 1 you will barely see the tip
message and that's if you have good eyesight. If you set it to
99 it will be least transparent. Get the point?. Set 0 for none. This
requires Microsoft Internet Explorer 5.5 or later. [NO QUOTES !!]
- 26 ShadowType: (Not supported outside IE; Don't use in TLE-BU!)
You may apply one of two shadow styles; 'simple' or 'complex'.
Leave empty for none. You must also add a shadow color to enabled it.
This requires Microsoft Internet Explorer 5.5 or later. [QUOTES
REQUIRED!!]
- 27 ShadowColor: (Not supported outside IE; Don't use in TLE-BU!)
Sets the shadow color. Leave empty to also disable the shadow.
This requires Microsoft Internet Explorer 5.5 or later.
[QUOTES REQUIRED!!]
*/
var FiltersEnabled = 0 // if your not going to use transitions or
filters in any of the tips set this to 0
applyCssFilter()
-=-=-[ portion of tle-bu.js ]-=-=-
--
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Madison Kelly (Digimer)
TLE-BU, The Linux Experience; Back Up
http://tle-bu.thelinuxexperience.com
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
--
The Toronto Linux Users Group. Meetings: http://tlug.ss.org
TLUG requests: Linux topics, No HTML, wrap text below 80 columns
How to UNSUBSCRIBE: http://tlug.ss.org/subscribe.shtml
More information about the Legacy
mailing list