...

View Full Version : Hover text showing up under graphic in Netscape



bpattenson
07-09-2005, 09:51 PM
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>

ArcticFox
07-11-2005, 07:03 AM
Try this:

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

bpattenson
07-11-2005, 04:25 PM
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.

astro_sk
07-13-2005, 03:45 AM
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

bpattenson
07-14-2005, 08:59 PM
Oh you rock! Thank you Astro, that worked!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum