[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2663
  • Last Modified:

Mouseover a datalist item and calling up dynamic data?

I'm trying to figure out a good way to do a mouseover event on a datalist and then have that mouseover produce a popup tooltip that shows the details for that client name. I currently have a datalist being loaded onto my main page and I have the mouseover portion working, it's just not showing the data that I'm after.

Here is my current code:

    <div>
        <asp:DataList ID="DataList1" runat="server">
        <HeaderTemplate><table></HeaderTemplate>
        <ItemTemplate>
               
        <tr><td><a
   onmouseover="ShowContent('ClientName'); return true;"
   onmouseout="HideContent('ClientName'); return true;"
   href="javascript:ShowContent('ClientName')">
<%# Eval("Client Name") %>
</a>
<div
   id="ClientName"
   style="display:none;
      position:absolute;
      border-style: none;
      background-color: white;
      padding: 0px;">

<%# Eval("Client Name") %>

</div>
</td></tr>
       
        </ItemTemplate>
        <FooterTemplate> </table> </FooterTemplate>
        </asp:DataList>&nbsp;</div>

Currently when I perform the mouseover on each datalist item, it only shows the name of the first item in the list. I assumed, since I'm still within the same datalist, that it would just 'work' and pull up the details, but it's not.

Oh and I'm populating the datalist from codebehind using a datatable.

Thanks.
0
ApexCo
Asked:
ApexCo
  • 3
  • 2
  • 2
2 Solutions
 
craskinCommented:
you can add this in a script block (not the runat='server' block)

<script type="text/javascript">

    var offsetfromcursorX=12 //Customize x offset of tooltip
    var offsetfromcursorY=10 //Customize y offset of tooltip

    var offsetdivfrompointerX=10 //Customize x offset of tooltip DIV relative to pointer image
    var offsetdivfrompointerY=14 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).

    document.write('<div id="dhtmltooltip"></div>') //write out tooltip DIV
    document.write('<img id="dhtmlpointer" src="images/arrow2.gif">') //write out pointer image

    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") : ""

    var pointerobj=document.all? document.all["dhtmlpointer"] : document.getElementById? document.getElementById("dhtmlpointer") : ""

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

    function ddrivetip(thetext, thewidth, thecolor){
    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 nondefaultpos=false
    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 winwidth=ie&&!window.opera? ietruebody().clientWidth : window.innerWidth-20
    var winheight=ie&&!window.opera? ietruebody().clientHeight : window.innerHeight-20

    var rightedge=ie&&!window.opera? winwidth-event.clientX-offsetfromcursorX : winwidth-e.clientX-offsetfromcursorX
    var bottomedge=ie&&!window.opera? winheight-event.clientY-offsetfromcursorY : winheight-e.clientY-offsetfromcursorY

    var leftedge=(offsetfromcursorX<0)? offsetfromcursorX*(-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=curX-tipobj.offsetWidth+"px"
    nondefaultpos=true
    }
    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+offsetfromcursorX-offsetdivfrompointerX+"px"
    pointerobj.style.left=curX+offsetfromcursorX+"px"
    }

    //same concept with the vertical position
    if (bottomedge<tipobj.offsetHeight){
    tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px"
    nondefaultpos=true
    }
    else{
    tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px"
    pointerobj.style.top=curY+offsetfromcursorY+"px"
    }
    tipobj.style.visibility="visible"
    if (!nondefaultpos)
    pointerobj.style.visibility="visible"
    else
    pointerobj.style.visibility="hidden"
    }
    }

    function hideddrivetip(){
    if (ns6||ie){
    enabletip=false
    tipobj.style.visibility="hidden"
    pointerobj.style.visibility="hidden"
    tipobj.style.left="-1000px"
    tipobj.style.backgroundColor=''
    tipobj.style.width=''
    }
    }

    document.onmousemove=positiontip

</script>

then you can just do something like:

<a ONMOUSEOVER="ddrivetip('<%#String.Format("{0:d}",Container.DataItem("CREATEDDATE")) %> <br> <%#Container.DataItem("NOTE") %>')"; ONMOUSEOUT="hideddrivetip()"><%# Eval("Client Name") %></a>

i just used createddate and note as examples of fields you can throw in there in any conceivable way with a break between them.
0
 
apb2Commented:
Hi ApexCo

