Reputation: 141110

Unable to get a jQuery script work in Firefox

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">
<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&lang=en"></script>
         </li>

      </ul>
   </li>     

</ul>


</div>

</body>
</html>

Upvotes: 0

Answers (4)

Léo Léopold Hertz 준영

Reputation: 141110

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

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

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

Upvotes: 1

miketaylr

Reputation: 1976

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.

Upvotes: 1

pjesi

Reputation: 4051

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.

Upvotes: 2

superUntitled

Reputation: 22527

It works for me in Firefox 3.0.9

What exactly is not working?

Upvotes: 2

Unable to get a jQuery script work in Firefox

Answers (4)

Related Questions