www.webdeveloper.com
Results 1 to 4 of 4

Thread: I'm trying to learn Jquery from codeacademy.com but i can't get my code to work.

  1. #1
    Join Date
    Feb 2013
    Posts
    19

    I'm trying to learn Jquery from codeacademy.com but i can't get my code to work.

    It works in the codeacademy.com website but not in my text file. The following html, css and jquery are supposed to make the div boxes shrink and grown when you mouse hover over them. But they dont. Whats wrong with it? I even tried linking the google hosted java thingy (4th line in the html) and it doesn't say to necessarily do that. But even that didn't help.

    Here's the html :

    <!DOCTYPE html>
    <html>
    <head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <title>Magic!</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="yellow"></div>
    <div id="green"></div>
    </body>
    </html>

    And here's the css :

    div {
    height:100px;
    width:100px;
    display: inline-block;
    }

    #red {
    background-color:#FF0000;
    }

    #blue {
    background-color:#0000FF;
    }

    #yellow {
    background-color:#E2BE22;
    }

    #green {
    background-color:#008800;
    }


    And lastly, here's the java :

    $(document).ready(function() {
    $('div').mouseenter(function() {
    $(this).animate({
    height: '+=10px'
    });
    });
    $('div').mouseleave(function() {
    $(this).animate({
    height: '-=10px'
    });
    });
    $('div').click(function() {
    $(this).toggle(1000);
    });
    });

  2. #2
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Yes, you do need to include that google hosted thingy, since it's a jQuery library and without it, you can't use any of that $(something) fancy stuff. However, you have a typo in it's address:

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    And for heaven's sake, Java and Javascript are two different things. You are learning Javascript
    If you are happy with the solution: Top of the comments > Thread Tools > Mark Thread Resolved

  3. #3
    Join Date
    Feb 2013
    Posts
    19
    Thanks so much for the help. I'll try it.

  4. #4
    Join Date
    Mar 2009
    Location
    Wherever i lay my hat
    Posts
    180
    Actually, it's not a typo, it's protocol relative URL, however, if you access your script via a local file, it will try to request it via file://, which won't work...
    If you are happy with the solution: Top of the comments > Thread Tools > Mark Thread Resolved

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles