How come my script that is dependent on the viewport does not apply classes?

I created a code to add a class to a div, but it's not working as expected. I need help troubleshooting this issue. The code works fine on codePen, but not on my WordPress website. How can I make sure the browser executes this code properly?

Link to the file I'm working on:

The desired functionality is for the second div to fade in when it enters the view-port.

UPDATED CODE:

jQ

<script>
function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function () {
    jQuery('.anim').each(function () {
        if (isScrolledIntoView(this)) {
            jQuery(this).addClass('anima').removeClass('viss')
        }
    });
});
</script>

CSS

.anima span{
    display: inline-block;
    transition: 3s;
    opacity: 0;
    animation-duration: 1s;
    animation-name: fInUpSmall;
    animation-fill-mode: forwards;
}
@keyframes fInUpSmall{
    0%{
        opacity:0;
        transform:translateY(15px)}
    100%{
        opacity:1;
        transform:translateY(0)}
}

.anima span:nth-child(1) {
    animation-delay: .1s;
}
.anima span:nth-child(2) {
    animation-delay: .25s;
}.anima span:nth-child(3) {
    animation-delay: .4s;
}.anima span:nth-child(4) {
    animation-delay: .55s;
}.anima span:nth-child(5) {
    animation-delay: .7s;
}.anima span:nth-child(6) {
    animation-delay: .85s;
}
.anima span:nth-child(7) {
    animation-delay: 1s;
}
.anima span:nth-child(8) {
    animation-delay: 1.15s;
}
.anima span:nth-child(9) {
    animation-delay: 1.3s;
}
.viss{
    visibility: hidden;
}

HTML

<div class="anim">
<span>Set</span> <span>a</span> <span>path</span> <span>and</span> <span>get</span> <br><span class="highlight">to&nbsp;</span><span class="highlight">your&nbsp;</span><span class="highlight">destination&nbsp;</span></div>
javascriptjquerycsswordpresselementor

Answer №1

Got it, the correct code is already in the question. Here is an extra snippet to prevent the flashing effect. To stop the element from flashing, you need to apply an additional class (let's call it "viss") with the following CSS:

.viss{
    visibility: hidden;
}

Then, simply remove the "viss" class when the element is in viewport by using:

.removeClass('viss')

With these changes, everything should run smoothly without any issues.

Answer №2

Kindly review the updated code snippet below: Please ensure to view the full page of the snippet.

function istScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}


