asked on

Problem with child div's visibility

I have the following HTML in my page:

<div class="transcriptLink" id="transcriptLink">
<a id="anchor1000" name="anchor1000"
onclick="toggleTranscript('videoAsset','winBody1000',this.id)"
onmouseout="window.status=''; return true"
onmouseover="window.status='Show Transcript'; return true"
href="javascript://">Show Transcript</a>
</div>

<div style="visibility: hidden; height: 400px; width: 512px" class="winBody" id="winBody1000">
<div style="width: 502px" class="toolBar" id="toolBar">FCP_T1_P1
<div class="closeWin" id="closeWin">
<a onclick="toggleTranscript('videoAsset','winBody1000','anchor1000')" href="javascript://">
<img src="../images/iconClose.gif"/>
</a>
</div>
</div>

<div style="height: 365px; width: 496px" class="contentArea" id="contentArea">(no transcript)</div>

</div>

My toggleTranscript function looks like this:

function toggleTranscript(videoId, transcriptId, anchorId) {
var divId = document.getElementById(transcriptId);

if (divId.style.visibility == "hidden") {
toggleBox(videoId, 0);
toggleBox(transcriptId, 1);
} else {
toggleBox(videoId, 1);
toggleBox(transcriptId, 0);
}
}

/* Function for showing and hiding layers (divs) */
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{

var obj = document.getElementById(szDivID);
obj.style.visibility = iState ? "visible" : "hidden";

}

The problem I'm having is that in Mozilla - the div "contentArea" does not show up (Mozilla 1.1a/Windows XP)

And if I add the following fix, it shows up in Mozilla, but created problem in IE 5.2.1/Mac OS X.

// wierd - mozilla counts 3 more than there is
if (divName.hasChildNodes()) {
for (i = 0; i < divName.childNodes.length; i++) {
if (!isUndefined(divName.childNodes.item(i).id)) { // fix for mozilla
divName.childNodes.item(i).style.visibility = "visible"; // ie5/mac chokes here
}
}
}

function isUndefined(value) {
var undef;
return value == undef;
}

Any ideas?

Chandramouli k

why dont u write for code for separate browsers.

function getBrowser()
{
var appName = navigator.appName;
alert(appName.indexOf("Microsoft"));
if(appName.indexOf("Microsoft") != -1)
alert("IE");
//code for IE
if (appName.indexOf("Mozilla") != -1)
alert("Mozi");
//code for Mozilla
}

Chandramouli k

use if..else if; not two separate if cases.

Chandramouli k

u can even write for different versions of the same browser.

http://javascriptkit.com/javatutors/navigator.shtml

just search for "Javascript Navigator Object" and u will find lot of links.

mraible

ASKER

This is what I've done, but I was hoping for a better solution. Specifically, why does this not work in IE/Mac:

divName.childNodes.item(i).style.visibility = "visible";

dapperry

This is just a stab in the dark, but...

Try:

divName.childNodes.item(i).style.visibility = "";

toggling to:

divName.childNodes.item(i).style.visibility = "hidden";

:) dapperry

mraible

ASKER

// BEGIN OF MOZILLA PATCH
if (divName.hasChildNodes() && (navigator.userAgent.indexOf("Gecko") > -1)) {
for (i = 0; i < divName.childNodes.length; i++) {
if (!isUndefined(divName.childNodes.item(i).id)) { // fix for mozilla
divName.childNodes.item(i).style.visibility = iState ? "visible" : "hidden";
}
}
}
// END OF PATCH

ASKER CERTIFIED SOLUTION

ComTech

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial