Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Having trouble with the scroll functionality in my skrollr.js animations. Everything works fine on desktop, but when I checked the rendered HTML in the browser console, I noticed that there are two divs with the same id "skrollr-body". One is empty and the other is the wrapper div I added following the documentation's suggestion. Any help would be appreciated.

Here is the HTML snippet:

<body>
    <div id="skrollr-body"></div>
    <div class="container" id="content_div">
        <div class="row feature-row">
        <div class="col-sm-6 col-md-6">
        <div id="screens_div">
            <img class="img-responsive skrollable skrollable-before" data-anchor-target="#screens_div" data-center-top="transform: rotate(0deg);" data-center-bottom="transform: rotate(90deg);" id="lumia" src="images/lumia.png" style="-webkit-transform: rotate(0deg);">
        </div>
        </div>
        <div class="col-sm-6 col-md-6" id="innovative">
        <h2 style="color:#FF4B25;">INNOVATIVE AD FORMATS</h2>
        <p class="description_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut justo tortor. Nulla faucibus aliquet nisi sit amet iaculis. Fusce libero mauris, mollis nec nulla eget, imperdiet blandit lacus. Ut posuere, dolor ac lobortis suscipit, tellus nulla cursus massa, a vulputate sem erat sit amet orci. Nam ut suscipit purus. Ut ut vehicula risus. Vestibulum ac quam sagittis, feugiat velit at, laoreet metus. Aliquam suscipit vulputate risus, eget commodo orci tempor ac. Suspendisse suscipit bibendum risus quis condimentum.</p>
        </div>
    </div>  
    </div>
    <script src="javascripts/skrollr.js" type="text/javascript"></script>
<script type="text/javascript">
    var s = skrollr.init({
        forceHeight : false
    });
</script>
</body>

Appreciate any assistance, Charan.

javascriptjqueryhtmlcssskrollr

Answer №1

attempt this strategy: " Originally, I enclosed everything within a div labeled "skrollr-body," but ultimately decided to reverse that decision."

Now, utilize the following code:

$(document).ready(function() {
    $('#content_div').unwrap(); //removes the wrapping div..
    $('<div id="skrollr-body"></div>').insertBefore($('#content_div'));
});

Revised - $('#content_div').unwrap(); removes the existing 

<div id="skrollr-body"></div>

Following that, 

$('<div id="skrollr-body"></div>').insertBefore($('#content_div'));
will enclose 
<div class="container" id="content_div">
in the necessary div with a new <div id="skrollr-body">

Your updated HTML structure will appear as follows: 

<body>
 <div id="skrollr-body">
  <div class="container" id="content_div">
    <div class="row feature-row">
    <div class="col-sm-6 col-md-6">
    <div id="screens_div">
        <img class="img-responsive skrollable skrollable-before" data-anchor-target="#screens_div" data-center-top="transform: rotate(0deg);" data-center-bottom="transform: rotate(90deg);" id="lumia" src="images/lumia.png" style="-webkit-transform: rotate(0deg);">
    </div>
    </div>
    <div class="col-sm-6 col-md-6" id="innovative">
    <h2 style="color:#FF4B25;">INNOVATIVE AD FORMATS</h2>
    <p class="description_paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ut justo tortor. Nulla faucibus aliquet nisi sit amet iaculis. Fusce libero mauris, mollis nec nulla eget, imperdiet blandit lacus. Ut posuere, dolor ac lobortis suscipit, tellus nulla cursus massa, a vulputate sem erat sit amet orci. Nam ut suscipit purus. Ut ut vehicula risus. Vestibulum ac quam sagittis, feugiat velit at, laoreet metus. Aliquam suscipit vulputate risus, eget commodo orci tempor ac. Suspendisse suscipit bibendum risus quis condimentum.</p>
    </div>
  </div>  
 </div>
</div>
</body>

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

Determine the coordinates of the mouse cursor within a specific div element

Similar Questions: Determining Mouse Position Relative to a Div Getting the Mouse Position Using JavaScript in Canvas Is there a way to retrieve the mouse position within a canvas element with fixed dimensions and automatic margin? I am unable to ...

javascriptjquerycanvas

AngularJS $scope variable can be initialized only once using an HTTP GET request

I'm facing an issue with fetching data from an API in a separate AngularJS application. There's a button that triggers the retrieval of data from the API. Upon clicking, it executes the $scope.getApiData function, which is connected to $scope.pr ...

javascriptangularjshttp

How come my customized directive is not taking precedence over the original methods in AngularJS?

Following the guidelines in the Angular Decorator manual (https://docs.angularjs.org/guide/decorators), I attempted to create a directive and apply decoration to it. The directive's purpose is to display the current date and time. I included a (point ...

javascriptangularjsangularjs-directive

Symbol '%' is not supported in Internet Explorer

My experience with IE versions 8 and 9 has been that they do not recognize the &percnt; entity. I have tested this on two different computers. I found information suggesting that it should be supported in IE here: http://code.google.com/p/doctype/wiki ...

htmlcssinternet-explorerinternet-explorer-8internet-explorer-9

How can we integrate this icon/font plugin in CSS/JavaScript?

Check out the live demonstration on Jsfiddle http://jsfiddle.net/hc046u9u/ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materializ ...

javascriptjqueryhtmlcssfonts

Dealing with nested file includes in PHP and passing values to a JavaScript function

When the button is clicked on login.php, it triggers the execution of redirect.php. This redirect.php file carries out Twitter authentication, which includes invoking another file that eventually calls index.php. index.php provides the result in the form ...

javascriptphpjquery

Steps for Adding a JSON Array into an Object in Angular

Here is a JSON Array that I have: 0: {name: "Jan", value: 12} 1: {name: "Mar", value: 14} 2: {name: "Feb", value: 11} 3: {name: "Apr", value: 10} 4: {name: "May", value: 14} 5: {name: "Jun", value ...

javascriptjsonangulartypescript

ways to add spacing between bootstrap columns

I am currently using Bootstrap 5 and I'm trying to create a row with 6 columns. I have added gutter in the row but for some reason, the spacing between the columns is not being applied. Can anyone help me figure out what I'm doing wrong here? Bel ...

htmlcssbootstrap-5

Tips for clearing a text box on an AngularJS page when clicking a link within the page

On my HTML page, I have a search box and various category links. When a user enters text in the search box, I want to display: p in Products | filter {searchedText} If a user clicks on a category link, I want to display: p in Products | filter {categor ...

htmlangularjs

Trigger the click() event in jQuery before the blur() event

Looking to implement autocomplete suggestions in an input field? Take a look at the code below: <input type="text" id="myinput"> <div id="myresults"></div> To hide the results' div on the input's blur event, you can use this c ...

jqueryclickonblur

Should I save exclusive items as an object or an array?

In the process of creating a compact online store system with MongoDB integration, there is an order table set up to house various items. Each individual item possesses a unique trait known as code. The dilemma arises when deciding on how the data should ...

javascriptnode.jsmongodb

Check the File Format (not just the Extension) prior to Uploading

When uploading a file within an HTML form, you can validate the extension using JQuery's Validation plugin: <form enctype="multipart/form-data" id="form-id"> <input type="file" name="file-id" id="file-id" /> </form> To validate ...

javascriptphpjqueryhtmlupload

Create a roster of individuals who responded to a particular message

Can a roster be created of individuals who responded to a specific message in Discord? Message ID : '315274607072378891' Channel : '846414975156092979' Reaction : ✅ The following code will run: bot.on("ready", async () = ...

javascriptnode.jsarraysdiscorddiscord.js

Three.js tutorial: Rotating items on each axis individually

Looking to create an interactive 3D item that users can rotate with their mouse freely? I experimented with using three quaternions, one for each axis, and then multiplying them together to determine the final position of the item. // Initializing xQuat, y ...

javascriptthree.jsquaternions

Uploading files in React.js using Yii2 API

I am working with react.js (version 15) and I need to upload files using yii2 api. Here is my code: My component in react: import React, { Component } from 'react'; import Header from './Heaader'; /* global $ */ class New ...

javascriptphpajaxreactjsyii2-advanced-app

When I hover over div 1, I am attempting to conceal it and reveal div 2 in its place

I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...

javascripthtmljquerycss

Using Node.js variables outside of a function

I've been facing issues with passing my trends variable from its function into a renderer for my Pug template. It's proving to be quite challenging. var express = require('express'); ...

javascriptnode.jsexpresswebstorm

How can we solve the issue of missing props validation for the Component and pageProps in _app.js?

Below is the code snippet from _app.js for a nextjs project that uses typescript import React from 'react' import '../styles/globals.css' function MyApp({ Component, pageProps }) { return <Component {...pageProps} /> } export ...

javascriptreactjsnext.js

Can a Chrome App access a user's files on their hard drive with proper permissions?

I'm currently working on a Chrome Packaged App that includes video playback functionality. My main goal is to enable users to stream online media (such as MP4 videos) while also giving them the option to save the video to a location of their choice. ...

htmlgoogle-chromehtml5-videogoogle-chrome-app

The issue of JW Player Image not appearing in the jQuery Cycle plugin is limited to Internet Explorer only

There seems to be an issue with displaying the preview image assigned to JW Player in IE (both 7 and 8) when embedded in a slideshow using JW Player & jQuery Cycle. Other browsers show the preview image without any problem, and videos not in a cycle di ...

jqueryinternet-explorercyclejwplayer