SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Tooltip in an iframe needs to be displayed on parent window

    I have some script that creates a tooltip (<div>) when you hover over certain information with in a table. the problem is that this table is in an iframe inside of a page. when the tooltip becomes too big for the iframe the viewable sections get cut off. what i would like to do is get it to layer over the parent window so that the entire div shows not just a piece of it. any help?

    thanks in advance!

  2. #2
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when the tooltip becomes too big for the iframe the viewable sections get cut off.
    Obviously content in your iframe, like your tooltip <div> can't spill over onto the main page. You have to put the <div> on the main page if you want it to be completely visible.

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok heres my 1 file

    Code:
    <html>
    <head>
    <style>
    #dhtmltooltip{position:absolute;left:-300px;width:150px;border:1px solid black;padding:2px;background-color:#8C9EB5;visibility:hidden;z-index:100;color:#FFFFFF;font-weight:bold;filter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);}
    .toolTipHeader{padding:0;font-size:10px;color:#FFFFFF;font-weight:bold;}
    .toolTip{padding:0;font-size:10px;color:#FFFFFF;nowrap:nowrap;}
    </style>
    </head>
    <body>
    <script type="text/javascript">
    var offsetfromcursorX=5 //Customize x offset of tooltip
    var offsetfromcursorY=0 //Customize y offset of tooltip
    var offsetdivfrompointerX=3 //Customize x offset of tooltip DIV relative to pointer image
    var offsetdivfrompointerY=10 //Customize y offset of tooltip DIV relative to pointer image. Tip: Set it to (height_of_pointer_image-1).
    parent.document.open() //open doc
    parent.document.write('<div id="dhtmltooltip"></div>') //write tooltip DIV to doc
    parent.document.close() //close doc
    var ie=parent.document.all
    var ns6=parent.document.getElementById && !parent.document.all
    var enabletip=false
    var ContentInfo = ""
    if (ie||ns6)
      var tipobj=parent.document.all? parent.document.all["dhtmltooltip"] : parent.document.getElementById? parent.document.getElementById("dhtmltooltip") : ""
    
    function ietruebody(){
      return (parent.document.compatMode && parent.document.compatMode!="BackCompat")? parent.document.parent.documentElement : parent.document.body
    }
    
    function tip(TTitle, theWidth){
    alert(parent.document.height);
    ContentInfo = '<table>'+
                    '<tr><td class="toolTipHeader">Ratings</td><td class="toolTipHeader">Label</td><td class="toolTipHeader">Criteria</td></tr>'+
                    '<tr><td class="toolTip">1</td><td class="toolTip">Good</td><td class="toolTip">Average speed for typing 1 word a minute</td></tr>'+
                    '<tr><td class="toolTip">2</td><td class="toolTip">Excellent</td><td class="toolTip">Average speed for typing 10 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                    '<tr><td class="toolTip">3</td><td class="toolTip">Poor</td><td class="toolTip">Average speed for typing 100 words a minute</td></tr>'+
                  '</table>';
      if (ns6||ie){
        if (typeof theWidth!="undefined") tipobj.style.width=theWidth+"px";
        tipobj.innerHTML=ContentInfo;
        enabletip=true;
        return false;
      }
    }
    
    function positiontip(e){
      if (enabletip){
        tipobj.style.left="100px"
        tipobj.style.visibility="visible"
      }
    }
    
    function hidetip(){
      if (ns6||ie){
        enabletip=false
        tipobj.style.visibility="hidden"
        tipobj.style.left="-1000px"
        tipobj.style.backgroundColor=''
        tipobj.style.width=''
      }
    }
    parent.document.onmousemove=positiontip
    </script>
    <span onMouseover="tip('', 300)" onMouseout="hidetip()">tooltip</span>
    </body>
    </html>
    and heres my second file
    Code:
    <html>
    <body align="center" valign="center">
    <iframe src="fun.jsp" width="100%"></iframe>
    </body>
    </html>
    i need to let this tooltip expand outside of the iframe instead of only inside. i thought there was a way in javascript to do this. if not what other technology will let me do this?

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Portsmouth UK
    Posts
    1,489
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •