Subtle badges in TabCaptions of ChildrenTabs

[jsetzer]

Hi, just want to share a small CSS+JS trick for badges in TabCaptions of Children Tabs:

All badges in ChildrenTabs tab headers have the same appearance, regardless of the number of records.

Default appearance

tabcaptions-badges-default.png (17.33 KiB) Viewed 2254 times

At first glance, the eye cannot distinguish which tab has records and which does not. I would like the tabs with 0 records to be displayed with less emphasis. Like this:

Slightly modified appearance

tabcaptions-badges-modified.png (17.41 KiB) Viewed 2254 times

Is it the same for you? For me, it helps me to see more quickly which tab contains records. Just compare those two screenshots above. Somehow, my eyes automatically focus on the 4th tab in second screenshot.


Actually, not that much code is required:

Code: Select all

<!-- file: hooks/header-extras.php -->
<style>
    .badge.badge-empty {
        opacity: 0.1;
    }
</style>
<script>
    function myAutoChangeBadges() {
        jQuery('.badge:contains("0")').addClass("badge-empty");
    }
</script>

But there is one obstacle:
Because the ChildrenTabs are loaded dynamically (lazy loaded) and because the tab contents are reloaded after insertion or deletion or after refresh, the code must be executed (a) at the beginning and (b) after a change.

You can use javascript's setinterval()-function (see here: https://www.w3schools.com/jsref/met_win_setinterval.asp) for periodically executing the function.

Or, if you are user of AppGini Helper Javascript Library (* commercial, I am the author), you can make use of two very useful events, prodived by our library:

Code

Code: Select all

// file: hooks/TABLENAME-dv.js

AppGiniHelper.DV.ready(function() {
    myAutoChangeBadges();
});
        
AppGiniHelper.DV.getChildrenTabs().onReload(function() {
    myAutoChangeBadges();
});

See full article in my blog:
https://appgini.bizzworxx.de/appgini/ti ... ackground/

I hope you like it!