Just off the top of my head i can see you will have quite a number of div's with the same client name. So when your are doing a mouse over the first on on the page is being populated. What you'll need to do is have each div with a seperate name and refence that div. Giving each div a unquie client id. Or what i like to do is generate a div on the fly. See what you think of this:

First this script: What this script will do is add a div to you page dynamically and position it next to your mouse (copy and paste):

<script language="javascript">
      /*<![CDATA[*/
      
            
            var offsetx = 12;                                                              
            var offsety =  8;                                                              
            
            function newelement(newid)
            {
                  if(document.createElement)
                  {
                        var el = document.createElement('div');
                        el.id = newid;    
                        with(el.style)
                        {
                              display = 'none';
                              position = 'absolute';
                        }
                        el.innerHTML = '&nbsp;';
                        document.body.appendChild(el);
                  }
            }
            var ie5 = (document.getElementById && document.all);
            var ns6 = (document.getElementById && !document.all);
            var ua = navigator.userAgent.toLowerCase();
            var isapple = (ua.indexOf('applewebkit') != -1 ? 1 : 0);
            function getmouseposition(e) // thanks to Grant O. Anderson from Arizona State University
            {
                  if(document.getElementById)
                  {
                        var iebody=(document.compatMode && 
                              document.compatMode != 'BackCompat') ?
                                    document.documentElement : document.body;
                        pagex = (isapple == 1 ? 0 : (ie5)?iebody.scrollLeft:window.pageXOffset);
                        pagey = (isapple == 1 ? 0 : (ie5)?iebody.scrollTop:window.pageYOffset);
                        mousex = (ie5)?event.x:(ns6)?clientX = e.clientX:false;
                        mousey = (ie5)?event.y:(ns6)?clientY = e.clientY:false;

                        var lixlpixel_tooltip = document.getElementById('tooltip');
                        lixlpixel_tooltip.style.left = (mousex+pagex+offsetx) + 'px';
                        lixlpixel_tooltip.style.top = (mousey+pagey+offsety) + 'px';
                  }
            }
            function tooltip(message)
            {
                  if(!document.getElementById('tooltip')) newelement('tooltip');
                  var lixlpixel_tooltip = document.getElementById('tooltip');
                  lixlpixel_tooltip.innerHTML = message;
                  lixlpixel_tooltip.style.display = 'block';
                  document.onmousemove = getmouseposition;
            }
            function exit()
            {
                  document.getElementById('tooltip').style.display = 'none';
            }
            
      
            /*]]>*/
</script>
now your datalist

in your itemtemplate

<ItemTemplate>
<span class="tip" onmouseover="tooltip('<%# Eval("Client Name") %>'); " onmouseout="exit();">
<%# Eval("Client Name") %>
</span>
</ItemTemplate>

Hope that's what you're after

apb2
0
 
ApexCoAuthor Commented:
apb2, that's pretty awesome and does exactly what I was looking for.

A couple of things though.
1) The last element in my datalist doesn't have any data popping up on the mouseover, but gives me a javascript error of object required and it's pointing to the exit portion. It only happens on that last element though. And if I mouseover another element and exit there is no error...but never any data on that last one.

2) How can I style the popup portion? I have tried all kind of CSS stuff and I can't get anything to stick. Any pointers there?

Thanks!
0
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.

 
craskinCommented:
1) could be a stray quote in the actual data you're trying to display that's prematurely exiting the javascript
0
 
ApexCoAuthor Commented:
Good thought, but I am not seeing anything. Here is the string I'm using for the data:

                    <span class="tip" onmouseover="tooltip('<%# Eval("Client Name") %><br /><%# Eval("ClientID") %><br /><%# Eval("MatterID") %><br /><%# Eval("Matter Name") %><br /><%# Eval("Status") %><br /><%# Eval("AOP Code") %><br /><%# Eval("Area of Practice") %><br /><%# Eval("Responsible Attorney") %><br /><%#String.Format("{0:d}",Container.DataItem("Date Opened")) %>')" onmouseout="exit();">
                    <%# Eval("Client Name") %>
                    </span>

My biggest hurdle is styling the popup, but I'm striking out everywhere.
0
 
ApexCoAuthor Commented:
I figured out the errors, was missing a semicolon *sigh*.

I believe this question has been fully answered, and I would like to split the points with you both for your help. I will ask another question on the styling since I feel that is a separate issue.
0
 
apb2Commented:
Sorry i didn't get back to you, glad that worked for you.

apb
0

Featured Post

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!

  • 3
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now