Tooltip javascript ASP.NET
Hi all,
I've got the below javascript function. What it does: on an ASP.NET form, I register this script as a client startupscript. In the attributes of the controls, I add a mouseover event to fire the javascript, which shows a tooltip. That's what the javascript does. However, I want this code to determine the number of rows in the variable msg, and count the height of the e_div variable according to the number of rows in msg. Does anyone know how to do that? See red lines where I think it should be done.
Code:
js = "<script language=""javascript"">"
js &= "function showToolTip(evt,msg)"
js &= "{"
js &= "var ifr = document.frames(""ifr"").document; "
js &= "var e_html = ifr.createElement(""html""); "
js &= "var e_body = ifr.createElement(""body"");"
js &= "e_body.style.marginLeft = ""0px""; "
js &= "e_body.style.marginTop = ""0px""; "
js &= "e_body.style.marginBottom = ""0px"";"
js &= "e_body.style.marginRight = ""0px""; "
js &= "var e_div = ifr.createElement(""div"");"
js &= "e_div.id = ""divContent""; "
js &= "e_div.style.wordWrap=""break-word""; "
js &= "e_div.style.backgroundColor=""#aad5ff"";"
js &= "e_div.style.borderStyle=""solid""; "
js &= "e_div.style.borderWidth=""1px""; "
js &= "e_div.style.borderColor=""#336699""; "
js &= "e_div.style.paddingLeft = ""3px""; "
js &= "e_div.style.paddingTop = ""3px""; "
js &= "e_div.style.paddingBottom = ""3px""; "
js &= "e_div.style.paddingRight = ""3px""; "
js &= "e_div.innerHTML = msg; "
'custom
js &= "e_div.style.height = ""500px""; "
'js &= "ifr.height = e_div.style.height; "
'end custom
js &= "e_body.appendChild(e_div); "
js &= "e_html.appendChild(e_body); "
js &= "ifr.appendChild(e_html); "
js &= "var oBody = document.frames(""ifr"").document.getElementById(""divContent""); "
js &= "var oFrame = document.all(""ifr""); "
js &= "var oFrDiv = document.all(""frDiv""); "
js &= "oFrame.style.height = oBody.offsetHeight; "
js &= "oFrDiv.style.visibility=""visible""; "
js &= "oFrDiv.style.left = (evt.x + 10) + ""px"";"
js &= "oFrDiv.style.top = (evt.y + 10) + ""px""; "
js &= "oFrDiv.style.height = oFrame.style.height;"
js &= "}"
js &= "</script>"
Thanx in advance.
Re: Tooltip javascript ASP.NET
I've decided to add the complete code. It's a custom ASP.NET control. I've got my problem in the foregoing post up and running, but it gives me one strange thing. The javascript seems to run only once and keeps the height of the tooltip the same for every control, whether the tooltiptext DOES change actually. The height is set when the tooltip is first shown on a control, but after that, it never refreshes on larger tooltips... so then I miss a part. Otherwise, if I first have a large tooltip, and after that a short one, a white area is displayed under the tooltip.
Code:
<Designer(GetType(ToolTipDesigner)), DefaultProperty("Text"), ToolboxData("<{0}:ToolTip runat=server></{0}:ToolTip>")> Public Class ToolTip
Inherits System.Web.UI.WebControls.WebControl
Private ReadOnly Property IsDesignTime()
Get
Return (Not Me.Site Is Nothing) AndAlso (Me.Site.DesignMode)
End Get
End Property
'adds the tooltip to the mouseover event and hides it at the mouseout event
Public Sub AddToControl(ByRef ctl As System.Web.UI.WebControls.WebControl, ByVal msg As String)
If Not msg Is Nothing AndAlso msg.Length > 0 Then
msg = msg.Replace(Chr(13), "<br>")
msg = msg.Replace(vbTab, "")
If msg.Length >= 4 AndAlso Right(msg, 4) = "<br>" Then msg = Left(msg, msg.Length - 4)
If msg.Length > 0 Then
ctl.Attributes.Add("onMouseOver", "showToolTip(event,'<font face=\'verdana\' size=1>" & msg & "</font>');")
ctl.Attributes.Add("onMouseOut", "hideToolTip();")
End If
End If
End Sub
Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
MyBase.AddAttributesToRender(writer)
'emit javascript only at run-time
If Not IsDesignTime Then
'mouse events
If Not Page.IsStartupScriptRegistered("ShowToolTip") Then
Page.RegisterStartupScript("ShowToolTip", getJS4ShowToolTip())
End If
If Not Page.IsStartupScriptRegistered("HideToolTip") Then
Page.RegisterStartupScript("HideToolTip", getJS4HideToolTip())
End If
End If
End Sub
Private Function getJS4ShowToolTip() As String
Dim js As String
js = "<script language=""javascript"">"
js &= "function showToolTip(evt,msg)"
js &= "{"
js &= "var ifr = document.frames(""ifr"").document; "
js &= "var e_html = ifr.createElement(""html""); "
js &= "var e_body = ifr.createElement(""body"");"
js &= "e_body.style.marginLeft = ""0px""; "
js &= "e_body.style.marginTop = ""0px""; "
js &= "e_body.style.marginBottom = ""0px"";"
js &= "e_body.style.marginRight = ""0px""; "
js &= "var e_div = ifr.createElement(""div"");"
js &= "e_div.id = ""divContent""; "
js &= "e_div.style.wordWrap=""break-word""; "
js &= "e_div.style.backgroundColor=""#aad5ff"";"
js &= "e_div.style.borderStyle=""solid""; "
js &= "e_div.style.borderWidth=""1px""; "
js &= "e_div.style.borderColor=""#336699""; "
js &= "e_div.style.paddingLeft = ""3px""; "
js &= "e_div.style.paddingTop = ""3px""; "
js &= "e_div.style.paddingBottom = ""3px""; "
js &= "e_div.style.paddingRight = ""3px""; "
js &= "e_div.innerHTML = msg; "
'count number of rows
js &= "var rowCount = msg.split(""<br>""); "
'custom
js &= "e_div.style.height = String(rowCount.length * 17) + ""px""; "
js &= "ifr.height = e_div.style.height; "
js &= "rowCount = """";"
'end custom
js &= "e_body.appendChild(e_div); "
js &= "e_html.appendChild(e_body); "
js &= "ifr.appendChild(e_html); "
js &= "var oBody = document.frames(""ifr"").document.getElementById(""divContent""); "
js &= "var oFrame = document.all(""ifr""); "
js &= "var oFrDiv = document.all(""frDiv""); "
js &= "oFrame.style.height = oBody.offsetHeight; "
js &= "oFrDiv.style.visibility=""visible""; "
js &= "oFrDiv.style.left = (evt.x + 10) + ""px"";"
js &= "oFrDiv.style.top = (evt.y + 10) + ""px""; "
js &= "oFrDiv.style.height = oFrame.style.height;"
js &= "}"
js &= "</script>"
Return js
End Function
Private Function getJS4HideToolTip() As String
Dim js As String
js = "<script language=""javascript"">"
js &= "function hideToolTip() "
js &= "{"
js &= " parent.document.getElementById(""frDiv"").style.visibility=""hidden""; "
js &= "}"
js &= "</script>"
Return js
End Function
Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter)
AddAttributesToRender(writer)
writer.Write("<div id=""frDiv"" style=""overflow:visible;position:absolute;visibility:hidden;z-index:500""><iframe id=""ifr"" src=""javascript:null"" style=""overflow:visible;position:relative;z-index:500;width:450px;"" scrolling=""no"" frameborder=""0"" marginwidth=""0"" marginheight=""0"" vspace=""0"" hspace=""0"" ></iframe></div>")
End Sub
End Class
Hope someone can explain...
