tags:

views:

60

answers:

1

I'm very new to jQuery and javascript in general, so maybe there's something I've missed.

I have a html page with a link to the latest version of jQuery in the head...

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

But any jQuery code that I try to execute anywhere... in the head or a separate .js file, won't run when I load the page. However normal javascript does.

Firebug acknowledges that the jQuery library has loaded when I click Script or Dom... the console will even accept and run my jQuery code with no hassles.

Here's the html... yes it is html5 and it works fine all browsers besides Opera and IE.

<!DOCTYPE HTML>
<html>
    <head>
        <title>Produkshunator</title>   

        <link rel="stylesheet" type="text/css" href="styles/layout.css" />
        <link rel="stylesheet" type="text/css" href="styles/skins.css" />
        <link rel="stylesheet" type="text/css" href="styles/formlayout.css" />  
        <link rel="stylesheet" type="text/css" href="styles/index.css" />

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;  
        <script type="text/javascript" src="scripts/json2.min.js"></script>
        <script type="text/javascript" src="index4.js"></script>

    </head>

    <body class="vbox flex">

      <!-- header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <header class="hbox">
            <div class="hbox flex" style="padding-top: 5px;">
                <img src="icons/Produkshunator.png" style="height:60px;width:490px;"/>
            </div>
            <div id="login_status" style="width:150px;"></div>  
        </header>

      <!-- body ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

        <div class="flex hbox">



<!-- Forms ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->              

                <section class="vbox right" style="width:400px; padding:0; overflow: visible;">

    <!-- Login Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->

                <form class="flex sleek"
                      name="login"
                      id="login">

                    <h2 class="r">Login</h2>

                    <div>   
                        <label>Email:</label>
                        <input type="email" name="email"/>
                     </div>
                     <div>
                        <label>Password:</label>
                        <input type="password" name="password"/>
                     </div>
                     <div>                       
                         <input type="button" value="Submit" class="form_butt" />
                     </div>
                     <p><i id="log_error" class="error"></i></p>    
                </form>


    <!-- Registration Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->   

                <form class="sleek flex"
                      name="register"
                      id="register">
                    <h2 class="r">Register</h2>

                      <div>
                         <label>First Name:</label>
                         <input type="text" required="flag" name="firstname"/>
                      </div>
                      <div>
                         <label>Last Name:</label>
                         <input type="text" required="flag" name="lastname"/>
                      </div>
                      <div>
                         <label>Email:</label>
                         <input type="email" required="flag" name="email"/>
                      </div>
                      <div>   
                         <label>Password:</label>
                         <input type="password" required="flag" name="password"/>
                      </div>
                      <div>   
                         <label>Retype Password:</label>
                         <input type="password" required="flag" name="password2"/>
                      </div>
                      <div>
                          <input type="button" value="Submit" class="form_butt" />
                      </div>        
                      <p id="reg_error" class="error"></p>  
                </form>

            </section>

        </div> 

    </body> 
</html>

Is there something I need to know that isn't in the tutorials?

+2  A: 

Try putting your code inside

$(document).ready(function(){    
    // Your code goes here    
});
Jakub Konecki
+1 classics....
Reigel
Thank you so much!! It now works a treat!
cybermotron
@cybermotron, please accept Jakub's answer if it is correct.
Sean Hogan
@Sean Hogan - cheers!
Jakub Konecki