SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    javascript not loading - please help

    I'm trying to learn Jquery and have set up a practice site, code below. The page displays fine but is not performing any of the 'animate' tricks I'm practicing. Have I called in the script incorrectly? Thanks!

    this is the html file:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Practice</title>
    <link href="index.css" rel="stylesheet" type="text/css" />

    <script src="../../lib/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" src="script.js"></script>

    </head>

    <body>
    <div id=logo>
    <img src="MARGO logo WEB RGB.jpg" alt="ipsem lorum" />
    </div>
    <div id=content>
    ipsem lorum ipsem lorum
    </div>
    </body>
    </html>

    This is the script.js file

    $(document).ready(function(){
    $('p').animate({
    padding: '20px',
    borderBottom: '3px solid #8f8f8f',
    borderRight: '3px solid #bfbfbf'
    }, 2000);
    });

  2. #2
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    93
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It looks like you're trying to animate an element that doesn't exist

    The $('p') code tells jQuery what element to perform the command (in this case 'animate') - it uses CSS syntax. So what you want to replace it with is $('#logo') (or whichever element you want to animate)

    Hope that sorts it

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestion - I would have thought that it would work as I can see I was selecting an element not actually used in the document. I've changed the script.js as below and sadly it still isn't working, any other suggestions?

    $(document).ready(function(){
    $('#content').animate({
    padding: '20px',
    borderBottom: '3px solid #8f8f8f',
    borderRight: '3px solid #bfbfbf'
    }, 2000);
    });

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I got it working - the animate effects were not visible because the div was too big, doh! Thanks again for taking the time to help


Bookmarks

Posting Permissions

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