Show/Hide div NOT workink in FF

Discussion in 'JavaScript' started by zed420, Dec 22, 2008.

0
  1. #1
    Hi All
    Can anyone please tell me why doesn't this code work in Firefox. I'm using it for showing and hiding the divs. Woks fine in IE.
    Some help will be greatly appreciated.
    <script type="text/javascript"><!--
var lastDiv = "";
function showDiv(divName) {
// hide last div
if (lastDiv) {
document.getElementById(lastDiv).className = "hiddenDiv";
}
if (divName && document.getElementById(divName)) {
document.getElementById(divName).className = "visibleDiv";
lastDiv = divName;
}
}
//-->
</script>
    Code (markup):
    Thanks
    Zed
     
    zed420, Dec 22, 2008 IP
  2. ferdousx

    ferdousx Peon

    Messages:
    168
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    the problem can also be in the css or html. can u provide those?
     
    ferdousx, Dec 22, 2008 IP
  3. zed420

    zed420 Member

    Messages:
    60
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    Thanks you were right problem was in html i was using <p> instead of <div> the name of hiden div.

    Thanks
    zed
     
    zed420, Dec 26, 2008 IP
  4. jefzalez

    jefzalez Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hello, I am a complete novice to javascript and css. I have taken this piece of code and have it working correctly in Firefox, but cannot get it to work in IE.Thank you for any advice.


    I am attaching the HTML below:
    Does it have anything to do with Doctype?

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Get the National Hurricane Center LIVE Video Feed...</title>



<script type="text/javascript" language="JavaScript">
<!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//-->
</script>


</head>

<table width="310" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="images/top_curve2.jpg" alt="AEN NHC LIVE VIDEO" width="299" height="30" /></td>
        </tr>
      <tr>
        <td></td>
        </tr>
      <tr>
        <td>     
          <a  onRelease="ShowContent('step1div'); return true;"
   href="javascript:ShowContent('step1div')" >

<img src="images/step1.jpg"  width="299" height="120" border="0"/></a>
        
        <div 
   id="step1div" 
   style="display:none; 
      position:absolute; 
      left:490px; 
      top:178px; 
      border-style: none; 
            padding: 0px;">

       <a onRelease="HideContent('step1div'); return true;"
   href="javascript:HideContent('step1div')" <img src="images/step1_full_down.jpg"  width="299" height="382" border="0"/>
       
        </a>  </div>   
 





</td>
        </tr>
      <tr>
        <td>               
         
          <a  onclick="ShowContent('step2div'); return true;"
   href="javascript:ShowContent('step2div')" >

<img src="images/step2.jpg"  width="299" height="120" border="0"/></a>
        
        <div 
   id="step2div" 
   style="display:none; 
          position:absolute; 
      left:490px; 
      top:298px; 
      border color:red;
      border-style: none; 
             padding: 0px;">



       <a onclick="HideContent('step2div'); return true;"
   href="javascript:HideContent('step2div')" <img src="images/step2_b_full_down.jpg"  width="299" height="223" border="0"/>
          </a>
          </div>
         
         
         </td>
      </tr>
      <tr>
        <td>
        
           <a  onclick="ShowContent('step3div'); return true; "
   href="javascript:ShowContent('step3div')" >

<img src="images/step3.jpg"  width="299" height="160" border="0"/></a>
        
        <div 
   id="step3div" 
   style="display:none;
       position:absolute; 
      left:490px; 
      top:418px; 
      border-style: none;
                padding: 0px;">

       <a onclick="HideContent('step3div'); return true;"
   href="javascript:HideContent('step3div')" <img src="images/step3_c_full_down.jpg"  width="299" height="160" border="0" />
          </a>
          </div>
        
        
    
        
        </td>
      </tr>
      <tr>
        <td>
        
     
      
   
        
       
        
        
        <img src="images/bottom_curve2.jpg" alt="AEN National Hurricane Center LIVE Feed" width="299" height="30" /></td>
        </tr>
    </table>
   
</body>
</html>
    Code (markup):
     
    jefzalez, Jun 12, 2009 IP