Solved

jQuery Won't run

Posted on 2012-03-28
8
286 Views
Last Modified: 2012-03-29
Hey Experts,

I'm trying to get my first jQuery to run. I have attached a zip file of the problem code and a summary is below:

I have this in the HTML file:

...
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript/functions.js"></script>
</head>
<body onload="animateMLAR();">
...

I have this in the functions.js file:

$(document).ready(function(){
      function animateMLAR(){
            $('#Mamma').animate({backgroundPosition: '(-500px -80px)'}, 20000);
      }
}

And these are the properties in the CSS file:

#Mamma {
background: url(../images/ML.png) no-repeat center top;
width: 450px;
height: 583px;
float: right;
margin-right: 60px;
margin-top: -20px;
}


Any help would be great!
Basic-Site.zip
0
Comment
Question by:jeffiepoo
  • 4
  • 3
8 Comments
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37779746
change this:
<body onload="animateMLAR();">

to this:
<body>

and this:
$(document).ready(function(){
      function animateMLAR(){
            $('#Mamma').animate({backgroundPosition: '(-500px -80px)'}, 20000);
      }
}

Open in new window

to this:
$(document).ready(function(){
      function animateMLAR(){
            $('#Mamma').animate({backgroundPosition: '(-500px -80px)'}, 20000);
      }
      animateMLAR();
}

Open in new window

0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37779751
PS: the thing is, "body onLoad" is run when the document loads.
However, the DOM isn't yet fully "grown up" inside the browser.
That's why jQuery provides $(document).ready
0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 37779997
It sounded promising, but it still didn't do anything. Any further suggestions?

Here is the updated package.

Thanks in advance.
Basic-Site.zip
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37780476
check your syntax... you are lacking a closing bracket in functions.js
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 16

Accepted Solution

by:
Steve Krile earned 500 total points
ID: 37781323
OK, found several issues with your approach.  

The most important - you need to include the Background Position plugin in your project.  Moving the background is not a built-in feature of jquery.

Second, there were a bunch of little typos in your jquery.

Finally, the function to run the animation is best left *outside* of the $(document).ready() section.

So, the head of your HTML page would look like this:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Mamma Lenny and the Remedy Official Site</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="javascript/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.protofunc.com/scripts/jquery/backgroundPosition/jquery.backgroundPosition.js"></script>
<script type="text/javascript" src="javascript/functions.js"></script>
</head>

Open in new window


And your jquery section like this:
$(document).ready(function () {
    animateMLAR(); 
});

function animateMLAR(){
    $("#Mamma").animate({ backgroundPosition: "-500px -80px" }, 2000);

}

Open in new window

0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 37785229
Wow that got it working! I made the same changes in my MVC version of the site and nothing is working again it is driving me crazy! Any ideas? How do you troubleshoot this stuff?

You need Visual Studio with MVC to see the solution. It is double zipped because Experts Exchange is dumb like that.
Basic-Site-in-MVC.zip
0
 
LVL 6

Author Comment

by:jeffiepoo
ID: 37785249
Using this:

$(document).ready(function () {
    animateMLAR();
});

function animateMLAR() {
    $("#Mamma").animate({ backgroundPosition: "-500px -80px" }, 2000);
}
                         

It says in Firebug that I have 'missing ) after argument list'
0
 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37785279
try this:

function animateMLAR() {
    $("#Mamma").animate({ 'background-position-x': '-500', 'background-position-y': '-80' }, 2000);
}
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now