The presence of the customized jScrollPane scrollbar is detected twice within the iframe

I am facing an issue with a custom scrollbar appearing twice within an iframe. The scrollbar appears fine in IE but not in Chrome, Firefox, and Safari.

If you'd like to view the page, please visit:

Below is the code snippet within my iframe:

<style>
iframe {
    overflow:hidden;
}
</style>


<iframe scrolling="no" width="690" height="680" frameborder="0"
src="templates/musicband/setlist.html"></iframe>

And here is the code in my HTML file:

<style type="text/css" id="page-css">
/* Styles specific to this particular page */
.scroll-pane
{
width: 690px;
height: 680px;
overflow: hidden;
}
</style>

I have experimented with different widths and heights, including using 100%. However, it resulted in a worse appearance.

You can see how the scrollbar should look (as shown in Internet Explorer) in this printscreen:

Please assist me in resolving this issue.

Thank you! - Swiz

javascriptjscrollpanejquery-jscrollpanejscrollbar

Answer №1

Two scrollbars appear because the page loaded in the iframe () is generating its own scrollbar:

$(function() {
    $('.scroll-pane').jScrollPane();
});

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

Navigator Access - Handlebars

I'm currently making changes to the Ghost blog in order to support multiple languages. To achieve this, I am creating a Handlebars helper: hbs.registerHelper("language", function () { var lang = (navigator.language) ? navigator.language : nav ...

javascriptnode.jsexpresshandlebars.jsghost-blog

Storing user credentials in Firestore after registration - best practices

Hi, I need some assistance with storing user credentials in Firestore after they sign up. Unfortunately, I keep encountering the following error: Invalid collection reference. Collection references must have an odd number of segments, but userDatabase/QMJ ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Utilizing Vue route parameters for making Axios GET requests

I'm currently working on my first vue project and facing an issue with passing route parameters to an axios get request. The code below represents the page that is rendered after a user clicks on a dynamic link within a table of tests: <template> ...

javascriptvue.jsaxios

Try utilizing the 'id name ends with' parameter within the on() function for creating dynamic bindings

I need help with dynamically binding the change event to multiple select input fields that are generated within my form. The item field is generated with IDs like: id="id_form-0-item" id="id_form-1-item" id="id_form-2-item" ... Although I have attempte ...

javascriptjqueryhtml

The .NET controller does not receive traffic for the GET method

Having some trouble populating a table with JSON data using angular ng-repeat. No errors are showing up in the console, and my breakpoint in the .NET Controller isn't being triggered. Here's the code for the App Controller: var app = angular.mo ...

javascriptc#angularjsasp.net-core

Setting a validation message for a Vuejs username input while enforcing a maximum character limit

<script> export default { name: "Register", props: { msg: String, }, }; </script> <style scoped> * { box-sizing: border-box; } div { padding: 0; margin: 0; font-family: system-ui; } .red { color: red; } <template& ...

javascriptvue.jsvuejs2

The $.get jQuery function is unexpectedly retrieving an entire HTML page instead of the expected JSON data

Currently, I am in the process of developing a web application and have opted to use PHP as the server-side language. Below is the PHP script responsible for returning JSON data: <?php require_once "connection.php"; if (isset($_GET['take'])) ...

javascriptphpjqueryjson

Populate your website with both a Bootstrap Popover and Modal for interactive user engagement through hover

Here's the situation: I want to showcase a user's name with a popover that reveals a snippet of their profile information. I've got that part down, where it dynamically generates and displays the popover content as needed. The popover functi ...

javascripthtmlcsstwitter-bootstrapmodal-dialog

Guide to sending a HTTP POST request with parameters in typescript

I need assistance sending a POST request using parameters in the following format: http://127.0.0.1:9000/api?command={"command":"value","params":{"key":"value","key":"value","key":"value","key":value,}} I attempted to do this but encountered an issue: l ...

javascriptangulartypescript

Having trouble getting tailwind dark mode to work on next.js?

I have set up a custom boilerplate using next.js(10.0.5) with preact(10.5.12), typescript(4.1.3), and tailwind(2.0.2). I am attempting to incorporate a dark mode feature from Tailwind. I followed the instructions from next-themes in order to add the dark ...

javascriptreactjstypescriptnext.jstailwind-css

Utilizing Javascript to Create 3D Mockups with Image Integration

I have a unique project in mind involving product design experimentation with the use of JavaScript. Users should be able to choose items like shirts, mugs, boxes, and books, then add text and/or images that can be moved, rotated, and scaled. After applyin ...

javascriptthree.js

Attempting to store an array of JSON objects in the state, and then utilizing the `map` method to render

I'm just starting out with React. Currently, I'm attempting to store an array of JSON objects in the state and then map those items into the component render. I'm feeling a bit lost on how to debug this as there are no console errors showi ...

javascriptreactjsaxios

I'm attempting to make a specific element in an array shine in the designated order. What could be causing my code to not function as expected?

Currently, I am working on developing a Simon game. In order to make the divs glow in the sequence of the array used, I have implemented the glowInOrder() function. However, I am facing an issue where only the first div in the array glows, while the rest d ...

javascriptjquery

React.Js custom form validation issue in Next.Js - troubleshooting required

My attempt at validating a form is causing some issues. After refreshing the page and clicking on the submit button, only the last input's error is generated instead of errors for every input according to the validation rules. Here is a screenshot o ...

javascriptreactjsformsvalidationnext.js

Transform C# ASPX to handlebars format

Initially, my task was to choose and relocate a single li from many options into a different div. But now, I am required to achieve the same result using a JS template which utilizes handlebars. The C# section is as follows: <li class="l-row__item pr ...

c#javascriptjqueryhandlebars.js

Why does the Roman to Integer conversion in JS only convert the first character?

Struggling with Leedcode question 13: Given a roman numeral, convert it to an integer. The input is guaranteed to be within the range from 1 to 3999. I've written some code below, but I'm puzzled as to why it only converts the first character in ...

javascriptintegerroman-numerals

Save essential data in local/session storage to have access to it even after the page is reloaded

Dear Team, we recently developed a single-page application that stores data in the root scope for access on other pages. While everything functions well in the regular flow, we encountered an issue with browser refresh. If a user refreshes the applicatio ...

javascriptjqueryangularjsbrowserbrowser-cache

Determining the offsetWidth and scrollWidth for option elements within a select field containing the multiple attribute on Internet Explorer 11

My select input element has multiple attributes and a fixed width set. Unfortunately, due to the fixed width, the overflowing content in the x-direction is not visible. To address this issue, I have created a JavaScript function that uses the title attribu ...

javascripthtmlcss

Developing an interactive menu for mobile devices utilizing a combination of JSON, HTML, JavaScript, and CSS

Creating a custom dynamic menu for mobile platforms using HTML, JavaScript, and CSS with a JSON object downloaded from the server. Not relying on libraries like jQuery. I've come across advice stating that "document.write" should not be used in event ...

javascriptjsonmobilemobile-website

In order to keep a div fixed at the top of the screen as you scroll, you can achieve this effect by utilizing CSS positioning. As the user scrolls down the page, the div

Can someone please help me figure out how to make a div element stay fixed on the screen as I scroll down the page? I've tried multiple solutions but nothing seems to be working. Any assistance would be greatly appreciated! I'm struggling with t ...

javascript