div with a fixed element inside that is scrollable

Check out this jsfiddle: http://jsfiddle.net/devboell/kjFps/

I am trying to create a div that overflows both horizontally and vertically. Additionally, I need an element that scrolls only horizontally while remaining fixed vertically.

Here is an explanation of the code:

  • There is a main container div with a single background div that is double the size of the container in both horizontal and vertical directions.
  • The scale div should always be visible at the top of the container, scrolling horizontally.
  • I attempted to split the background div into backgroundHorizontal and backgroundVertical, positioning the scale absolutely within backgroundHorizontal.
  • However, when scrolling down, the backgroundVertical pushes the scale out of view.

In addition to this issue, I have another requirement regarding the visibility of the vertical scrollbar. It should always be visible rather than appearing only when scrolling all the way to the right as it currently does.

Thank you for your help!

jquerycsshtmlpositioning

Answer №1

I encountered a similar issue and discovered that based on the specification, it is not possible to have a div scrollable horizontally while also being fixed vertically simultaneously.

The workaround I implemented was: 1. setting the position of the inner element to absolute;

$('.container').on('scroll', function(){

$('.inner-element').css('left', $('.container').scrollLeft())

})

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

Ways to remove a dynamic field with jquery

I have developed a script that allows me to add dynamic fields and delete them as needed. However, I am facing an issue where I cannot delete the first element with the "el" class in my script because it removes all elements within the "input_fields_cont ...

javascriptjquerylaravellaravel-blade

Applying CSS rules from an array to elements by looping through

I'm looking for a way to allow users to input CSS styles and have those styles applied to the last selected element, which is determined by the "rangeselector" variable. Currently, the code selects the correct element, but only the first CSS rule is b ...

javascriptjquerycss

Verify the dropdown selection when moving focus away from it

I need help validating my DropDownlist on tabout. Here is the code for the dropdownlist: <div class="form-group"> <label class="col-sm-2 control-label labelfont">Select a Provider Type:</label> <div class="col ...

jqueryhtmldrop-down-menu

Leveraging the On Keyup Function in Real-Time

How can I modify this code to run after an ajax call using .live method? var element=document.getElementById('txt_url'); element.onkeyup=function(){ var input=element.value; if(input=='') return; if(input.indexOf('h ...

javascriptjquery

jQuery is unable to locate elements

Here is a JavaScript code snippet that I have: (function($, undefined) { $("a").click(function(event) { //or another elemtnt alert('Hello!'); }) })(jQuery); Also, here is the link being referenced in the code: <a href="http: ...

javascriptjquery

What is the best way to add child elements to the parent element when the height limit has been reached?

This is the code I've been working on: <ul style="height:200px;width:100%;"> <li>Hi</li> <li>Hi</li> <li>Hi</li> ... (add more items here) </ul> Here is a preview of how it currently looks: ...

htmlcss

Automating the movement of a slider input gradually throughout a specified duration

I am working on a website that includes a range input setup like this: <input type="range" min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/> Additionally, I have integrated some D3 code for visualizations. You can view ...

javascriptjquerycssd3.jsuser-input

I developed an RPG game with an interactive element using jQuery. One of the biggest challenges I'm facing is the random selection process for determining which hero will be targeted by the enemy bots during battles

Hello, this marks my debut on stack overflow with a question. I've created a game inspired by old school RPGs where players choose from three heroes based on the Marvel universe to battle one of three enemies. The problem I'm facing is that even ...

javascriptjqueryfunctionconditional-statements

Get the skin image link from the app folder in Magento

I am attempting to manually insert social icons into my project. projectname/app/design/frontend/projectname/default/template/page/html/footer.phtml This is the HTML code: <a src="../">facebook</a> What is the proper method to link the imag ...

htmlcssmagentotheming

Elements are receiving CSS properties from other elements within the same component

I'm encountering an issue with my components: 1. I cannot seem to style html and body in signin.component.css for some reason. The workaround I found was using: encapsulation: ViewEncapsulation.None ==> This works perfectly However, when I switch ...

htmlcssangular

Maintaining the position of the input cursor when using the arrow up and down keys in AngularJS directive

I am currently developing a custom "typeahead/autocomplete" directive. element.bind("keydown keypress", function (event) { if(event.which === 38 || event.which === 40) { var increment = event.which === 38 ? 1: -1; ... .. ...

jqueryangularjs

Is it not possible to generate HTML tags using jQuery and JavaScript in JSF?

I'm currently working with jsf 2.0 and richfaces 4.0 to develop my application. Occasionally, I incorporate jQuery and JavaScript functions for displaying and hiding elements. However, I've encountered an issue when trying to generate tags within ...

javascriptjqueryjsfxhtmlrichfaces

Utilizing the datepicker options function within a different function

I'm working on a function that utilizes a promise to retrieve data from an asynchronous ajax call: $("#mySelect").on('change', function() { var mySelectValue = $('#mySelect').val(); var promise = getAvailableDates(mySe ...

javascriptjqueryajaxdatepickerpromise

Patiently anticipating the completion of a jQuery animation

I am currently working on some jQuery code that handles toggling containers and buttons. The specific snippet of code I am focused on is the following: var id = $(this).data('id'); if ($('#container').is(':visible')) { $( ...

javascriptjqueryanimationjquery-animate

Ways to deselect a checkbox if the selected option is anything other than 'All'

I have a set of checkboxes generated from a database, but one checkbox labeled "All" serves as a way to select or deselect all other checkboxes with a single click. If all the options are checked and any individual option (other than 'All') i ...

javascriptjquerycheckboxfunctional-programming

Optimal Strategy: Utilizing Spring Boot for Backend Development and jQuery for Frontend Interface

I am currently tackling a project that involves a Spring Boot 2 Backend and a jQuery Frontend. The frontend communicates with the backend by sending Ajax requests to Spring REST controllers in order to interact with database entities. One of the challenge ...

javascriptjavahtmljsonajax

Using jQuery to Decode the XML Document Containing National Threat Level Data

Recently, I've been experimenting with using jQuery to extract data from the DHS Threat Level found in their XML file. However, despite my efforts, I haven't been able to make it work. As a newcomer to Javascript and non-presentational jQuery, I& ...

javascriptjqueryhtmlxmlajax

Create a new CSS rule within a class, and remember to save the changes to

Upon opening page 1.html, I utilize JavaScript to dynamically add a background image to the body of the page. To achieve this, I use the following code: document.body.style.backgroundImage = "url(http://www.example.com/image.jpg)"; This code effectively ...

javascripthtmlcss

Display HTML content in autocomplete using jQuery UI

I implemented a search feature on my website using jQueryUI, similar to how it works on Facebook. Below is the jQuery code: //search main function split( val ) { return val.split( ); } function extractLast( term ) { return split( term ).pop(); } ...

javascriptjqueryjquery-ui

Is your Bootstrap input displaying the has-error class with a glyphicon, but the alignment is not vertically centered?

What is the reason for the misalignment of glyphicon-warning-sign form-control-feedback vertically in the code below after applying font-size: 20px; to the label? <div class="container"> <div class="content align-left contact"> ...

javascriptjqueryhtmlcsstwitter-bootstrap