JWS Docs / Split Screen Browser Tabs

Split Screen Browser Tabs

As you work your way through our website tutorial you'll probably find that its much easier to follow along if you have both the tutorial and your GitHub open together side by side, rather than in separate browser tabs. As having to switch back and forth can make keeping your place on the tutorial page a bit of a pain.

Now you may think well that's simple enough to fix as you can just open them in separate windows and then minimise/resize them until they fit side by side. But for those who are using the Microsoft Edge or Google Chrome browser there's a much simpler solution, with the help of their built in split screen function!

Opening a split screen with Edge

To access Edge's split screen can be done in a few ways.

1.  Click on the settings icon ... at the top righthand corner of your browser screen then select  Split screen this will then open a second browser tab beside the first one.

Then you can type in a second URL either in the  Search or enter web address box in the new tab.

Or in the browser windows address bar click on Search or enter web address just next to your first URL. Then press return and the second website will open in the new tab.

2.  Add the Split screen icon to your browsers taskbar by clicking on the settings icon ... at the top righthand corner of your browser screen then select  Settings then  Appearance

Now scroll down the page to the Select which buttons to show on the toolbar: panel here click the  Split screen button toggle to the on position, it should now be blue with a white dot to the right.

You should also see the Split screen icon appear to the right of the address bar, this shortcut icon will now be there each time you open a new window or tab and when you click on it your tab window will change to a split screen with two tabs ready to use, the icon will also change to active split screen icon.

3.  If you have a link in a page you want to open another webpage or website in a split screen. Then right click on the link and select Open link in split screen window

What Split screen option?

If you find that you don't have the Split screen option either in your settings list or when you right click on a link your browser may have the Split screen option disabled.

To enable it go to settings icon ... at the top righthand corner of your browser screen then select  Settings then  Appearance

Now scroll down the page to the "Customise browser section" and the Split screen panel

Here click the Enable Split screen toggle to the on position, it should now be blue with a white dot to the right

Also a blue  Restart should have appeared below it. Click this to restart and enable your customised browser (though make sure you don't have anything open in your browser that needs saving first).

You should now be able to follow the above opening options without any problems.

Plus you now have in the  Split screen panel the option to further Configure split screen

If you click on the > icon an Enable split screen panel will open. Here you can choose to Link tabs by toggling the button to the on position. This will now allow you to click links in the left side tab and they open in the right side tab automatically.

But which is my active tab?

When you have two tabs open like this you can see which is the active one either from what the tab description says at the top of your browser window, or the active screen will be highlighted by a thin blue border around it. Also under the tab description there will be a highlighted border either to the left or right half of the tab depending which side is active.

Closing a split screen

Whichever side you wish to close if you mouse over the top righthand corner of the tab window a will appear which when clicked on will shut that tab window and the split screen.

Opening a split screen with Chrome

To access Chrome's split screen can also be done in a few different ways too.

1.  To open a link in a split window tab, select + hold the link then drag + drop it either to the left or right side of your screen. As you drag the link to either side a second window within your current tab will appear.

If your Drag and Drop setting isn't active, then you need to click on the icon in the top right corner then select  Settings then  Appearance and activate the Allow split view drag-and-drop on left or right edge of window option.

2.  Right click on the browser tab and select  Add tab to new split view

3.  Right click on a link and select  Open link in split view

But which is my active tab?

When you have two tabs open like this, you can see which is the active one by how the tab toolbar icon looks, as the side that is active will be a solid colour like this .

Also in the bottom right hand corner of the active tab window there is a  Arrange split view option icon. The none active window also has this icon along with the webpages favicon and URL.

Plus the edge of the active screen will be highlighted by a slightly bolder border around it.

Closing a split screen

Whichever side you wish to close you can either, click on the relevant close icon in the tab at the top of the browser window. Or click on the  Arrange split view option icon in the bottom right corner of the tab window you wish to close and select the  Close this view option.