$(window).scroll(function(event){
   $('.textbox').each(function () {
        if (istScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });
});
.textbox {
    opacity: 0;
    transition: all .5s;
        background:red;
        height:300px;
}
.textbox.visible {
    opacity: 1;
}
.anotherdiv {
    width:100%;
    background:blue;
    height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anotherdiv">

</div>
<div class="textbox">

</div>

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

Using the GET function on the server will replace the HTML page, showcasing a straightforward client-server communication process involving express.js and jquery

For several days now, I've been tackling the challenge of setting up a simple data exchange between node.js/express.js on the server side and html/jquery on the client side. The task at hand seems straightforward: The client submits the sentence "Req ...

htmljquerynode.jsexpress

show fixed div when in view

After seeking inspiration from this specific thread on SO, I still need some help. The challenge I'm facing involves displaying a sticky footer within a parent div that is positioned halfway down the page. I've tried multiple tutorials, but none ...

javascripthtmljquerycss

when successful, refresh the page

I am currently utilizing the following javascript code to load recrefresh.php when the page first loads. Upon executing the ajaxvote function, I aim for the subsequent div to be refreshed: <div class="recrefresh"></div> After attempting to ad ...

javascriptjquery

Create a new build for testing and debugging using create-react-app

Currently, I am in the process of developing a web application that utilizes a React frontend and is powered by a golang api layer. Although I do not have extensive experience with Javascript, I find myself struggling with the Node build system. I am loo ...

javascriptreactjsnpmcompilationcreate-react-app

ReactJS encountering an invalid dropzone element

Encountering the error "invalid dropzone element". I added var Dropzone = require('react-dropzone'); to my webpack.config.js file in hopes of activating the Dropzone element. This is what is included in my JavaScript file, copied from a Gith ...

javascripthtmlreactjswebpackdropzone.js

Enhancing the alignment of div elements

Our objective is to have two divs aligned next to each other. Here is the HTML code: <div class="test1>Text 1</div> <div class="test2>Text 2</div> And here is the CSS code: .test1 { float: left; } .test2 { float: left; } ...

csshtmlalignment

What is the best way to test a React component that triggers a function in its parent, causing the component's props to be modified?

The issue at hand: The props of component Child are passed as the values of the state of Parent. Child contains a method that calls a method on Parent, which then updates the state of Parent. When Parent's state changes, one of Child's prop val ...

javascriptreactjstddbddenzyme

How can I dynamically set the option attribute to "selected" and remove it when another option is chosen?

Before marking this as a duplicate, please read on: Initial Scenario: I am working with a select list and need to dynamically set the selected attribute when a specific option is chosen. Following Actions: Subsequently, when another option is selected fr ...

javascriptjquery

Randomly undefined custom jQuery function

Appreciate your assistance in advance. I am facing a peculiar scope issue on a page where multiple charts are rendered intermittently. I have created a set of jQuery functions to display different types of charts based on the provided options. Each funct ...

javascriptjqueryajax

Ways to retrieve the value of a concealed element without any activation signal

In my project, I've created a slider that dynamically shows different forms one by one. Each form contains a hidden element with a specific value that I need to retrieve (using its class) every time a new form is displayed. This way, I can use that el ...

javascriptjqueryajax

Creating dynamic checkboxes using jQuery with a mobile-friendly design

In my mobile app, I am looking to create a checkbox list using the following code snippet: for (i = 0; i < len; i += 1) { row = resultflatname.rows.item(i); if (row.receiptno == 0){ items.push('<input type="checkbox" name="code_ ...

jquerydynamicmobilecheckboxstyles

Is there a way to securely store my JWT Token within my application's state?

userAction.js -> Frontend, Action export const login = (userID, password) => async (dispatch) => { try { dispatch({ type: USER_LOGIN_REQUEST }); const url = "http://localhost:8080/authenticate/"; const ...

javascriptreactjsjwt

Lightbox.options does not exist as a function within the lightbox plugin

I recently incorporated a lightbox plugin into my website, which can be found at the following link: For displaying items on the page, I am using markup similar to this example: <a href="images/image-2.jpg" data-lightbox="my-image">Image #2</a&g ...

javascriptjquerylightboxlightbox2

What's causing this javascript to malfunction on the browser?

I encountered a problem with the code in my .js file. Here is a snippet of the code: $.extend(KhanUtil, { // This function takes a number and returns its sign customSign: function(num){ num = parseFloat(num) if (num>=0){return 1} ...

javascripthtml

Click to Resize Window with the Same Dimensions

I have a link on my website that opens a floating window containing more links when clicked. <a href='javascript:void(0);' onclick='window.open("http://mylink.html","ZenPad","width=150, height=900");' target='ZenPad'>&l ...

javascripthtmlcss

Top strategies for avoiding element tampering

What is the best solution for handling element manipulation, such as on Chrome? I have a button that can be hidden or disabled. By using Chrome's elements, it is possible to change it from hidden/disabled to visible/enabled, triggering my click functi ...

javascriptjqueryhtmldom

Ways to set a button as default clicked in an Array

I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...

javascripthtmltypescript

Is there a way to smoothly slide an element in the same way another element can be dragged out

I am currently using AngularJS. My goal is to achieve the following: When the 'Fade in' button is clicked, a hidden element should slide out from the left side. It should appear behind the 'MAIN BASE' element, giving the illusion that ...

htmlcssangularjsangular-material

Tips for creating a Vuex mutation without using asynchronous promises

I have a project underway that involves building an app using Vue.js, Vuex, and Firebase to update data from Firestore database to the state in mutations. Even though mutations are synchronous and promises (.then) are asynchronous, my current implementat ...

javascriptfirebasevue.jsgoogle-cloud-firestorevuex

Is there a way to adjust the dimensions of Google charts within a Bootstrap tab for a more customized appearance?

I've been working on a page that features tab navigation using Twitter Bootstrap and I want to include Google charts within each tab's content. However, I've encountered an issue where the charts are appearing in different sizes despite spec ...

javascriptjquerytwitter-bootstraptwitter-bootstrap-3dom-events