How Can I Adjust/Toggle Width of Right Sidebar on Web Page?

Questions & Suggestions
, ,
1

Continuing the discussion from Is there a better way to set the sub-window of a webpage to a specific size?:

@CJK, you did a great job in the above post. I have studied your answer, but I cannot figure out how to apply it to my use case. Can you please help?

My Objective: Toggle the Size of the Right Sidebar at regex101.com

image

I would like to toggle the width of this sidebar between 0 (or as small as you can) and say 50% of the main window.

The tag which defines this sidebar is
<div class="_1Eaxs">

Of course I'm sure you will easily see that in the Chrome Dev Tools.

This window can show up to 3 panels:

  1. Left Sidebar (can be hidden)
  2. Main panel
  3. Right Sidebar (can be hidden)

The Left & Right Sidebars can be hidden in the user's settings:
https://regex101.com/settings

It just occurred to me that instead of the 0 width, we could just hide the Right Sidebar.

So, if you could at least get me started in the right direction, I'd greatly appreciate it.

2

Hi @JMichaelTX, thanks for supplying all the information necessary to be at my fingertips. That's a pleasant experience.

The situation here is different to the previous post, but thankfully to our benefit. The two div elements here are defined as so-called flex columns, which are both floating elements that adapt to each other's widths automatically (whereas, the previous post's div elements were positioned absolutely in space, and had their four edges independently set).

This means, we only have to deal with the single div element, which is the one you supplied.

You can adjust its width like so:

document.querySelector('div[class=_1Eaxs]').style.width='20%';

and this will set the div elements to an 80/20 split.

Rather than setting it to 0% (which leaves a minuscule presence at the right edge of the screen), it's probably more effective and convenient to toggle its visibility (which was one of your thoughts):

document.querySelector('div[class=_1Eaxs]').style.display='none';  // hide
document.querySelector('div[class=_1Eaxs]').style.display='';      // show

So, you may end up choosing to set its width to 50%—which can remain fixed—and toggle the visibility on/off.

Regarding the left sidebar, it's a nav element that is positioned absolutely when it comes into being (when the browser window is sufficiently wide). The main panel and the right sidebar then, together, are contained in a div element also positioned absolutely, and creating a situation that closely resembles the one in the previous post.

But, you may find it easier to hide the nav element and adjust the left border of the div that contains the remaining two:

function toggleLeftSidebar(){
  lsb=document.querySelector('nav[class=_2q2Gx]');   // left sidebar
  mrg=document.querySelector('div[class=fy8Gb]');    // main & right panel group
      
  if (lsb===null) return null;

  lsb.style.display!=='' 
  ? (lsb.style.display='',mrg.style.left='270px')
  : (lsb.style.display='none',mrg.style.left='0px');
}

That toggleLeftSidebar() function is a quick example merely to show how the left border is adjusted for the main and right panel group. In actual fact, while the toggling works in a given browser width, if you reduce the width of the browser so that the nav element disappears, the left border of the remaining pair will remain set at whatever it was last set to, which isn't ideal.

But your JavaScript is much better than mine, so you can likely devise a more workable solution than that one.

1 Like
3

Well, I try to do the same thing I ask of others when posting questions.

This looks great. I haven't tested it yet, but I'm sure this will do exactly what I want.

I don't know where you got that idea -- I'd say just the opposite. :wink:

The size of the right sidebar has bugged me for a long time. It now looks like a solution is in hand. I'll get back to you soon.

4

Thanks again @CJK -- great work! :+1:

Those two statements are the core of the solution.
For anyone following this thread -- the best way to develop and test stuff like this is in the Chrome JavaScript Console, where you get great autocomplete, and immediate results.
In less than 10 sec I confirmed @CJK's solution!

So, I wrapped a little code around that, and put it in a KM macro, and it seems to work very well. I only found two hitches (which I made a workaround for):

  1. If the Regex101.com window is < 1130px, the right sidebar won't show, and you can't control it.
    • So, my macro checks the window width and increases if need be.
  2. The left sidebar isn't enabled until the window even much wider than that.
    • The modified script tests for existance of the left bar element, and if not found shows an alternate temporary slide-out version of the left sidebar.

But this all makes the Regex101.com site much more useable, IMO.
I'll run it for a while to make sure things are working OK, and then post as a separate Macro. For now, here's what I'm using:

