views:

662

answers:

4

I have the following script in my homepage

$(function () { // same as $(document).ready(function () { })
  // assuming we have the open class set on the H2 when the HTML is delivered
  $('li.drawer h2:not(.open)').next().hide();

  $('h2.drawer-handle').click(function () {
    // find the open drawer, remove the class, move to the UL following it and hide it
    $('h2.open').removeClass('open').next().hide();

    // add the open class to this H2, move to the next element (the UL) and show it
    $(this).addClass('open').next().show();
  });
});

It works in Safari, but not in Firefox 3.08/3.1 beta3.

How can you get the above jQuery script work in Firefox?

[edit]

First lines of my index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"/>
<link href="template.css" type="text/css" rel="stylesheet"/>
<title>Abc</title>

<script type="text/javascript" src="jquery.js" />  

<script type="text/javascript"> 

! - - - - Above Code is at Here - - - - - 

</script>

</head>

The body of index.html

<body>
<div class="mainbody">

<h1 class="myheader">Test</h1>
<p>Test</p>

<ul class="drawers">

   <li class="drawer">
      <h2 class="drawer-handle open">Contact info</h2>
      <ul>

         <li>name
         </li>

         <li>
            <div class="">aaa
            </div>
         </li>
      </ul>
   </li>

   <li class="drawer">
      <h2 class="drawer-handle">Unpublished</h2>
      <ul>
         <li class="italic">
            <i>A</i> (2009).
         </li>
         <li class="italic">
            <i>aaa</i> (2008).
         </li>
      </ul>
   </li>     

   <li class="drawer">
      <h2 class="drawer-handle">Recent projects</h2>
      <ul>
         <li class="italic">
            Websites
         </li>

         <li class="italic">
            Search
            <form action="http://www.google.com/cse" id="cse-search-box">
            <div>
               <input type="hidden" name="cx" value="8834479:1qd7hky6khe" />
               <input type="hidden" name="ie" value="UTF-8" />
               <input type="text" name="q" size="31" />
               <input type="submit" name="sa" value="Search" />
            </div>
            </form>
            <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"&gt;&lt;/script&gt;
         </li>

      </ul>
   </li>     

</ul>


</div>

</body>
</html>
+2  A: 

It works for me in Firefox 3.0.9

What exactly is not working?

superUntitled
I updated one of my Firefoxes, and I have the same problem. I get the same problem in safe mode too. This means that addons are not the problem. The problem occurs for me in OS X and in Ubuntu too. This suggests me that something else must be wrong in the code.
Masi
@super: jQuery does not work at all in Firefox.
Masi
Works for me in 3.0.9 too.
Daniel Moura
It seems that our settings in Firefoxes somehow differ. Anyway, I got the problem solved by changing my code slightly. You can see it above.
Masi
+2  A: 

My guess is that you have invalid HTML which causes some wrong DOM structure in Firefox. But it is hard to tell without looking at your code.

pjesi
I posted the code.
Masi
My guess was right, you can't use <script /> but should rather use <script></script>
pjesi
+1  A: 

Why are your tags in your jquery selectors in uppercase? By your doctype, you're using XHTML, and all tags must be lowercase. Not sure if that'll make a difference, but you should change H2 => h2, etc.

miketaylr
I fixed the capitalization. The same problem persists.
Masi
+1  A: 

I got the code to work in Firefox by replacing the following

<script type="text/javascript" src="jquery.js" />

to

<script type="text/javascript" src="jquery.js"></script>
Masi