Integrate a resizable sidebar on the webpage's right side that dynamically adjusts the layout

As I develop a Chrome Extension, my goal is to incorporate a sidebar into all webpages without overlapping the existing content. The sidebar should be placed beside the content, effectively reducing the width of the body of the webpage to the initial width minus the width of the sidebar.

While I have written the following code to achieve this functionality, I am encountering an issue with certain pages such as stackoverflow where the top bar does not shrink along with the rest of the page (refer to the attached screenshots below the code).

        // create sidebar
        const sidebar = document.createElement("iframe");
        sidebar.src = chrome.extension.getURL("iframe/iframe.html");
        sidebar.id = "extensionSidebar";
        sidebar.frameBorder = "0";
        sidebar.style.height = "100%";
        sidebar.style.width = "100px";
        sidebar.style.position = "fixed";
        sidebar.style.top = "0";
        sidebar.style.right = "0";
        sidebar.style.zIndex = "2147483646";

        // append sidebar to body
        document.documentElement.appendChild(sidebar);

        // shrink body
        document.body.style.width = window.innerWidth - 100 + "px";

Screenshots:

javascripthtmlcssgoogle-chrome-extensionsidebar

Answer №1

The reason the top bar does not shrink as desired is because it is fixed and will always take up 100% of the viewport width. In your example with stackoverflow, its CSS properties include:

...
position: fixed;
top: 0;
left: 0;
width: 100%; /*although not truly 100vw*/
...

Even if you try to change the maximum size of the html element in the CSS to 80% of the viewport width, the navbar will still extend to fill the entire width of the viewport.

To better understand this concept, you can experiment with this fiddle: https://jsfiddle.net/bcg2vkjm/4/

In the fiddle, try uncommenting the body element inside the CSS to see the result. This might provide some insight for you! Adjusting the translateX and/or scale in the CSS could potentially help achieve the desired effect, but be cautious as it may drastically alter the display of all elements, not just the fixed element.

In your JavaScript code, consider using the following:

document.querySelector('body').style.transform = "scaleX(something)";

as an example!

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

How can I update data in Select2 after it has been initialized?

After initializing select2, I am trying to set an array of data in the following way: var selection = $('#selection').select2({}); selection.data([ {id: 1, text: 'value1'}, {id: 1, text: 'value1'} ]); However, I am encou ...

javascriptjqueryjquery-select2

Angular 10: A guide to dynamically highlighting navbar elements based on scrolling position

I am currently working on a single-page application using Angular 10. I have a simple page layout and I want to implement a feature that will highlight the navbar based on the scroll position. How can I achieve this functionality in a single-page applicati ...

javascripthtmljquerycssangular

How to create a non-clickable section within a linked div

Website: I am interested in linking just the triangle banner located at the top right corner of the page. The triangle image is actually a transparent rectangle with only the triangle portion filled in, so I want to ensure that only that particular sectio ...

htmlcss

When using Python Selenium, we can see JavaScript in the view page source, but inspecting elements reveals the

I'm currently facing a challenge in accessing links to attachments for a web automation project. The issue lies in the fact that while I can view the HTML Code (divs and tables) when loading the webpage via Chrome and inspecting element, all I see in ...

javascriptjqueryselenium-webdriver

Tips for handling ng-if during element presence checks

There's a hidden div on my web page that is controlled by an ng-if directive. I'm looking to create a test that confirms the presence of the element only when it should be visible. If the condition set by ng-if is not met, the element is complete ...

javascriptangularjsprotractor

Utilizing React JS to Develop Cell Components for a Schedule, Ensuring Teams are Unique within the Same Row

I am currently facing a challenge involving a table that has a fixed number of timeslots (y axis) and pitches (x axis). In addition, I have a collection of match objects with the following structure: Object { id: 3, teamA: "pelt", teamB: "Ranelagh" } Eac ...

javascriptarraysreactjs

What could be the reason my Angular interceptor isn't minified correctly?

I have come across this interceptor in my Angular project: angular.module('dwExceptionHandler', []) .factory('ExceptionInterceptor', ['$q', function ($q) { return function (promise) { return promise.th ...

javascriptangularjsbundling-and-minification

Tips for dynamically retrieving a CSS file for an HTML page

With multiple html pages containing the same navbar, I made the decision to place the navbar in its own file called navbar.html and use ajax with jquery.get() to dynamically load it onto each page. This prevents redundant code across all pages. Currently, ...

htmlcssajax

Dealing with a jQuery/Javascript/AJAX response: sending a string instead of an integer as a parameter to a

Trying to figure out how to handle passing integers as strings in JavaScript within an AJAX response. Here is the code snippet: message+="<td class='yellow' onclick='open_flag("+i+j+")'>"; The message variable is eventually inse ...

javascriptjquerystringint

Simple steps to generate a static header in list view on asp.net

I'm struggling to keep my header fixed while scrolling and can't seem to figure it out. Below is my ListView Code: <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" DataKeyNames="FormSectionSubSectionItemRelID" OnSele ...

cssasp.netlistview

Angular's Enhanced Feature: Selecting Multiple Columns

Looking for an open-source Angular library that can display items in multiple columns rather than each item spanning across multiple columns. Many libraries support tabular display, but the challenge is to find one that arranges items in multiple columns. ...

javascriptangularhtml-select

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Securing Your WordPress Custom Form with Captcha

I have a unique form on my WordPress website that tracks IP addresses, checks referer pages, and validates email addresses. Despite these measures, I am still receiving spam subscriptions. I have tried implementing both Bestwebsoft CAPTCHA and really sim ...

phphtmlwordpresscaptcha

The CSS focus-within and hover properties are not functioning as expected

How can I make the search tags visible (the buttons above the text input field) when the search bar below them is clicked? I've tried using :hover, :focus, and :focus-within, but none of them seem to be working. Can someone help me figure out the issu ...

htmlcsscss-selectorshoverfocus

How to Perform a Method Call or Array Iteration in JSX within HTML

Encountering a new issue that I haven't faced before, this is my first time working on something like this and finding a solution is proving to be tricky. Currently, I'm using SendGrid to send an HTML email through a POST request in express on N ...

javascriptnode.jsreactjshtml-email

Injecting cascading style sheets across different domains using Javascript

Put simply: Is it possible for an external Javascript code to inject another script that is hosted on a completely different domain into the page's Document Object Model (DOM)? For example: Imagine the website foo.com which has an html script tag w ...

javascriptbrowsercross-domain

Enhance your Angular component by integrating property bindings and events with transcluded elements

I have an Angular component that includes an <input/> element with property bindings and an event listener. I am exploring the option of allowing users of the component to define a custom input field, potentially with parent elements, through transcl ...

javascriptangular

Using Angular to Apply a Custom Validation Condition on a FormGroup Nested Within Another FormGroup

I am facing an issue with my form validation logic. I have a set of checkboxes that need to be validated only when a specific value is selected from a dropdown. The current validator checks the checkboxes regardless of the dropdown value. Here's the c ...

javascriptangulartypescriptvalidation

AngularJS filter that retrieves only values that have an exact match

In my AngularJS application, I have a checkbox that acts as a filter: Here is the data being used: app.controller('listdata', function($scope, $http) { $scope.users = [{ "name": "pravin", "queue": [{ "number": "456", "st ...

javascripthtmlangularjsangularjs-filter

Using Mongoose, Express, and Node.js to send a server variable to an HTML page

I've encountered an issue while attempting to transfer a variable from my server.js file to HTML. Despite successfully passing the variable to another EJS file on a different route, I can't seem to display it within this specific EJS file. Strang ...

javascriptnode.jsmongodbexpressmongoose