Sliding panel for horizontal overflow

Currently, I am developing a web animation GUI that requires a sliding timeline area similar to this example:

With a starting time of 0, there is no need to slide to negative times, but the ability to zoom in and slide side to side to view the entire timeline is essential.

After exploring options like overflow-x: scroll, I found that it does not behave as expected.

The main issue arises when observing the timeline on this page: . Notice how the timeline extends beyond the screen to the right, and the background color abruptly ends, leaving no grey background behind the ruler when scrolling to the right.

The timeline is enclosed within the following structure:

<div class="col-md-10 m-0 p-0 timeline-right-panel">
  <div class="col-md-12 scrubberHandle m-0 p-0">
    <i class="fa fa-chevron-down scrubber-icon"></i>
  </div>
  <div class="col-md-12  m-0 p-0 timeline-container timeline-container-header">
    <div id="timeSlider" class="col-md-12 m-0 p-0"></div>
    <div class="col-md-12  m-0 p-0 timelineTicks timelineNumbers timelinePositioning"></div>
  </div>
  <div class="col-md-12  m-0 p-0 timelineTimingPanel"></div>
</div>

Upon rendering the page, the timeline-container-header div looks like this when inspected:

<div class="col-md-12  m-0 p-0 timeline-container timeline-container-header" style="width: 2110px;">
  <div id="timeSlider" class="col-md-12 m-0 p-0"></div>
  <div class="col-md-12  m-0 p-0 timelineTicks timelineNumbers timelinePositioning">
    <span class="minorTick" style="position:absolute;width:2px;height:10px;left:8px;">|</span>
    <span class="minorTick" style="position:absolute;width:2px;height:10px;left:12px;">|</span>
  </div>
</div>

Particularly, note the style="width: 2110px;" in the container. Despite various attempts to retrieve the actual width using methods like $(".timeline-container").width() and 

$(".timeline-container").outerWidth()
, only the width of the section with the grey background is obtained. The width is determined by the 500 tick marks on the ruler and their positioning, which extend the outer container, but the actual width remains elusive.

Could the involvement of bootstrap be causing this issue? The objective is to determine the width to match it in the container underneath, where draggable elements are housed. Ideally, creating a sliding timeline akin to the visjs example would be preferred, but the fundamental aspect of obtaining the width seems to be problematic.

Any tips or tricks for retrieving the width of this container?

javascriptjquerycsstwitter-bootstrap

Answer №1

If you're facing similar issues, the problem I encountered was with Bootstrap not allowing the actual width of the container to be retrieved. I decided to remove the Bootstrap styling, and instead, set the width using the same variables I used to position the tick marks on the ruler.

Additionally, for those interested in scrolling content horizontally, I found a plugin that worked seamlessly without requiring any additional adjustments to my JavaScript calculations for mouse position within the container. Check it out here:

There were a few other options like https://github.com/vitch/jScrollPane, but those projects appeared to be a bit dated compared to the one I mentioned earlier.

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

Retrieve main page elements from an additional page called PageSlide

I have implemented the jquery PageSlide plugin as a menu feature on my website. The plugin opens a separate page on the side of the main page to function as a menu. However, I am facing a challenge in accessing the main page's elements from this side ...

javascriptjqueryhtmlcss

Tips for picking out a particular item from a list of child elements

When I select the first parent's children array, it ends up selecting every other parent's children as well. This is due to index 0 remaining the same for all of them. How can I specify and highlight a specific child? Link: Check out the stackb ...

javascriptangulartypescriptionic3ngfor

"Encountering a 405 error when transmitting information from an HTML file to a Python Flask server using 'GET / HTTP/1.1'

As someone who is brand new to the world of python and AJAX, I have been piecing everything together from various sources online including examples and Flask documentation. So far, I have managed to make some progress. My goal is to send latitude and longi ...

javascriptpythonhtmlajaxflask

Issue with Material-ui IconButton's edge properties not functioning as expected

Is there a way to position the delete icon on the right side of the screen? It seems like using edge= "end" is not working as expected. If you'd like to take a look, here is the sandbox link: https://codesandbox.io/s/admiring-silence-vwfoe? ...

javascriptreactjsmaterial-ui

A method to trigger the opening of a div tag when a button is clicked using Vue.js

<div class="input-wrapper"> <div class="mobile-icon"></div> <input class="input-section label-set" type="text" v-model.trim="$v.mobile.$model" :class="{'is-invalid': ...

javascripthtmlcssvue.js

