• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5805
  • Last Modified:

Classic ASP VBScript: How to create a dynamic tooltip-type hover over a link

MS Access
DWMX
WIN XP Pro
Classic ASP VBScript

Hello.  I am going to include this in both the "ASP" and "DHTML" zones.  I would like to create a "tooltip"-type layer triggered by a hover over a link.  I would like the layer to dynamically populate the "Description" of respective link when hovered over.

Here is the link code:
<td width="520" valign="top"> <h5><img src="images/aqua-sphere.jpg" align="top"><a href="<%=(rsToolLinks.Fields.Item("toolLink").Value)%>"><%=(rsToolLinks.Fields.Item("toolName").Value)%></a> </h5></td>

The Description field is named "toolDesc".  How could this be accomplished?

Thanks so much,
Shane
0
lshane
Asked:
lshane
  • 8
  • 6
1 Solution
 
kevp75Commented:
wellll...can't be done with flat out vbScript.  I'd recommend doing some AJAXian calls on the link:

<a href="<%=(rsToolLinks.Fields.Item("toolLink").Value)%>" onclick="loadurl('makeapagetocontainadynamictooltipforthis.asp?id="<%=(rsToolLinks.Fields.Item("yourIDField").Value)%>"><%=(rsToolLinks.Fields.Item("toolName").Value)%></a><div id='tool-tip'></div>

add this to your CSS:
#tool-tip{
      position:absolute;
      z-index:14001;
      width:400px;
      height:200px;
      border:2px solid #FF9900;
      background:#fff;
      padding:10px 0 10px 0;
      visibility:hidden;
      margin:13% 0 0 10%;
      overflow:auto;
      }

add this in between your <head> tags:
//Get Contents of another page, and display them inside an element
strTargetDiv = '';
function loadurl(dest, str1) {
     strTargetDiv = str1;
     document.getElementById(strTargetDiv).innerHTML = '<div id="loading">Loading content...</div>';
     try {
     xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
     new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) { /* do nothing */ }
     dest = dest + "&sid="+Math.random()
     xmlhttp.onreadystatechange = triggered;
     xmlhttp.open("GET", dest);
     xmlhttp.send(null);    
}
function triggered() {
     if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
            var txt = xmlhttp.responseText;
            var txtNod = document.createTextNode(txt);
            document.getElementById(strTargetDiv).style.display = '';
            document.getElementById(strTargetDiv).innerHTML = txt;
     }
}


