Solved

jQuery Won't run

Posted on 2012-03-28
8
297 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 7

Expert Comment

by:designatedinitializer
ID: 37780476
check your syntax... you are lacking a closing bracket in functions.js
0
 
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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

749 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