Two Macros:

  1. Toggle Show/Hide & Resize of Right Sidebar
  2. Toggle Show/Hide of Left Sidebar

MACRO:   Toggle Show/Hide of Right Sidebar of Regex101.com


#### DOWNLOAD:
<a class="attachment" href="/uploads/default/original/3X/b/f/bff92fa16d8bdeee3becc54d20194aae94bea386.kmmacros">Toggle Show-Hide of Right Sidebar of Regex101.com.kmmacros</a> (6.2 KB)
**Note: This Macro was uploaded in a DISABLED state. You must enable before it can be triggered.**

---



![image|557x393](upload://8O8PLHvLrn1YauXPXIBtlYFH78b.jpg)

---

### JavaScript To Toggle Show/Hide & Resize Right Sidebar
```javascript
'use strict';
(function myMain() {      // this will auto-run when script is executed

/*

PURPOSE: Toggle Show/Hide of Regex101.com Right Sidebar
VER: 1.1 2018-08-02
AUTHOR: @JMichaelTX based on script by @CJK

*/
var scriptResults = "TBD";
//debugger;

var sbElem = document.querySelector('div[class=_1Eaxs]');

if (sbElem) {
var sbWidth  = parseInt(sbElem.style.width, 10);
if (isNaN(sbWidth)) { sbWidth = 0; }
if (sbWidth < 70) { 
  
  document.querySelector('div[class=_1Eaxs]').style.width = '70%';
} else {

  var sbHide = document.querySelector('div[class=_1Eaxs]').style.display;
  if (sbHide === "none") { 
    document.querySelector('div[class=_1Eaxs]').style.display = '';
  } else { document.querySelector('div[class=_1Eaxs]').style.display = 'none'}

}

scriptResults = 'OK';

} else {
  scriptResults = '[ERROR] Window must be min WIDTH of: 1130';
  window.alert(scriptResults);
}

return scriptResults;
}  // END of function myMain()
)();

```

---

### MACRO:&nbsp;&nbsp;&nbsp;Toggle Show/Hide of Left Side Bar of Regex101.com

~~~ VER: 1.0&nbsp;&nbsp;&nbsp;&nbsp;2018-08-02 ~~~

#### DOWNLOAD:
<a class="attachment" href="/uploads/default/original/3X/1/b/1b62045fbfd563f970e0c4c4039b688ebab9a20a.kmmacros">Toggle Show-Hide of Left Side Bar of Regex101.com.kmmacros</a> (3.9 KB)
**Note: This Macro was uploaded in a DISABLED state. You must enable before it can be triggered.**

---



![image|557x297](upload://gPcYIXt2uGLivRSK3TCa8Oe8neY.jpg)

---

### JavaScript to Toggle Show/Hide of Left Sidebar
```javascript
'use strict';
(function myMain() {      // this will auto-run when script is executed

/*

PURPOSE: Toggle Show/Hide of Regex101.com Left Sidebar
VER: 1.1 2018-08-02
AUTHOR: @JMichaelTX based on script by @CJK

*/
var kmVar = document.kmvar.VARNAME;
var scriptResults = "TBD"

  lsb=document.querySelector('nav[class=_2q2Gx]');   // left sidebar
  mrg=document.querySelector('div[class=fy8Gb]');    // main & right panel group
      
  if (lsb) {

  //------- LEFT SIDE BAR IS ENABLED ---------------

  lsb.style.display!=='' 
  ? (lsb.style.display='',mrg.style.left='270px')
  : (lsb.style.display='none',mrg.style.left='0px');


  } else {
    //------- LEFT SIDE BAR IS NOT ENABLED ---------------
    // shows a temporary slide-out of sidebar

    var menuElem = document.querySelector('div._3LSQH._3tCML');
    menuElem.click(); // open left side panel
  }

  scriptResults = "OK";

return scriptResults;
}  // END of function myMain()
)();

```

Questions?
1 Like
5

Hey CJK, and all JavaScripters:

Here's a tip/shortcut on specifying the CSS used in the querySelector method. You can just use tag.class, like this:

document.querySelector('div._1Eaxs').style.width='20%';

and, if you have multiple classes, like in this source HTML, you just join the classes with a period:

<div class="_2pcE6 _2tmCK">

this would be:

document.querySelector('div._2pcE6._2tmCK')
6

D'oh. I knew this, but it didn't occur to me at the time.