CODEWITHSUNDEEP
jqueryhtmlcssscroll
Alex Klinghoffer
Alex Klinghoffer

Reputation: 369

What jQuery script do I need to link in my html page in order for the following code to work?

I want to get this to work in a standalone HTML file: http://jsfiddle.net/J8XaX/2/

My script is: 

var divs = $('.fademe');
$(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/130) });
});

I've tried these includes, but none of them work:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>

Any suggestions?

EDIT: It is wrapped. The script in my HTML is:

<script type='text/javascript'>
$(document).ready(function(){
    var divs = $('.fademe');
    $(window).on('scroll', function() {
   var st = $(this).scrollTop();
   divs.css({ 'opacity' : (1 - st/700) });
});
</script>

And it works in jsFiddle, but not when I try and view it as it's own HTML page

Upvotes: 0

Views: 133

Answers (3)

Anthony Grist
Anthony Grist

Reputation: 38345

The .on() function was added in jQuery 1.7, and the .css() function was added in jQuery 1.0, so any of those three files will contain all of the necessary functions; the first two are the same file, one has just been compressed (minified - hence the ".min" part of the filename).

However, your code is likely executing too early - before the DOM has been constructed - so the elements can't be selected. Delay the execution of that code using a DOM ready event handler:

$(document).ready(function() {
    // your code
});

Upvotes: 2

Trenton Trama
Trenton Trama

Reputation: 4930

You are accessing divs incorrectly.
If you're going to be applying a jquery function to a variable that you've selected, you have to do it like this. 

$(divs).css({ 'opacity' : (1 - st/130) });

Upvotes: 0

tymeJV
tymeJV

Reputation: 104785

Wrap your code in

$(document).ready(function() {

});

Upvotes: 7

Related Questions