Utilizing Jquery to toggle collapsed divs with a click event

Here is how my HTML appears: <h3><a href="#" title="story title">Story Title</a> <img class="expandstory" src="/images/plus.png" /></h3> <div class="description">Short description about the story</div> <h3 ...

jqueryhtml

"Expand" Button following X buttons

Check out this JSFiddle for the code: $(document).ready(function(){ $( ".keywordsdiv" ).each(function(){ $(this).children(".keywords").eq(3).after('<a href="" id="playtrailershowmorebuttons">....Show More</a>');//add a uniq ...

javascriptjqueryhtml

Working with CodeIgniter and extracting data using an AJAX request

I've been experimenting with this code for a while now and I haven't been able to get it to work. I am working with CodeIgniter framework and when I click the button $('.galName').click(initUpdate);, it calls the following function: fu ...

phpajaxcodeigniterjquery

The v-for directive on a reactive Vuejs array is failing to render its elements

After much searching, I have identified the error and provided a brief explanation in the following paragraph. The code below resolves the error by changing the approach of the code rather than fixing the error itself. By defining the indexes of the array ...

javascripthtmlvue.js

defined dimension of table cell

<table class="data-table"> <tr> <th style="width: 200px;"> DescriptionDescription <%--in this case <td> is resized--%> </th> </tr> <% foreach (var item in Model) { %> ...

htmlasp.net-mvccss

Combining Django with the powerful Vue3 and lightning fast Vite

I'm in the process of upgrading my multipage app from Vue2 with webpack to Vue3 with Vite. After successfully rendering my Vue3 components on my Django templates, I am now facing a challenge - setting component variables on the Vue app using the Djan ...

javascriptvue.jsvuejs3vite

Using vue.js to make an HTTP GET request to a web API URL and display

I am currently utilizing vue.js to make an http request to a web api in order to retrieve a list of projects and display them in a list. However, I am encountering an issue where only one item from the response array of eight items is being rendered. Any a ...

javascriptvue.jsvue-resource

Utilizing v-model alongside various JavaScript plugins within a single select element

I've incorporated the jQuery plugins select2 and datepicker into my project, utilizing custom directives for them. Everything was functioning smoothly until I attempted to retrieve the selected value using v-model, which resulted in a failure to bind ...

javascriptvue.jsjquery-ui-datepickerjquery-select2vuejs2

Generate a pair of dates and organize them in chronological order

Working on an application where the database response lacks a direct timestamp, causing data to render differently each day and requiring me to use .reverse() to fix my charts. I aim to implement a permanent solution using sort(), but struggling due to the ...

javascriptarrayssorting

Guide to dynamically add tr element using CSS to a table

While using the $.each function in jQuery, I am retrieving data and adding it to a table in the following manner: $.each(segment, function (index, innerSegment) { var tr; tr = $('<tr/>'); tr.append("<td>" + segment[i].Airline.Air ...

javascriptjqueryhtmlcss

Tips for transforming every element of an array into its own array using JavaScript or Loadash

Hello, I have an array that looks like this. I am attempting to convert each element into its own array. I tried using lodash's chunk function but was unsuccessful. [ 'Product 1', 'Product 2', 'Product 3', 'Product ...

javascriptarraysnode.jsunderscore.jslodash

Tips for linking my TypeScript document to the server

Recently diving into the world of Angular 2 and seeking to grasp its intricacies. Currently utilizing Visual Studio Code. How can I have the server monitor changes in the TypeScript file? Do I need a compiler to convert it to JavaScript for this purpose? ...

javascriptangulartypescriptwatch

Error: express is missing a closing parenthesis for the argument list

When running this code in the VS Code terminal, be sure to verify any errors that may occur. var express = require('express'); var app = express(); app.get('/', function(request, response) { response.send("hello world"); }); app.li ...

javascriptnode.jsexpress

Construct a div element using JSON information

I am retrieving information from a database and organizing it into a JSON array. Here is the data that I have: [{"id":"0","name":"red","percentage":"60"},{"id":"1","name":"blue","percentage":"58"},{"id":"4","name":"green","percentage":"12"}] The structu ...

javascriptjqueryarraysjson

Error: Attempting to access property 'mouseX' of an undefined object was unsuccessful

Currently, I am utilizing AmCharts to generate a graph displaying payments made over time. The configuration setup for AmCharts seems accurate. Just to mention, I do not possess expertise in Javascript. Utilizing AmCharts 3.18.3.free The complete conso ...

javascriptjqueryamcharts