CODEWITHSUNDEEP
javascriptjqueryhtml
Taza
Taza

Reputation: 1

'$ is undefined' error jQuery

So I've got the following HTML and jQuery code, and whenever I try to load the page, Firebug gives me the 'ReferenceError: $ is undefined' error; as such, the jQuery code doesn't work. I'm using Coda 2.0.9 on Mavericks. I've loaded the jQuery library (using Google CDN) before the jQuery UI library, and both of those before the script I've written. In the Net section of Firebug, the only request that it shows is the font from Google Fonts. This is just a splash page so the code is minimal. For the life of me I can't figure this out so any help would be much appreciated.

<meta name="description" content="Description here" >
<title>This site is being updated</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Signika+Negative' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">

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


        <h1 class="maintitle"> This site is getting cleared up! </h1>

        <img class="construction" src="images/construction_800.png">

        <div id='wrapper' style='text-align:center;width:auto; margin: 0px 90px'>    
            <div style='float:left;width:50%'> 
              <strong>Office 1</strong> <br>
              p. xxx.xxx.xxxx <br>
              f. xxx.xxx.xxxx
            </div>    
            <div style='float:right;width:50%'>   
                <strong>Office 2</strong> <br>
                p. xxx.xxx.xxxx <br>
                f. xxx.xxx.xxxx
            </div>
        </div>

        <p class="comeback"><strong>Please check back soon for the updated site</strong></p>

    </body>

jQuery:

 $(document).ready(function() {
        $(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
    });

Upvotes: 0

Views: 8032

Answers (3)

Joel Small
Joel Small

Reputation: 197

You're loading in Jquery Twice in the header.

Remove the last line

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

The actual issue is that there is a conflict somewhere with the $ handler that jQuery uses.

If so, changing $ to jQuery like @Choineck should work.

Upvotes: 1

Tom Tom
Tom Tom

Reputation: 3698

I think the problem is that you have a slight delay getting the jQuery from ajax.google But you could also try something like

<script language="javascript" type="text/javascript">
    $j = jQuery.noConflict();
</script>

Then

$j("...")

Upvotes: 0

Choinek
Choinek

Reputation: 313

jQuery(document).ready(function($) {
  $(".maintitle", ".construction", "div", ".comeback").fadeIn("slow");
});

Upvotes: 0

Related Questions