What are the steps for utilizing the skrollr library to manipulate text within a div without it being

I'm a beginner in html, css, and javascript and I'm trying to create my first one-page website using the skrollr library. However, I'm facing an issue where the content in my second div is not displaying properly and is hidden behind the first div. You can view my code on jsfiddle.

<div id="please-scroll" data-0="opacity: 1;" data-800="opacity: 0;">  
    please scroll to see Dinosaurs life story
</div>
<div id="next_generation" data-800="opacity: 1;" data-1000="opacity: 0;">
    please scroll moreeeeeeeeeeeeeeeeee
</div>

Here is the CSS code:

html, body {
    margin:0;
    padding:0;
    height: 4500px;
    width:100%;
}

#please-scroll {
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background-color: red;
    text-align: center;
    z-index: 100;
}
#next_generation {
    height: 100%;
    width: 100%;
    background-color: yellow;
    text-align: center;
}

Answer №1

Make sure to use the correct tag for div:

div class="..."  

Instead of using

div id="..." 

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

What is the best way to update a specific column value in a table using AngularJS?

How can I achieve opening a specific row's text-area when clicking the "Add_Note" button inside a table column, without affecting all other rows? I want to show them using index value while using ng-repeat. var myApp = angular.module('myApp&ap ...

Modifying the color of a specific div using jQuery

I am attempting to develop a function that changes the background color of a div when a user clicks on it and then clicks on a button. The value needs to be saved as a variable, but I'm having trouble getting it to work because it keeps saying that th ...

The functionality of the document download button using Express.js and node.js appears to be malfunctioning

For my current project, I am aiming to enable users to effortlessly download a document by simply clicking on a designated button. https://i.sstatic.net/QenII.png Project Outline: https://i.sstatic.net/SxvfV.png public/client.js console.log(&apos ...

Using AngularJS to interact with resources by passing in the scope parameter

My issue is as follows: I am attempting to call a resource with a specific parameter, but I keep encountering the following error: [$resource:badcfg] I have spent the last 3 hours trying to resolve this, but to no avail. When I call the resource like th ...

Check for available usernames in real-time using Node.js and Express.js, along with client-side JavaScript

Currently, I am working on a web application using Express, MongoDB, and Handlebars as the templating engine. In this app, there is a form where users can create their unique usernames. I want to implement a feature where a tooltip pops up at intervals to ...

The issue arises when the d3 startAngle and endAngle values are set to NaN, resulting in an

I am working with a dataset that includes the following information: { current: 5 expected: 8 gap: -3 id: 3924 name: "Forhandlingsevne" progress: "0" type: 2 } Now, I have implemented the ...

Encountering excessive re-renders while using MUI and styled components

Hey there! I recently worked on a project where I used MUI (Material-UI) and styled-components to render a webpage. To ensure responsiveness, I made use of the useTheme and useMediaQuery hooks in my web application. My goal was to adjust the font size for ...

Having trouble with React throwing a SyntaxError for an unexpected token?

Error message: Syntax error: D:/file/repo/webpage/react_demo/src/App.js: Unexpected token (34:5) 32 | 33 | return ( > 34 <> | ^ 35 <div className="status">{status}</div> 36 <div className=&quo ...

Chrome is not storing the CSS file in its cache memory. However, it is successfully caching .js and .png

I have noticed that the CSS file is not being cached in the Chrome browser. My application is created using Angular-CLI and all the necessary cache-control headers are set, with an Expires header of 5 minutes: Accept-Ranges:bytes Cache-Control:max-age=600 ...

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Currently, I am facing a challenge using socket.io v2.0.3 in my node.js server as I am unable to retrieve the client's IP address. Although there are several suggestions and techniques on platforms like stackoverflow, most of them are outdated and no ...

FF and IE9 cause issues with Backbone application

I recently finished developing a web application using Backbone, ICanHaz, and jQuery. If you want to check it out, click on this link: While the app works flawlessly in Chrome (version 12.0.742.122), it encounters issues in Firefox 5 (5.0.1) and Internet ...

JavaScript counter to monitor the number of requests made to the Open Weather Map API

Currently, I am utilizing the Open Weather Map's free API which allows me to make 1000 API calls per day through their One Call API. However, there is no built-in feature for tracking these calls in the Open Weather Map platform. To address this issue ...

Is there a way to have the information on the table automatically update based on the selection made in a drop-down menu?

When a user is selected from the combo box, I want the table displaying user data from the database to only show information related to the selected user. I attempted to use an array to store values but was unable to make it work. A Combo Box that allows ...

When using Material UI GridTile, the actionIcon will not be shown if there is no title present

In my React application, I am utilizing Material-UI GridList to showcase some images. I am interested in adding an IconButton on top of the image in my GridTile component. Currently, I can achieve this by providing the button to the actionIcon prop. Howeve ...

Encountered an error with the POST request - TypeError: Unable to access the 'name' property as it is undefined

I'm currently facing some issues with using nodemailer to send emails. I believe I have everything set up correctly. I came across some posts mentioning deprecated code with the body parser, and I attempted their solutions...I think I've implemen ...

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

What steps can I take to guarantee that the observer receives the latest value immediately upon subscribing?

In my Angular 2 and Typescript project, I am utilizing rxjs. The goal is to share a common web-resource (referred to as a "project" in the app) among multiple components. To achieve this, I implemented a service that provides an observable to be shared by ...

Is the size of the JSON file inhibiting successful parsing?

After retrieving a large list of schools with their respective columns from the database, totaling over 1000 rows, I converted it to JSON and passed it to my view. I then attempted to parse it using $.parseJSON('@Html.Raw(Model.subChoiceJsonString)& ...

Utilizing jPlayer to play music files uploaded using Paperclip in a Ruby on Rails application with the help of jQuery

Just wanted to say thanks in advance for any help. Currently, I am storing songs in a filesystem using Paperclip and attempting to play them with jPlayer. Despite following all the necessary steps, I am unable to get the audio to play when clicking on a ...

Why is there a presence of quotation marks in the value stored in my local storage?

I have been attempting to extract data from a MySQL database using the following code: app.get("/api/getStudentsFromClass", async(req,res) => { const currentClassClicked = req.query.currentClassClicked connection.query( " ...