build another dynamic page (with a db call), grab the querystring you pass in the onclick event, and display the descript field content.  (use some extra CSS to format that div that's beside the link)
0
 
kevp75Commented:
DOH!

I have a typo....your link should be:

<a href="<%=(rsToolLinks.Fields.Item("toolLink").Value)%>" onclick="loadurl('makeapagetocontainadynamictooltipforthis.asp?id=<%=(rsToolLinks.Fields.Item("yourIDField").Value)%>','tool-tip');return false;"><%=(rsToolLinks.Fields.Item("toolName").Value)%></a><div id='tool-tip'></div>
0
 
ddelhezCommented:
Why don't you try simply the "title" tag ?

<a title="<%=(rsToolLinks.Fields.Item("toolDesc").Value)%>" href="<%=(rsToolLinks.Fields.Item("toolLink").Value)%>">
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
kevp75Commented:
i've noticed that firefox truncates the amount shown in that...
0
 
lshaneAuthor Commented:
Hi, kevp75.  Thanks so much.  That looks like the right direction, however, I may have omitted a crucial piece of information.  I would like the tooltip to appear as a hover, or "mouseover".  If the tooltip description (db field: "toolDesc") meets my need, then I will click that link to go the respective page (db field:  "toolLink").

Is it possible to have both of these going on with one link?
0
 
kevp75Commented:
use onMouseOver event instead of onclick
0
 
lshaneAuthor Commented:
OK - I added the "onmouseover".  Also, was the whole "function..." section of code supposed to be within "<script language="javascript"..></script> tags?

I did so, and changed to "onmouseover", but nothing happens when hovering over the link.

I created a basic "ASP VBScript" page with a recordset to display the "toolDesc" of the respective "toolID" from the URL.

Here's that code:

----------------------------------------------------------------------------------------------------------------------
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDData2_DSN.asp" -->
<%
Dim rsToolTip__MMColParam
rsToolTip__MMColParam = "1"
If (Request.QueryString("toolID") <> "") Then
  rsToolTip__MMColParam = Request.QueryString("toolID")
End If
%>
<%
Dim rsToolTip
Dim rsToolTip_numRows

Set rsToolTip = Server.CreateObject("ADODB.Recordset")
rsToolTip.ActiveConnection = MM_connPMDData2_DSN_STRING
rsToolTip.Source = "SELECT * FROM tool_links WHERE toolID = " + Replace(rsToolTip__MMColParam, "'", "''") + ""
rsToolTip.CursorType = 0
rsToolTip.CursorLocation = 2
rsToolTip.LockType = 1
rsToolTip.Open()

rsToolTip_numRows = 0
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<table width="200" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><%=(rsToolTip.Fields.Item("toolDesc").Value)%></td>
  </tr>
</table>

</body>
</html>
<%
rsToolTip.Close()
Set rsToolTip = Nothing
%>
--------------------------------------------------------------------------------------------------------------------

And here's the code for the link on the original page:

    <td width="520" valign="top"> <h5><img src="images/aqua-sphere.jpg" align="top"><a href="<%=(rsToolLinks.Fields.Item("toolLink").Value)%>" onmouseover="loadurl('tooltip.asp?id=<%=(rsToolLinks.Fields.Item("toolID").Value)%>','tool-tip');return false;"><%=(rsToolLinks.Fields.Item("toolName").Value)%></a><div id='tool-tip'></div> </h5></td>


Thanks so much, kevp75.  You've always been very helpful.
0
 
lshaneAuthor Commented:
Ok, kevp75.  I was able to make it work.  I overlooked the "id=" portion.  I changed that to "toolID=" and was able to view the descriptions.

Now - the last piece to this is  I wanted the descriptions to appear in a "pop-up" layer/window and disappear after a couple of seconds.  How could that be accomplished?

As it is, I have all the links looping horizontally (3 columns across and an indefinite number of rows until the EOF).  Currently, I can hover over each of the links, but all the descriptions appear underneath the top, left link.  It's like it's not following each link as they populated from the loop.  The next best thing would be to have a pop-up layer/window that could appear in the center portion of the screen, etc. and disappear after a couple of seconds, or so.

Please help and thank you.
0
 
kevp75Commented:
I would say, remove the  position:absolute; from the CSS and they should appear right next to the link, but that may also move the rest of the content down....

(without testing) I wonder if wrapping the link and the div in a container div would work:

<div><a....>thetext</a><div id="tool-tip></div></div>

?


as for making is disappear in a couple of seconds, I will need a bit to tool around with the function a bit.....maybe add in a setTimeout to change the visibility back to hidden?....
0
 
lshaneAuthor Commented:
OK - I just created a very basic page dynamically listing all the "Tool Links" (3 across / Infinite down).

I discovered that I get a response when the CSS page containing the "#tool-tip" ID is NOT linked.  However, when I link it = nothing happens.  Still, though, when it does respond, it is stil in the upper, left.  Removing "absolute" does cause the page to spread out.
0
 
kevp75Commented:
can you post me your version of the code please?
0
 
lshaneAuthor Commented:
WITH the linked CSS page:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/connPMDData2_DSN.asp" -->
<%
Dim rsToolList
Dim rsToolList_numRows

Set rsToolList = Server.CreateObject("ADODB.Recordset")
rsToolList.ActiveConnection = MM_connPMDData2_DSN_STRING
rsToolList.Source = "SELECT * FROM tool_links ORDER BY toolLink ASC"
rsToolList.CursorType = 0
rsToolList.CursorLocation = 2
rsToolList.LockType = 1
rsToolList.Open()

rsToolList_numRows = 0
%>
<%
Dim Repeat_rsToolList__numRowsHL
Dim Repeat_rsToolList__indexHL

Repeat_rsToolList__numRowsHL = -1
Repeat_rsToolList__indexHL = 0
rsToolList_numRows = rsToolList_numRows + Repeat_rsToolList__numRowsHL
%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
//Get Contents of another page, and display them inside an element
strTargetDiv = '';
function loadurl(dest, str1) {
     strTargetDiv = str1;
     document.getElementById(strTargetDiv).innerHTML = '<div id="loading">Loading content...</div>';
     try {
     xmlhttp = window.XMLHttpRequest?new XMLHttpRequest():
     new ActiveXObject("Microsoft.XMLHTTP");
     }
     catch (e) { /* do nothing */ }
     dest = dest + "&sid="+Math.random()
     xmlhttp.onreadystatechange = triggered;
     xmlhttp.open("GET", dest);
     xmlhttp.send(null);    
}
function triggered() {
     if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200)) {
            var txt = xmlhttp.responseText;
            var txtNod = document.createTextNode(txt);
            document.getElementById(strTargetDiv).style.display = '';
            document.getElementById(strTargetDiv).innerHTML = txt;
     }
}
</script>


<link href="Preflite_Site_Files/my_styles.css" rel="stylesheet" type="text/css">
</head>

<body>
<table width="550" border="0" cellspacing="10" cellpadding="0">
  <tr>



    <%
  ' Horizontal Looper
  While ((Repeat_rsToolList__numRowsHL <> 0) AND (NOT rsToolList.EOF))
%>
    <td><a href="<%=(rsToolList.Fields.Item("toolLink").Value)%>" onmouseover="loadurl('tooltip.asp?toolID=<%=(rsToolList.Fields.Item("toolID").Value)%>','tool-tip');return false;"><%=(rsToolList.Fields.Item("toolName").Value)%></a><div id='tool-tip'></div></td>
    <%
    'Horizontal Looper
    Repeat_rsToolList__indexHL=Repeat_rsToolList__indexHL+1
    Repeat_rsToolList__numRowsHL=Repeat_rsToolList__numRowsHL-1
    rsToolList.MoveNext()
    if len(nested_rsToolList)<=0 then
      nested_rsToolList = 1
    end if
    if ((Repeat_rsToolList__numRowsHL <> 0) AND (NOT rsToolList.EOF) AND (nested_rsToolList mod 3 = 0)) then
      Response.Write "</tr><tr>"
    end if
    nested_rsToolList = nested_rsToolList + 1
    'end horizontal looper
  Wend
%>




  </tr>
</table>

</body>
</html>
<%
rsToolList.Close()
Set rsToolList = Nothing
%>
0
 
lshaneAuthor Commented:
Here is my db layout for this table ("tool_links"):

Fields:  
{
toolID: automatic number
toolName: The title of the link on the user page
toolLink:  The URL of the actual link
toolDesc:  A description of the respective tool link
}
0
 
lshaneAuthor Commented:
... and here is what I pasted into the linked CSS file ("my_styles.css"):

#tool-tip{
      z-index:14001;
      width:400px;
      height:200px;
      border:2px solid #FF9900;
      background:#fff;
      padding:10px 0 10px 0;
      visibility:hidden;
      margin:13% 0 0 10%;
      overflow:auto;
      position: absolute;

      }
0
 
lshaneAuthor Commented:
Although I'm using an extension called the "Horizontal Looper", I also tried it with just a basic repeat region listing straight down the page, and got the same results.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now