I'm a designer learning code. Learning Wordpress also for some easy CMS integration, a

Okay, just figured out the problem. Rellax is being pulled in to the JS concat,

Hey thanks for your detailed deion of the problem and eventual solution! <p

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Having problems getting rellax to do it's thing about rellax HOT 4 CLOSED

dixonandmoe commented on July 20, 2024

Having problems getting rellax to do it's thing

from rellax.

Comments (4)

jcklpe commented on July 20, 2024

Okay, just figured out the problem. Rellax script is being pulled in to the JS concat, but it's not being initialized. Which I think is because you have to init it using document ready or something like that right? That could be a little more explicit in the documentation, though I guess it's probably obvious to real devs. I'm just a newbie but thought this should at least be in the issues for future newbs.

from rellax.

jcklpe commented on July 20, 2024

Okay so here's how I solved this problem

Open the rellax.js file and insert this:

var domReady = function(callback) {
    document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback);
};

And then I wrap the function like this:

domReady(function() {
        var Rellax = function(el, options){ <-- this is the first line of the function

and

            init();
            return self; <----this is the end of the function
        };
        
        var rellax = new Rellax('.rellax', {center: true}); <----put the call of the Rellax function here with the option settings to make sure it was called at the same time since getting both to get called seperately at the end for Wordpress was problematic. 


});

I also removed the AMD function because it was acting super wonky and I was entirely clear on what functionality it played. I'd really appreciate a real dev to give some feedback on my solution and what they think. If nothing else, I'd like to contribute a vanilla html, css, js version of the background images interspersed with text example test so that future users looking for this use case would have something they could go off of.

from rellax.

moeamaya commented on July 20, 2024

Hey thanks for your detailed description of the problem and eventual solution!

For library reasons, we probably wouldn't integrate your solution mainly because the current best practice way to include javascript is at the end of the <body> which negates the need for domReady since all the content has already been parsed and added. I similarly agree on removing the AMD but it's still a primary way that people add vendor javascript to their websites so it has to stay for now :(

from rellax.

jcklpe commented on July 20, 2024

@moeamaya

Yeah the domReady thing more has to do with the quirks of WordPress since even if you put your JS in the end next to Body, it still loads other scripts before the DOM is truly ready.

Just for my own betterment, what exactly is the purpose that AMD is playing? when you say vendor JS, do you mean that it's adding in extra stuff to help make it cross platform, or cross platform, or some combination of the two?

I'll probably add in a vanilla example of Rellax being used for for background images, since that's probably one of the most common use cases that people are looking for with a lightweight parallax application. I'm still figuring out the CSS, but it's looking good so far!

from rellax.

Having problems getting rellax to do it's thing about rellax HOT 4 CLOSED

Comments (4)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent