Is it possible to move a vertical scrollbar?
I currently have a scrollbar in my div, but I would like to relocate it to the right side next to "Panel 2".
Unfortunately, using CSS styles position: fixed and margin-right is not an option. Are there alternative methods such as jQuery that can achieve this?
This is the desired layout:
https://i.sstatic.net/Hn820.png
JSBIN link for reference: https://jsbin.com/pahezuzohi/1/edit?html,css,output
Ensure to include a wrapper for your content and specify the width for the content div.
HTML CODE:
<div class="wrapper">
<div class='left bar'>Panel 1</div>
<div class='left menu'> Menu 1</div>
<div class='content'>
Insert your content here...
</div>
<div class='right bar'>Panel 2</div>
<div class='right menu'>Menu 2 </div>
</div>
CSS CODE:
.main {
overflow-y: scroll; /* include "overflow-y: scroll" here */
}
.menu{
background: lightgreen;
height: 100%;
width: 20%;
}
.bar{
background: lightblue;
float: right;
height: 100%;
width: 10%;
}
.left{
float: left;
}
.right{
float: right;
}
.content{
position: relative;
width: 40%; /* define the width */
height: 100%;
float: left /* set the float */
}
CHECK DEMO: https://jsbin.com/niyetopaxo/1/edit?output
Check out this code snippet to see if it meets your requirements:
.content {
height: 190px;
width: 600px;
position: relative;
padding-right: 15px;
}
#scrollable {
background: white;
height: 100%;
width: 100%;
overflow-y: scroll;
position: absolute;
top: 0;
left: 0;
}
#text {
margin: 0px 210px;
}
.panel1,
.panel2 {
background: #ADD8E6;
width: 100px;
height: 100%;
position: relative;
}
.menu1,
.menu2 {
background: #90EE90;
width: 100px;
height: 100%;
position: relative;
}
.menu1,
.panel1 {
float: left;
}
.menu2,
.panel2 {
float: right;
}<div class="content">
<div id="scrollable">
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed ac dolor sit amet purus malesuada congue...
</div>
</div>
<div class="panel1">
Panel 1
</div>
<div class="menu1">
Menu 1
</div>
<div class="panel2">
Panel 2
</div>
<div class="menu2">
Menu 2
</div>
</div>Here is an updated version of the code for my preview problem. The goal is to send and retrieve a value using ajax, but I'm encountering issues with sending the value and getting ajax to work properly. This revised code is easier to test on different ...
I'm working on a Facebook application with certain functionalities that rely on scripts being called via ajax. I'm using jQuery for the ajax calls like this: $.post('script.php', {var1: val1, var2: val2}, function(data){...}); The sc ...
I am currently working with Bootstrap and I am encountering some empty space on the left and right of my div. Instead of filling up the entire screen, it seems to only be taking up 99%. MY CODE: #social-links { background-color : #242424; /* border ...
My webpage layout is structured as follows: https://i.sstatic.net/5rdiw.png The left side, identified as D, functions perfectly. It contains a significant amount of content that scrolls correctly. Even as the content increases, the height stays at 100% o ...
These simple inquiries are starting to get on my nerves. I can't keep waiting around for my website designer to resolve this issue. It shouldn't be that difficult... I managed to figure out most of it by researching similar questions, but I could ...
I have created an image gallery using PHP and implemented a JavaScript code to create a CSS "overlay" effect when the image is clicked. <script type="text/javascript"> $(".button").click(function(e) { e.preventDefault(); $.ajax({ ...
I have a unique directive that is able to detect changes in an input field of type file. When this change occurs, my goal is to then locate another input field and modify its ng-model. The issue I am facing is that I am unable to trigger the model change s ...
Greetings, this is my initial inquiry, please excuse any errors as English is not my first language. For my project, I am utilizing Angular 6, jQuery, and BS. I have two accordions, each with different categories: A1 and A2. My goal is for clicking on A ...
Having an issue on my e-commerce platform, Bence Tupperware, which is built with MVC.Net. The problem seems to be related to the slider at the top of the page. After checking in Mozilla's responsive design mode, everything appears to work fine on devi ...
What is the best way to align two divs in the center beside each other with some padding in between that actually works? I attempted using display: inline, but it didn't have the desired effect. .my-container { position: rela ...
I have successfully implemented a Bootstrap Menu by placing it in a separate header.html file and using the php include function to call that file on every page of my website. However, I am now trying to figure out how to dynamically change the active cl ...
I'm trying to make an image display a border or box-shadow when hovering over a link, along with an animated circle around the round image. I've attempted to achieve this with the following CSS code, but it doesn't seem to be working. https ...
My CSS notebook creation featuring box-shadow and margin can be viewed here: JSFiddle The issue I'm facing is that when a line break occurs, the notebook row expands, causing it to lose its notebook-like appearance. Is there a way to ensure each line ...
Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...
When I overscroll over the viewport in Safari, a black line appears on the app in all directions. However, in Chrome, this line is white. Even though I have "theme_color": "#ffffff" set in my manifest.json, the issue persists in Safari ...
Currently, I am working on a website homepage managed with fullpage. Here is the code I am using to initialize the fullpage library: $('#eg_homepage').fullpage({ anchors: this.hFullpageAnchors, slidesColor: this.hFullpageSlideColors, ...
Can I use the same code block for two different types of buttons without creating separate event handlers? Maybe something like this: $(".lb",".da") I tested the above example but it didn't work as expected. However, it might give you a sense of wha ...
When making an Ajax call and rendering two templates based on the response, I encountered a problem where the correct template renders but the script following it appears on the page as plain text. Here's the code snippet with the issue: if (question ...
Here is the code snippet from my view. $(function () { $('#buttonx').on("click", function (e) { e.preventDefault(); $.ajax({ url: 'Ficha/VerificarPatrocinador', ...
Two pages with identical layout and CSS stylesheets. One page displays correctly, while the other has overlapping margins for paragraphs. Unable to share entire source code due to length. Seeking insight into potential causes of this issue. https://i.sst ...