#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0

    Question Need help getting JavaScript working in Netscape


    Hi,

    Can anyone help me get this JavaScript to work in both IE and NN (latest versions)?

    The page contains two IFrames, each within a div element. The frame is supposed to colapse when the link or button is clicked and expand when clicked again. I ran the page through W3C and it passed OK. The page works in IE but doesn't work in NN.

    Any ideas?

    Thanks for your help - Dave

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
      <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <
    title>JavaScript DHTML Example</title>
        <!-- ************ 
    Hide/Unhide SCRIPT STARTS HERE  ******************* -->
        <
    script type="text/JavaScript" defer="defer">
          <!--
            var 
    flgHideYahoo // Initialize Yahoo flag
            
    var flgHideGoogle // Initialize Google flag
            
    var flgHide // Initialize hide flag
            
    function ToggleLink (eobjdesc
            {
               var 
    sURL;
               var 
    sFrame;
               switch(
    e// Which div will be hidden or unhidden
               
    {
                  case 
    Yahoo:
                     if(
    flgHideYahoo == 0)
                       {
                          
    sFrame 'frmYahoo' // Name of the frame to unhide
                          
    sURL 'http://www.yahoo.com/' // URL to show when frame is unhidden
                          
    flgHide // Toggle whether this is a hide or unhide event
                          
    flgHideYahoo // Toggle the hide/unhide flag for this div
                       
    }
                      else
                       {
                          
    flgHide // Toggle whether this is a hide or unhide event
                          
    flgHideYahoo // Toggle the hide/unhide flag for this div
                       
    }
                  break;
                  case 
    Google:
                     if(
    flgHideGoogle == 0)
                       {
                          
    sFrame 'frmGoogle' // Name of the frame to unhide
                          
    sURL 'http://www.google.com/' // URL to show when frame is unhidden
                          
    flgHide // Toggle whether this is a hide or unhide event
                          
    flgHideGoogle // Toggle the hide/unhide flag for this div
                       
    }
                      else
                       {
                          
    flgHide // Toggle whether this is a hide or unhide event
                          
    flgHideGoogle // Toggle the hide/unhide flag for this div
                       
    }
                  break;
              } 
    // End switch
              
    if(flgHide == 1)
                 {
                    
    window.parent.frames(sFrame).location.href sURL
                    e
    .style.display "" // Unhide the div containing the iframe
                    
    obj.innerHTML '<input class="button" type="button" value="-">&nbsp;&nbsp;' e.id '&nbsp;' desc // Change the anchor display
                    
    obj.title "Hide " e.id " frame." // Change anchor Tool tip
                 
    }
               else
                 {
                    
    e.style.display "none" // Hide the div containing the iframe
                    
    obj.innerHTML '<input class="button" type="button" value="+">&nbsp;&nbsp;' e.id '&nbsp;' desc // Change the anchor display
                    
    obj.title "Unhide " e.id " frame." // Change anchor Tool tip
                 
    }
            } 
    // End ToggleLink
          //-->
        
    </script> 
    PHP Code:
        <!-- ************ Hide/Unhide SCRIPT ENDS HERE  ******************* -->
        <
    style type="text/css">
          <!--
            
    body {scrollbar-face-color:#009966;
                  
    scrollbar-track-color:#eeeeee;
                  
    scrollbar-arrow-color:#ffffff;
                  
    scrollbar-3Dlight-color:#eeeeee;
                  
    scrollbar-highlight-color:#ffffff;
                  
    scrollbar-shadow-color:#004080;
                  
    scrollbar-darkshadow-color:#000000;
                 
    }
            .
    button {color:#ffffff;
                     
    font-size:14;
                     
    font-weight:bold;
                     
    background-color:#009966;
                     
    width:18;
                     
    height:21;
                     
    cursor:hand;
                    }
          -->
        </
    style>
      </
    head>
      <
    body bgcolor="#FFFFFF">
        <!-- ************ 
    Hide/Unhide HTML STARTS HERE  ******************* -->
        <
    a href="#" style="text-decoration:none; font:bold 8pt Arial; color:#009966;" name="ActivateYahoo" id="ActivateYahoo" 
           
    onclick="JavaScript:ToggleLink(Yahoo,this,'Home Page')" title="Hide Yahoo frame.">
          <
    input class="button" type="button" value="-">&nbsp;&nbsp;Yahoo Home Page</a>
        <
    center><div id="Yahoo"><iframe name="frmYahoo" id="frmYahoo" 
                      
    height="40%" width="95%" frameborder="0" scrolling="auto" marginheight="0" 
                      
    src="http://www.yahoo.com" marginwidth="0">&nbsp;</iframe></div></center>
        <
    a href="#" style="text-decoration:none; font:bold 8pt Arial; color:#009966;" name="ActivateGoogle" id="ActivateGoogle" 
           
    onclick="JavaScript:ToggleLink(Google,this,'Search Engine')" title="Hide Google frame.">
          <
    input class="button" type="button" value="-">&nbsp;&nbsp;Google Search Engine</a>
        <
    center><div id="Google"><iframe name="frmGoogle" id="frmGoogle" 
                      
    height="40%" width="95%" frameborder="0" scrolling="auto" marginheight="0" 
                      
    src="http://www.google.com" marginwidth="0">&nbsp;</iframe></div></center>
        <!-- ************  
    Hide/Unhide HTML ENDS HERE   ******************* -->
      </
    body>
    </
    html
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    147
    Rep Power
    12
    Here is a (mostly) debugged version of your page. Things to note:

    - always use document.getElementById() to capture a page element. Avoid using the page hierarchy.
    - strings must have quotes around them in order to differentiate them from variables.
    - when you use an onClick method in your button, you do not need to preface it with javascript: (java script is even worse). You only need the the javascript: prefix when your function is called from an HREF.

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
        <
    head>
        <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
        <
    title>JavaScript DHTML Example</title>
        <
    script language="javascript" type="text/JavaScript" defer="defer">
        <!--
        var 
    flgHideYahoo // Initialize Yahoo flag
        
    var flgHideGoogle // Initialize Google flag
        
    var flgHide // Initialize hide flag
        
    function ToggleLink (eobjdesc) {
            var 
    sURL;
            var 
    sFrame;
            switch(
    e) { // Which div will be hidden or unhidden
                
    case 'Yahoo'// !!STRINGS NEED QUOTES!!
                    
    if(flgHideYahoo == 0) {
                        
    sFrame 'frmYahoo' // Name of the frame to unhide
                        
    sURL 'http://www.yahoo.com/' // URL to show when frame is unhidden
                        
    flgHide // Toggle whether this is a hide or unhide event
                        
    flgHideYahoo // Toggle the hide/unhide flag for this div
                    
    }
                    else {
                        
    flgHide // Toggle whether this is a hide or unhide event
                        
    flgHideYahoo // Toggle the hide/unhide flag for this div
                    
    }

                    break;

                case 
    'Google':
                    if(
    flgHideGoogle == 0) {
                        
    sFrame 'frmGoogle' // Name of the frame to unhide
                        
    sURL 'http://www.google.com/' // URL to show when frame is unhidden
                        
    flgHide // Toggle whether this is a hide or unhide event
                        
    flgHideGoogle // Toggle the hide/unhide flag for this div
                    
    }
                    else {
                        
    flgHide // Toggle whether this is a hide or unhide event
                        
    flgHideGoogle // Toggle the hide/unhide flag for this div
                    
    }
                    break;

            } 
    // End switch

            
    if(flgHide == 1) {
                
    // !!USE document.getElementById() TO MODIFY YOUR ELEMENTS!!
                
    document.getElementById(sFrame).href sURL
                document
    .getElementById(e).style.display "" // Unhide the div containing the iframe
                
    obj.innerHTML '<input class="button" type="button" value="-">&nbsp;&nbsp;' e.id '&nbsp;' desc // Change the anchor display
                
    obj.title "Hide " e.id " frame." // Change anchor Tool tip
            
    }
            else {
                
    document.getElementById(e).style.display "none" // Hide the div containing the iframe
                
    obj.innerHTML '<input class="button" type="button" value="+">&nbsp;&nbsp;' e.id '&nbsp;' desc // Change the anchor display
                
    obj.title "Unhide " e.id " frame." // Change anchor Tool tip
            
    }

        } 
    // End ToggleLink
        //-->
        
    </script>
        <style type="text/css">
        <!--
        body {
            scrollbar-face-color:#009966;
            scrollbar-track-color:#eeeeee;
            scrollbar-arrow-color:#ffffff;
            scrollbar-3Dlight-color:#eeeeee;
            scrollbar-highlight-color:#ffffff;
            scrollbar-shadow-color:#004080;
            scrollbar-darkshadow-color:#000000;
        }

        .button {
            color:#ffffff;
            font-size:14;
            font-weight:bold;
            background-color:#009966;
            width:18;
            height:21;
            cursor:hand;
        }
        -->
        </style>
        </head>

        <body bgcolor="#FFFFFF">
            <a href="#" style="text-decoration:none; font:bold 8pt Arial; color:#009966;" name="ActivateYahoo" id="ActivateYahoo" onclick="ToggleLink('Yahoo',this,'Home Page');" title="Hide Yahoo frame.">
                <input class="button" type="button" value="-">&nbsp;&nbsp;Yahoo Home Page
            </a>
            <br>
            <div id="Yahoo" align="center">
                <iframe name="frmYahoo" id="frmYahoo" height="40%" width="95%" frameborder="0" scrolling="auto" marginheight="0" src="http://www.yahoo.com" marginwidth="0">
                    &nbsp;
                </iframe>
            </div>

            <a href="#" style="text-decoration:none; font:bold 8pt Arial; color:#009966;" name="ActivateGoogle" id="ActivateGoogle" onclick="ToggleLink('Google',this,'Search Engine')" title="Hide Google frame.">
                <input class="button" type="button" value="-">&nbsp;&nbsp;Google Search Engine
            </a>

            <div id="Google" align="center">
                <iframe name="frmGoogle" id="frmGoogle" height="40%" width="95%" frameborder="0" scrolling="auto" marginheight="0" src="http://www.google.com" marginwidth="0">
                    &nbsp;
                </iframe>
            </div>
        </body>
    </html> 
    It still has a few bugs, mainly that it doesn't show at 40% height in IE or Mozilla Firebird (to big and small respectivly). It also seems to be interpreting the words 'Yahoo' and 'Google' next to the buttons as variables and is printing 'undefined in their place after a button is clicked. Also, none of your scrollbar styles seem to be working in either browser.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0
    Thanks for your help!

    You got me on the right track with the strings in quotes and getElementById tips. I was able to fix the undefined issue. Here is a page that is working much better than when I started.

    Test Page

    The 40% height and scrollbar colors works in IE 5.50.4807.2300CO but for some reason not in the latest browser versions.

    I think the height issue can be resolved with a javascript function to return a percentage of the actual window height.

    The scroll bar style may be one of those things that's going to work in some browsers and not in others.

    Thanks again for the great help!

    Dave

IMN logo majestic logo threadwatch logo seochat tools logo