Jump to content

Recommended Posts

Posted (edited)
On 5/24/2025 at 5:18 PM, AstroSkipper said:

Mypal 68.14.8b - Tab bar with multiple lines (the number of lines can be preset by the user) which is automatically hidden if only one tab is present:

Mypal-68-14-8b-Tab-bar-modifications.gif

The animation above is based on two implementations I use in combination. A CSS stylesheet from Aris-T2 for a tab bar with multiple lines, adapted to my needs, and an UC.JS script I created from scratch for hiding automatically the tab bar if only one tab is present. This UC.JS script is unique, written by me in pure JavaScript and contains a new method I developed to automatically hide the tab bar with only one tab completely, i.e. neither an empty space nor the new tab button remain. :) This new code works much better than all existing solutions you can find elsewhere. It does its job in all possible cases and doesn't need additional CSS code. There are also pure CSS solutions available from different sources in the World Wide Web but in some cases, they unfortunately either fail or do not work anymore. In contrast, my method is extremely compatible to all existing modifications inside Mypal 68, which could be made by the user, and really hides the tab bar in case of only one existing tab as it is shown in the animation above.

My knowledge of JavaScript and CSS, which I have acquired and deepened over the last months on an autodidactic basis, seems to be bearing fruit without end when it comes to scripts. I'm as proud as Oskar (German saying). superouais.gif Especially considering that I am not a programmer by nature. :P

Edited by AstroSkipper
Update of content

Posted (edited)

Hide Tab Bar If Only One Tab - A UC.JS script for hiding the tab bar if only one tab is present and positioning the new tab button before the search bar

As part of my JavaScript and CSS studies 0ordi.gif, I have been working on hiding the tab bar in Mypal 68 when only one tab is open in the browser, purely for practice purposes. For this endeavor, I was able to develop a number of solutions based on different methods:

  1. A purely CSS-based method (variant 1)
  2. A purely CSS-based method (variant 2)
  3. A purely JavaScript-based method using a mutation event
  4. A purely JavaScript-based method using a mutation observer (variant 1)
  5. A purely JavaScript-based method using a mutation observer (variant 2)
  6. A JavaScript-based method with embedded CSS (variant 1)
  7. A JavaScript-based method with embedded CSS (variant 2)

I will present the result of my work here today in the form of method 6. Although all methods have their right to exist and conserve resources, methods 1, 2, 6 and 7 are by nature the least taxing on the processor. So, why a JavaScript-based method with embedded CSS instead of a purely CSS-based one? :dubbio: The answer is easy. The purely CSS-based method works fine when it comes to hiding the tab bar in Mypal 68 when only one tab exists but the new tab button is then no longer visible. If you don't need this button, the purely CSS-based method is completely sufficient. But if not, you will miss this button to quickly open new tabs. That's why I created this JavaScript-based method with embedded CSS. Alternatively, when using CSS only, the user first has to manually move the new tab button to a desired location if needed. BTW, there are different CSS code snippets available for hiding the tab bar in the World Wide Web but a lot of them do not work properly in Mypal 68.14.8b. That's why I created my own code, and this as minimal as possible. My HideTabBarIfOnlyOneTabCSS-5.0.uc.js script performs the following actions. First, it positions the new tab button before the search bar. The target position for the new tab button can of course be changed by the user and requires only minimal JavaScript knowledge. Then, it hides the tab bar if only one tab is present. Additionally, this script sets a min-height adjustable by the user for the tabs depending on the density setting currently selected. BTW, all methods have been deeply tested by me and are working in Mypal 68.14.8b. I developed them with my favoured Alice0775 script loading method but they are also working with other methods, such as the Xiaoxiaoflood script loading method. Due to the permanent changes especially regarding CSS made by Mozilla and by @feodor2 who follows their guide lines, this code will definitely break one day. When this happens, I will provide another one of my solutions which will most probably also work in future releases of Mypal 68. Of course, only if there is a recognisable interest. smilie_denk_24.gif Here is a short animation showing my script in action:

Mypal-68-14-8b-Hide-the-tab-bar-if-only-

This script is aimed at users who only open a few tabs or even only use a single tab. In the latter case, more space is available for the web content when the tab bar is hidden. However, for tab hoarders or tab collectors, this script will be of no use. :P

And here is the download link for my HideTabBarIfOnlyOneTabCSS-5.0.uc.js script: https://www.mediafire.com/file/82ex3oierj09mt1/HideTabBarIfOnlyOneTabCSS-5.0.uc.js/file

BTW, my other script HideTabbarWithOneTab.uc.js from August 2024 is now obsolete. It does not work in Mypal 68.14.8b and can only be used in older releases, such as Mypal 68.14.4b.

Greetings, AstroSkipper matrix.gif

Edited by AstroSkipper
Update of content

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...