I'm trying to get the following code to work on my HTML page, but I'm not sure which jQuery script I need to link

I'm struggling to make this code work in a standalone HTML file: http://jsfiddle.net/J8XaX/2/

Here is the script I am using:

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

I've attempted to include these scripts without success:

<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 advice or suggestions?

EDIT: It appears that the script is wrapped in my HTML document:

<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>

The script works in jsFiddle, but unfortunately does not seem to work when viewed as its own HTML page.

Answer №1

Enclose your code with

$(function() {

});

Answer №2

The function .on() was introduced in jQuery version 1.7, while the function .css() dates back to jQuery 1.0. Therefore, any of these three files will include all the necessary functions; the first two are essentially the same file, with one being minified (hence the ".min" suffix in the filename).

It is worth noting that your code may be running too early - before the DOM has finished loading - which could prevent proper element selection. To avoid this issue, consider delaying the execution of your code using a DOM ready event handler:

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

Answer №3

You've got to watch out for how you access divs.
When using a jquery function on a selected variable, make sure to follow this format:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript: Activate the element with the first class of its children

This code is a visual representation of what I'm trying to accomplish... <style> .red{background:red} .blue{background:blue} </style> <div id=test> <button>1</button> <button>2</button> </div> ...

Displaying a PDF file by clicking a button using AJAX

https://i.sstatic.net/6O9rm.jpgI am facing an issue with opening a PDF file on click of a button. Despite trying to achieve this using AJAX, the PDF file does not open. Whenever I click the View PDF button, I keep getting an alert message. Below is the AJ ...

Strange rendering in CSS JQuery Datatable

I am encountering an issue with a DataTable from datatables.net. Each row can be selected by clicking on a checkbox, which triggers a click event. In response to the event, I add or remove a CSS class to change the appearance of the selected rows. $(".cbD ...

Can you set the line thickness for "text-decoration: line-through;" using CSS?

When it comes to the line-through property in CSS, the default weight of 1px is ideal for body copy set at 1em. However, for larger items like a price set at 3em on an offer site, 1px can feel too light. Is there a way to increase the line weight for line ...

Tips for preserving the dimensions of a container even after adding text dynamically

I have created a form and implemented a JavaScript warning for when the entered passwords do not match. However, I am facing an issue where adding the warning text causes other elements in the container to shift. Is there a way to prevent this from happe ...

Finding the identifier of an HTML element using AngularJS

I am trying to retrieve the specific id of each line and pass it to a JavaScript function that will make an HTTP request. However, I am encountering an issue when calling the function excluir(id). The parameters seem to be correct, but the alert is not tri ...

Is there a way to turn off the ripple effect on Material UI Input components?

Is there a way to turn off the ripple effect or highlight color on the TextField component in React's Material UI? https://i.sstatic.net/qB2cm.png I've attempted to modify the theme: theme.props.MuiTab.disableRipple = true theme.props.MuiButto ...

Which is quicker when utilizing jQuery selectors: selecting by .classname or div.classname?

Which is quicker: using $(".classname"). or adding the tag to search for as well? $("div.classname") In my opinion, using just the classname would be faster because jQuery can simply loop through all classnames directly, whereas in the second example i ...

The Bootstrap table fails to display any data retrieved from the server

I recently attempted to implement pagination using this resource: After setting up the HTML table on my page and confirming that the server-side code is functioning properly by checking the Network tab in the F12 tools, I ran into an issue. The data retur ...

What is the best way to smoothly hide and reveal a flex child element?

I am looking to create a flex container where the child element can smoothly animate to shrink and grow, while the remaining child elements expand to fill in the space. The method I have found involves setting the max-width to 0px and the borders' wi ...

Problem with Internet Explorer version 9 and above and the Flip Card feature

I have a cool feature for one of my clients where clicking on one div causes another div to flip in its place, like a card flipping over. It's kind of like those portfolio image flippers, but instead of images, it flips divs with content inside. How ...

Extracting information from JSON using arrays

I'm facing a bit of a challenge with this one. I've been trying to use jQuery on my website to update an element. It works perfectly fine without using an array of data in JSON, but as soon as I introduce an array of data, it stops functioning. I ...

Where can I find the link to access three.js on the internet?

Currently working on a JavaScript application within Google App Engine using three.js, but struggling to find the URL for online inclusion in my document. Uploading the entire large-sized three.js package is not ideal, so I'm looking for a way to obta ...

Having trouble with Cordova and JQuery AJAX integration?

After researching for a couple of hours, I discovered that my cordova app (CLI 5.3.3) is displaying a "page not found" error when making AJAX calls through jQuery. Despite following all the steps in the whitelist plugin (https://github.com/apache/cordova- ...

Combining Data in Django using Ajax with JavaScript and Python Integration

I am in need of assistance understanding a basic ajax call from JavaScript to Python. I have a Python function that takes a simple parameter and returns a result. My goal is to send this parameter from JavaScript, receive the function result back in JavaSc ...

I am having issues with my bootstrap navigation pills, they seem to be malfunctioning

Having some issues setting up a bootstrap pill nav menu. The pills aren't working properly and all content appears on one page, despite the active pill changing. <div class="navigation"> <ul class="nav nav-pills head-menu" id="n ...

Retrieving POST information from a PHP script

I have 3 php files and I need to extract the month data from form1.php for use in form3.php. However, the data processing also involves form2.php. How can I specifically retrieve the month from form1 and display it in form3? form1.php <form action=&quo ...

Apply the child's style if the parent's sibling contains the specified class

I am struggling to add the class "bold" to a child element (span) of a parent element (button.usa-nav-link). This parent element has a sibling (ul li.active) with the class .active. When the sibling is active, I want the child element's text to be bol ...

The "read more" button seems to be malfunctioning

I've been working on integrating a gallery of images into my posts. My goal is to display 4 images initially, followed by a "load more" button that, when clicked, will reveal another set of 4 images, and so on. I have already created the HTML, CSS, an ...

Cannot find CSS selector during web scraping operation

I recently started exploring web scraping and I'm currently working on extracting data from the following website: Specifically, I'm focused on extracting information from a particular table. However, the data in this table is not formatted in a ...