Solved

Problem with child div's visibility

Posted on 2002-07-10
7
507 Views
Last Modified: 2008-02-01
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?
0
Comment
Question by:mraible
7 Comments
 
LVL 5

Expert Comment

by:kcm76
ID: 7145357
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
     }

0
 
LVL 5

Expert Comment

by:kcm76
ID: 7145360
use if..else if; not two separate if cases.
0
 
LVL 5

Expert Comment

by:kcm76
ID: 7145364
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.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 1

Author Comment

by:mraible
ID: 7146545
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";

0
 
LVL 3

Expert Comment

by:dapperry
ID: 7149942
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
0
 
LVL 1

Author Comment

by:mraible
ID: 7150426
// 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
0
 

Accepted Solution

by:
ComTech earned 0 total points
ID: 7150638
This question will be placed in PAQ.

Regards,
ComTech
CS @ EE
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now