Solved

jQuery Won't run

Posted on 2012-03-28
8
305 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

623 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