Create a horizontal scrolling fixed layout similar to the design of Google Plus

I am interested in creating a layout similar to Google Plus.

One question I have is regarding the fixed elements. When scrolling down, only the white content area moves while the menu, top area, and sidebar remain fixed. This setup is not an issue.

However, when resizing the browser window to a very narrow width, horizontal scrolling allows users to view overflow content. How can I achieve this effect using CSS or possibly jQuery? Typically, fixed elements do not scroll, but on Google Plus, they do when the window is too narrow.

Please take a look at my page givget.de and let me know if there is a way to implement this feature!

Thank you.

jqueryhtmlcsslayoutgoogle-plus

Answer №1

Here is a simple example to help you begin:

let minimumWidth = 1000;
....

$(window).resize(function(e){
    if($(window).width() < minimumWidth){
       $('.fixedSidebar').css('position','relative'); // etc
    }
});

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

Tips for eliminating unwanted white space underneath your webpage while zooming on a mobile device

Currently developing a responsive website, everything is running smoothly except for one issue. When I pinch zoom in on mobile and scroll down, a large white bar appears below the entire page, stretching across the screen width. How can this be fixed? Belo ...

javascriptjqueryhtmlcss

Dynamic Filtering with jQuery List

I'm attempting to create a dynamic filter list on keypress event. For example, if I type "It" into the input field, the elements that do not match this value will be hidden. I'm unsure if the code structure I have implemented below effectively ac ...

javascriptjqueryhtml

Using jQuery and Ajax to send the content of a single textbox to a controller for processing

I am currently developing a timesheet application and I want to incorporate an autosave feature. Here is an example of the form structure: <form id="timesheet" action="save_timesheet.html" method="POST"> <input type="text" id="day1taskid2" /> ...

jqueryajaxjsonmodel-view-controllerspring

Using AJAX and jQuery, add a record to MySQL across multiple elements that share a common class

Greetings, I am a newcomer seeking assistance with getting my code to function properly. I am faced with the challenge of displaying records from MySQL in a modal box arranged in a table format. Each row features an add (+) button generated through a PHP l ...

phpjquery

"Save an HTML file as a .txt document on your personal server

After coming across a code that grabs information and saves it in a .txt file, I encountered an issue where clicking the "SAVE" button downloads the file to my personal computer rather than saving it on the local server. To address this problem, I watched ...

javascripthtml

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

Preserving specific HTML elements within an xpath query or extracting the original HTML content from an xpath query

I am currently utilizing the power of xpath technology to extract valuable text from various articles. The goal is to specifically query for text and preserve any existing tags within the HTML structure. An alternative approach involves extracting the orig ...

phphtmlxpath

"Enhance the styling with jQuery's css() function when clicked

I am currently working on the following code: $(document).ready(function(){ $("#FlatCheckbox").click(function(){ $("#style1").css("margin-top",10); }); }); <h2> <input type='checkbox' id="FlatCheckbox" class=" ...

jquerycss

Waiting for file changes in JavaScript using AJAX

Currently, I am in the process of developing a website to manage my Raspberry Pi robot. Through a .py script called GPS.py, I am able to control two stepper motors by executing the following command: sudo ./GPS.py forward 100 30 The first argument specif ...

javascriptphppythonhtmlajax

Tips for aligning field labels and items together on one line, even when the item is spread across multiple lines

I need to showcase a comprehensive list of countries: Countries: Angola, Botswana, Burundi, Comoros, DR Congo, Djibouti, Egypt, Eritrea, Ethiopia, Kenya, Lesotho, Libya, Madagascar, Malawi, Mauritius, Mozambique, Namibia, Rwanda, Seychelles, South Africa, ...

css

Function for triggering character or camera movement upon the pressing of a button

Just starting out here with web coding and I'm trying to create a function that moves my game character when a button is pressed. The idea is to change a boolean value to "true" when the button is pressed down so that the character moves. I've at ...

javascripthtmlfunctionbutton

Ways to terminate all AJAX requests within a for loop

Is there a way to cancel all AJAX requests that are being handled by a for loop? var url = ["www.example.com","www.example2.com",....]; for (var i = 0; i < url.length; i++) { var XHR = $.get(url[i], function(data) { //do something }); } I attemp ...

javascriptjqueryajax

Enhancing 2D video viewing with Threejs interactivity

I want to create an interactive 2D video using three.js and maintain the aspect ratio of the video when resizing the browser window. Here is the code I am currently using: var camera, scene, renderer; var texture_placeholder, distance = 500; init() ...

javascriptcssvideothree.js

Why is the Footer component in Next.js Styling not staying at the bottom of the screen as intended?

Why is the Footer component not at the bottom of the screen in Next.js Styling? import Head from "next/head"; import Navbar from "./Navbar"; import Footer from "./Footer"; const layoutStyle = { display: "flex", flexDirection: "column", height: "10 ...

cssreactjsnext.js

Utilizing Javascript's Mapping Functionality on Arrays

Here is an array that I need help with: var gdpData = {"CA": 1,"US": 2,"BF": 3,"DE": 4}; I am trying to retrieve the value associated with BF using a loop Can anyone provide guidance on how to accomplish this using either JQuery or Javascript? ...

javascriptjquery

jquery loop to create a border highlight effect

I'm struggling to create a loop that will smoothly transition the border color of an image from black to yellow and back again over a set number of seconds. Additionally, I want the loop to stop when the image is clicked on. I feel like I might not be ...

jqueryhtmlcss

Layering elements using the z-index property in Internet Explorer 7,

Issue with text placement in a dialog div only occurring in IE 7. To see the problem, visit this page and click on any of the text boxes on the left side. Attempts to fix by adjusting z-index in the skin.css file for div.dialogFromAndTo did not resolve ...

cssinternet-explorer-7

Is there a way to change my cursor to a pointer finger when hovering over my box?

<script type="text/javascript"> function draw() { var canvas = document.getElementById('Background'); if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.lineWidth = 0.4 ctx.strokeRect(15, 135, 240, 40) Is there a w ...

javascripthtmlcss

Bootstrap dropdown menu is functional only on the active page in a dynamic navigation system

During my journey of learning PHP, SQL, and other web development skills, I built a website. Now, I am working on enhancing the original page by incorporating a bootstrap navbar. However, I encountered an issue where the dropdown box only appears for pages ...

phpcsstwitter-bootstraptwitter-bootstrap-3

"Learn the simple method for dynamically changing the record limit for pagination in CakePHP

Currently, I am able to load results by specifying a fixed limit. However, for my specific requirements, I need this limit to be determined by a function that generates a random number between 2 and 8 each time there is a request for more results. I have a ...

jqueryajaxtwitter-bootstrapcakephppagination