How to create a freeze panes feature like MS Excel using HTML and CSS

In my web application for iPad using Angular JS, HTML5, and CSS3, I'm facing a challenge with a large table that requires both horizontal and vertical scrolling, along with a "freeze-pane" feature similar to MS Excel.

Currently, I've divided the table into three parts - top, left, and middle regions using a div-based layout, as illustrated in the image. I'm tracking scroll events on the scrollable regions (top and left) and then adjusting the position of the middle region accordingly using Javascript. While this solution works, it does feel somewhat choppy. I'm wondering if there's a smoother way to achieve this functionality. I prefer not to use plugins to avoid adding more weight to my code, but I'm open to lightweight and efficient plugin suggestions if they exist.

Thanks in advance!

Answer №1

Even though you mentioned avoiding plugins, I wanted to suggest checking out Zurb Foundation's responsive table plugin as a potential solution:

It's worth noting that their examples have the first column fixed and non-scrollable in small browser widths, which is the opposite of what you're looking for based on your screenshot. You may need to do some code modifications to achieve your desired layout.

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

Looping through an array and appending distinct elements to a fresh array

I am currently facing an issue and seeking feedback on how to resolve it. Below is the JSON data: questions: [ { question: 'lala', answer: 'papa', categories: ['Handla'] }, { question: ...

As the user scrolls down, the navigation becomes obscured by the content

Whenever I scroll down on my website at Bradly Spicer, the navigation menu extends and ends up falling behind the content. This is the script I am using: .menu { position: relative; z-index:9999; } .post { background: #fff; border: 1px solid #ddd; font- ...

Issue with Angular *ngFor functionality causing malfunction in Tailwind Elements Select component

Below are my codes for a basic Angular component where I'm utilizing the Tailwind Elemets CSS framework. app.componenets.ts import { Component, OnInit } from '@angular/core'; import { Select, Datepicker, Input, initTE } from "tw-elemen ...

JavaScript: How can I execute a count that pertains solely to elements that are currently visible

Using jQuery, I have implemented a search functionality that hides items in a list that do not match a given string. The code loops through a list of divs and utilizes $(this).fadeOut(); to hide the elements. While this functionality works effectively, I ...

Leveraging JavaScript to extract data from a dropdown menu and apply it to a different section

I am working on a project that involves an HTML section where a user can choose a billing term from a drop-down list. I am in the process of writing JavaScript code to capture the selected option value and use it in another part of the webpage. Here is a ...

Obtaining the URL from the anchor tag

I am currently working on a project that involves scraping data from the cinch.co.uk website. My tools of choice are Python along with the BeautifulSoup4 and Request libraries. My goal is to extract car data from each advertisement, starting by navigating ...

Creating a customized conditional overflow style in _document.js for Next.js

Is there a way to dynamically change the overflow style for the html and body elements based on the page being viewed? For instance, on the about page, I want to hide overflow for html but not for body, whereas on the contact page, I want to hide overflow ...

Having Trouble Receiving Desired Results with Ajax and JSONP

Testing jsonp for a new project. The html page features ajax, displaying a drop-down form and an empty table. The table cells will be populated based on the jsonp response fetched by ajax. The php response is hosted separately but doesn't seem to wo ...

The EJS file is failing to display the stylesheet even though it is being pulled from the

Encountering a strange issue where the page routed to display additional information about a specific record from my database list on the homepage is not loading the stylesheets located in my partial/head, despite successfully passing the object informatio ...

Can you explain how I can declare a variable to store a scraped element in Puppeteer?

const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false, defaultViewport: null }) const page = await browser.newPage() await page.goto('https://www.supre ...

Making changes to JSON format post $.get function

Struggling to make sense of the JSON properties I receive from the server. Any advice on how to change the format would be greatly appreciated. Here is a snippet of the received data: [ { "date": "2006-07-01T00:00:00.000Z", "date_processed": "2 ...

Create a dynamic div element using Jquery that is generated based on text input

I am attempting to dynamically insert a div based on the text within the parent container. My HTML structure is as follows: <div class="listing_detail col-md-4"><strong>Living Room:</strong> Yes</div> <div class="listing_detail ...

A tool developed in Javascript that allows for the conversion of .ini files to .json files directly on the client

Does anyone know of a JavaScript library that can convert .ini files to .json files on the client-side? I checked out this library, but it doesn't meet my requirements. Here is an example of an .ini file: [Master_Settings:1] Model Name=RC-74DL IP Ad ...

Journey Swiftly Control

I have a question. Is it possible to manipulate routes in Express? Can I assign multiple routes to the same get or post request when providing an address? module.exports = function (app) { var controller = app.controllers.maps.cliente; app.route(&apos ...

Creating and accessing a temporary binary file using Node Js

Challenge I have been working on integrating the Google Text To Speech (TTS) service to save a generated binary audio file to Google Cloud Storage (GCS). Considering that saving a local binary file in Firebase's Cloud Functions environment may not b ...

Is the presence of a <ul> required within the <nav> element?

I was reading an article on which highlights the importance of using the <nav> tag for semantic purposes. Throughout the examples provided, the article consistently utilizes the <ul> tag and emphasizes its usage. Now I'm curious, is thi ...

Exploring the integration of d3 in an Express application - encountering an error: document is not recognized

I am facing a challenge in my expressjs application where I need to dynamically render vertices in a graph using d3. However, the code execution order seems to be causing issues for me. When attempting to use the d3.select function, I encounter the followi ...

Navigating through two nested arrays in JavaScript to access an object

Having difficulty extracting the nested car values using JavaScript (lodash). Take a look at the JSON data below: { "cars":[ { "nestedCars":[ { "car":"Truck", "color" ...

How can I make a recently added row clickable in an HTML table?

I have a table where each row is given the class ".clickablerow". I've set up an onclick function so that when a row is clicked, a dialog box appears allowing me to insert text above or below as a new row. The issue I'm facing is that even though ...

invoke two JavaScript functions without displaying any message

I'm facing an issue with Ajax as it's not displaying the message I intend to show. Let me elaborate. Within my PHP code, there is an input tag: <input type="submit" id="login_button_add" name="submit" value="Add" onclick="add_building(); sho ...