Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hover text showing up under graphic in Netscape

    I have some hover text that shows up behind a graphic in Netscape so you can't read it.

    I'm not sure exactly where this change should be made ????

    Style sheet entry:

    #contentarea a.glossarytip {
    color: #75A1DA;
    border-bottom: 1px dashed #75A1DA;
    text-decoration: none;
    cursor: default;
    }

    html page:

    <a onmouseover="showTip(event,'tip20')" onmouseout="hideTip('tip20')" class="glossarytip">Tip Name</a><br>
    <div id="tip20" onmouseover="hoverTip('tip20')" onmouseout="closeTip('tip20')" class="glossarytip">
    Tip text
    </div>

    <script language="javascript">
    var timeout_reference;
    var closeTipId;

    var glossaryBackCover;
    var glossaryBackCoverTimeoutReference;


    function showTip(e, tipId) {
    // Close any open glossary tips that haven't timed out yet (ex. quickly roll from one tip to another)
    clearTimeout(timeout_reference);
    var divs = document.getElementsByTagName('div');
    for (x=0; x<divs.length; x++) {
    if (divs[x].className == 'glossarytip') {divs[x].style.visibility = 'hidden';}
    }


    // Find position of the glossary link that we moused over
    var x = 0;
    var y = 0;
    var offsetX = 3;
    var offsetY = 3;

    if (e.pageX || e.pageY) {
    x = e.pageX + offsetX;
    y = e.pageY + offsetY;
    } else if (e.clientX || e.clientY) {
    x = e.clientX + offsetX + document.documentElement.scrollLeft;
    y = e.clientY + offsetY + document.documentElement.scrollTop;
    }


    var tipObj = document.getElementById(tipId);
    var viewportWidth = getViewportWidth();
    var viewportHeight = getViewportHeight();


    /* if the current page is a div scroller window and the page has been scrolled in IE, recalculate
    viewport height and offsets for tip to be positioned correctly */
    var ieDivScroller;
    if (document.getElementById('iecontentscroller')) {
    ieDivScroller = document.getElementById('iecontentscroller');
    if (ieDivScroller.scrollTop > 0) {
    y += parseFloat(ieDivScroller.scrollTop);
    viewportHeight = parseFloat(document.getElementById('contentarea').offsetHeight);
    }
    }


    //test to see if tip will be positioned off screen horizontally
    if ((x + offsetX + tipObj.offsetWidth) > viewportWidth + document.documentElement.scrollLeft ) {
    var tipshown = viewportWidth + document.documentElement.scrollLeft - x;
    var overlap = tipObj.offsetWidth - tipshown;
    x = x - overlap - offsetX;
    }


    //test to see if tip will be positioned off screen vertically
    if ((y + offsetY + tipObj.offsetHeight) > viewportHeight + document.documentElement.scrollTop ) {
    var tipshown = viewportHeight + document.documentElement.scrollTop - y;
    var overlap = tipObj.offsetHeight - tipshown;
    y = y - overlap - offsetY;
    }

    /*
    alert( 'y ' + y +
    '\noffsetY ' + offsetY +
    '\ntipheight ' + tipObj.offsetHeight +
    '\nviewportheight ' + viewportHeight +
    '\ndocscrolltop ' + document.documentElement.scrollTop);
    */

    //set new values for tip
    tipObj.style.left = x + "px";
    tipObj.style.top = y + "px";
    tipObj.style.zIndex = 30000; //Netscape fix when shown infront of a drop down
    tipObj.style.visibility = "visible";

    //Only activate IFRAME as a background if running on Microsoft IE
    //Since the command navigator.appName in Opera also returns 'Microsoft Internet Explorer',
    //we have to check navigator.userAgent to see is this really MSIE or Opera
    //Note: IFRAME causes problem in Opera, so this should only be turn on for IE
    if(glossaryBackCover == null && navigator.appName.indexOf("Microsoft") != -1 && navigator.userAgent.indexOf("Opera") == -1){
    glossaryBackCover = document.createElement("IFRAME");
    glossaryBackCover.className = "glossaryBackCover";
    glossaryBackCover.style.position="absolute";
    glossaryBackCover.style.zIndex=29999;
    //document.body.insertBefore(glossaryBackCover);
    //document.body.appendChild(glossaryBackCover);
    document.getElementById('contentarea').appendChild(glossaryBackCover);//Needed in contentarea for tip to work in div scroller window
    }

    if(glossaryBackCover != null){
    clearTimeout(glossaryBackCoverTimeoutReference);
    glossaryBackCover.style.left = x + "px";
    glossaryBackCover.style.top = y + "px";
    glossaryBackCover.style.width = tipObj.offsetWidth;
    glossaryBackCover.style.height = tipObj.offsetHeight;
    glossaryBackCover.style.visibility = "visible";
    }
    }

    function hoverTip(tipId) {
    clearTimeout(timeout_reference);
    document.getElementById(tipId).style.visibility = "visible";

    if(glossaryBackCover != null){
    clearTimeout(glossaryBackCoverTimeoutReference);
    glossaryBackCover.style.visibility = "visible";
    }
    }

    function hideTip(tipId) {
    closeTipId = tipId;
    timeout_reference = setTimeout("closeTip(closeTipId)",600);
    }

    function closeTip(tipId) {
    if (glossaryBackCover != null) {
    glossaryBackCoverTimeoutReference = setTimeout('glossaryBackCover.style.visibility = "hidden";', 15);
    }
    document.getElementById(tipId).style.visibility = "hidden";
    }



    function getViewportWidth() {
    var width = 0;
    if (document.documentElement && document.documentElement.clientWidth) {
    width = document.documentElement.clientWidth;
    } else if (document.body && document.body.clientWidth) {
    width = document.body.clientWidth;
    } else if (window.innerWidth) {
    width = window.innerWidth - 18;
    }
    return width;
    }

    function getViewportHeight () {
    var height = 0;
    if (document.documentElement && document.documentElement.clientHeight && !window.opera) {
    height = document.documentElement.clientHeight;
    } else if (document.body && document.body.clientHeight) {
    height = document.body.clientHeight;
    } else if (window.innerHeight) {
    height = window.innerHeight - 18;
    }
    return height;
    }
    </script>
    Last edited by bpattenson; 07-09-2005 at 09:54 PM.

  • #2
    Regular Coder ArcticFox's Avatar
    Join Date
    Jan 2004
    Location
    Vostok Station, AQ
    Posts
    602
    Thanks
    35
    Thanked 3 Times in 3 Posts

    Internet Explorer

    Try this:

    #contentarea a.glossarytip {
    color: #75A1DA;
    border-bottom: 1px dashed #75A1DA;
    text-decoration: none;
    cursor: default;
    z-index:1000;
    }
    <div> - putting your mind in a box since 1997

  • #3
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Nope that didn't work. I think this probably is a javascript issue with Netscape. Then the other item I failed to mention is that the graphic is a flash file so that could be the cause as well.

    Thanks for trying.. I'll keep digging.

  • #4
    New to the CF scene
    Join Date
    Oct 2002
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bpattenson
    Nope that didn't work. I think this probably is a javascript issue with Netscape. Then the other item I failed to mention is that the graphic is a flash file so that could be the cause as well.

    Thanks for trying.. I'll keep digging.
    make sure your Param and embed tags have wmode=transparent

    cheers
    ^⌠";....astro....;"⌠^

  • #5
    New to the CF scene
    Join Date
    May 2005
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oh you rock! Thank you Astro, that worked!


  •  

    Posting Permissions

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