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

I'm learning some stuff on a website, the default three columns' display isn't the best for me. So I just manually drag the border of the left column to a new one:

Old ▼

New ▼

After dragging and dragging... just felt get a little bit tired... and now I'm using KM to do it for me and it works fine ▼

But I was wondering is there better way to get it done.
Then I went to inspect view and got the related position info :point_right: style="position: absolute; top: 0%; right: 53.4375%; bottom: 0%; left: 0%;" :point_down:t4:

Then I have no idea what to do after that... :rofl:

Any ideas and suggestions are welcomed ~

Hi @Alice_Shi,

Assuming that whichever web browser you're using permits the execution of JavaScript, you can use an Execute JavaScript in Front Browser action to adjust the border positions of the three panels.

There are two borders that move: the one joining the right edge of the first panel to the left edge of the second panel; and the one joining the right edge of the second panel to the left edge of the third panel. (I'm assuming the leftmost and rightmost borders will remain fixed at the edge of the browser window).

The horizontal positions of these two borders are going to be expressed as a percentage of the browser window's width as measured from the leftmost edge of the browser window. Thus, if we say that the first border is positioned at 50%, this means that it's exactly in the centre of the page; and if we say that the second border is positioned at 80%, then there's four times as much space to its left as there is to its right, i.e. it's 80% of the way across the page, with a 20% margin on the right.

At these positions, the three panels would occupy 50%, 30%, and 20% of the page width respectively.


Bearing all that in mind, all you really need to decide is how much space you want each panel to take up, and translate that into two numbers that represent the horizontal percentage-positions of the two borders.

Those two numbers are on the first line of the JavaScript below, which you can set to whatever you wish (between 0 and 100, keeping the first value less than the second value). I've chosen to set the borders at 25% and 65%, and have thus entered 25 and 65 as the values that make up the variable margins:

margins=[25, 65];

divs=Array.from(document.querySelectorAll('div[id^="discovery-resize-"]'));

leftDiv=divs.filter(x=>(x.style.left=="0%"))[0];
rightDiv=divs.filter(x=>(x.style.right=="0%"))[0];
middleDiv=divs.filter(x=>(x.style.left!="0%" && x.style.right!="0%"))[0];

leftDiv.style.right=(100-margins[0]).toString()+"%";
rightDiv.style.left=margins[1].toString()+"%";
middleDiv.style.left=margins[0].toString()+"%";
middleDiv.style.right=(100-margins[1]).toString()+"%";
3 Likes

@CJK Wow, That's cool! Just another seduce to push me getting the hang of Javascript. Thanks for the explicit explanation.

@CJK, outstanding detective work and solution! :+1:

I didn't see a URL posted anywhere. How did you figure this out without access to the actual web page?

The final screenshot captured the address bar of the web browser. Just to see how much effort might be involved, I went to the home page and created a dummy account that thankfully needed no email verification or that's where I would have stopped. But as it led me straight to the introductory course material, I picked a course, and it was precisely where I needed to be.

To be honest, that's probably the upper-limit of self-motivated effort I'd consider applying before choosing whether to ask for more details or to move on to something more fun.

@CJK Oh... I just don't know what to say.. Thank you sooo much!

And maybe it would be helpful if I'd posted out the source code (html, css, Javascript)?

As a rule-of-thumb, yes x 1000. But you were serendipitous with that screenshot that led me to where I needed to be quite quickly.

Regardless, I'm glad I was able to help.

@CJK May I ask another question: I want to switch between the two layouts, but how can I switch between margins=[38, 63] and margins=[68, 98] using action:If Then Else [Keyboard Maestro Wiki] ?

@CJK Oh, I've found a way to do it! Using @JMichaelTX 's method in a previous post Request: Provide a Way Test for Existence of a Link or XPath in a Web Page - Questions & Suggestions - Keyboard Maestro Discourse

I'm so happy! :grinning:

4 Likes

Very good! Excellent adaptation of my method for your purpose. :+1: