...

View Full Version : Hover showing behind flash file issue in Netscape



bpattenson
07-11-2005, 04:33 PM
I have some hover text that shows up behind a flash graphic in Netscape so you can't read it. In IE it shows in front of the flash file graphic.

Is there some easy way to have it show above everything else?

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>

astro_sk
07-13-2005, 03:43 AM
I have some hover text that shows up behind a flash graphic in Netscape so you can't read it. In IE it shows in front of the flash file graphic.

Is there some easy way to have it show above everything else?

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>

make sure, in your flash object, you have wmode=transparent in both the params (for IE) and embed(for Netscape etc.) tags.

Peace

jbot
07-13-2005, 10:08 AM
make sure, in your flash object, you have wmode=transparent in both the params (for IE) and embed(for Netscape etc.) tags.

you should also be using the object tag for Mozilla (Netscape) based browsers. you'd only need embed for NN4.x, and it's practically not used anymore, so really shouldn't need to bother with it at all.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum