Using the Parallax effect in jQuery to manipulate the CSS with the .background-position-y property

I am experiencing an issue with a parallax effect that is controlled by the following function:

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
            $('.payoff').css('background-position-y', scaleBg - 150);
            $('.payoff2').css('background-position-y', scaleBg - 150);
            $('.social').css('background-position-y', scaleBg + 200);
        }

The problem I'm facing is that this does not work on Firefox because the background-position-y property is not supported. How can I resolve this issue for Firefox?

jquerycssfirefox

Answer №1

To implement the combined background-position property effectively, follow this code snippet:

var scaleBg = -$(window).scrollTop() / 3;
if (iOS === false) {
    var payoffY = scaleBg - 150;
    var payoff2Y = scaleBg - 150;
    var socialY = scaleBg + 200;
    $('.payoff').css('background-position', '0px ' + payoffY + 'px');
    $('.payoff2').css('background-position', '0px ' + payoff2Y + 'px');
    $('.social').css('background-position', '0px ' + socialY + 'px');
}

It's important to note that in this context, the + sign is used for concatenation rather than addition. The value of 0 represents the desired position on the x axis for your background.

This approach enhances cross-browser compatibility when assigning background positions.

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

I'm attempting to incorporate the CSS file into the main HTML template, but the styling isn't being applied. My goal is to define the styles externally

The CSS style isn't being properly imported. Below is the base HTML file (base.html) I'm using: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <meta name="viewport" content="widt ...

htmlcssweb-development-server

The method I used to position a triangle at the bottom border of a parent element with relative

https://i.stack.imgur.com/RZjJ9.png I am trying to achieve a centered triangle within a border, but I am facing a challenge due to the parent component being relative. When I remove the relative positioning, I struggle to position the triangle in the cent ...

htmlcssreactjsstyled-components

The entire framework remains concealed as the anchor component becomes immeasurable

Within a fixed-width paragraph, I have an anchor tag. The CSS for the p tag includes the properties text-overflow: ellipsis and overflow:hidden. However, when the anchor tag's content overflows (e.g., it contains a long string), the right outline is n ...

htmlcss

unable to detect image input type

My dilemma lies in trying to submit a form using an image input type. The ajax request works as expected, and I receive a response from my php script. However, I encountered an issue where the image button was not changing its image upon submission. Accord ...

javascriptjqueryhtmlajaxforms

Incomplete Loading of Google Maps

Let me clarify that the solutions I have come across so far have not been successful. I am attempting to display a modal alert with a basic Google Maps integration. Problem: Google Maps does not load completely. Snippet from my .js file: var map; functi ...

javascriptjqueryhtmlgoogle-mapszurb-foundation

Any idea how to dynamically insert rows and columns into a table or div element?

Can anyone assist me with this task? I have successfully completed the visual process I intended to do. How can I achieve this structure using AngularJS? The data will be stored in Json format. When the "+" symbol is clicked in a certain direction, the fi ...

javascriptjqueryangularjsjson

JavaScript Error: The code is expecting an object when creating a new instance,

Why isn't this code working as expected? var navbar = document.getElementById("navbar").getElementsByTagName("li"); var hover; var moname; var slider; var newPos=new Object(); var body=document.getElementsByTagName('body& ...

javascriptjquery

Steps to verify a form with controllers in AngularJS

Can someone help me figure out how to validate a form in angularjs using controllers? en$scope.saveDetail = function () { if ($scope.register.Name == "") { alert("Pls fill register Name"); return false; } if ($scope.register.A ...

jqueryangularjs

Mastering Jquery mobile for efficient mobile analytical insights

I am on the lookout for a top-notch mobile analytics solution that can seamlessly integrate with Jquery Mobile. I've already explored this specific query: Flurry Analytics vs Google Analytics on the mobile platform However, those recommendations are ...

jqueryjquery-mobilemobilegoogle-analyticsanalytics

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

jqueryhtmlcss

HTML code causing an Ajax post request to return a null value

How can I send JSON data from HTML to PHP using the Ajax post method? I have looked at various resources like this and this but so far, I am only getting a null return value. Other similar questions have not been helpful either. HTML (jQuery Ajax): $(&apo ...

phpjqueryjsonajax

"Utilize JavaScript (Observer) to pick out an SVG element based on its class

I am working on dynamically displaying an SVG item as it enters the viewport using an observer. The animation associated with the SVG item should only play when it becomes visible in the view window. Initially, I have set the display property to none, and ...

javascripthtmlcss

"Implementing an ellipsis feature in Highcharts to handle lengthy data gracefully

Looking for some help with adjusting the positioning of a pie chart on the page. The data on the left and right sides is not displaying correctly, so I want to center the chart and add ellipsis for any overflow. Check out the code here: http://jsfiddle.n ...

javascriptjqueryhighcharts

Colorful background visuals without any text

Can you achieve a background color effect using Stylus without any text? span { width: 5px; height: 5px; } span.red { background-color: #f00; } <span class="red"></span> ...

htmlcss

Ways to distinguish jquery response apart from using $.post method?

Using jquery $.post method: $.post( 'includes/studiesAjax/addTryb.php', {inputVL: inputVL}, function(res){ $("#container").html(res); } ); The response contains a long html code. I am interested in extracting data from ...

phpjqueryhtmlajaxpost

3 Typeahead elements within a div with horizontal overflow

I have a container with the class 'table-responsive' that has overflow-x set to 'auto'. Within this container, there is an input field with typeahead. When I receive results to populate the typeahead, they appear within the container. ...

jqueryhtmlcsstypeaheadbootstrap-typeahead

Issue with smooth scroll feature not functioning properly

Currently, I am facing an issue with the smooth scroll feature on my website. Although I have implemented a to top arrow for users to move back to the top section of the page, the scrolling is not as smooth as intended. The JavaScript code I used for achi ...

javascriptjqueryhtmlcss

The Jquery AjaxStop event fails to trigger, but AjaxStart works perfectly

While I was working with APIs, I encountered a roadblock. I have a Jquery function that retrieves data from an API. To prevent a "reposition" effect, I need the function to wait until all calls are made before triggering another function to place all the ...

javascriptjqueryajaxapitriggers

Is it possible to invoke a JavaScript function from within a CSS file?

Currently, I am focusing on developing responsive web design and looking for ways to avoid creating multiple versions of each page based on screen width variations. The struggle lies in managing font sizes effectively. While attempting to style them using ...

javascripthtmlcssfontsfont-size

Disabling async feature in jQuery's ajax queries

My website includes a calendar control that retrieves availability data from the server using an ajax request. Take a look at the code snippet below: var monthlyBookingDetails = getBooking(month, year);//getBooking is an ajax function //rest of the code ...

jqueryasynchronous