Tip: Put unimportant things in the background

AppGini / AppGini Helper / Cascading Stylesheets (CSS) / Javascript (JS) / Webdevelopment

A great feature are the so-called badges, which show the number of records in child tables already in the headers of the tabs. However, the badges with value 0 are colored identically with badges that have a larger value. The eye can't immediately detect if there are records or not. With a little CSS+Javascript trick I move unimportant information into the background.

Problem

This is the initial situation: all badges look identical. There is no distinction between 0 and >0:

Final Result

And this is how it looks with the small change:

All badges with value 0 are discreetly moved into the background. The eye can more quickly grasp where detailed data is present and where not.

Code

This is not too hard if you know how to get and compare values. We need a function which finds badges having content = "0" and then change the appearance.

Javascript

// old version
// function myAutoChangeBadges() {
//    jQuery('.badge:contains("0")').addClass("badge-empty");
//}

// updated version 2024/12/12 JSE
function myAutoChangeBadges() {
    jQuery('.badge').each((i, span) => {
        jQuery(span).toggleClass("badge-empty", jQuery(span).text() == "0");
    });
}

Cascading Stylesheet (CSS)

.badge.badge-empty {
    opacity: 0.1;
}

There is one thing left: We need to call our function. But when? As you might know and remember, ChildrenTabs are being lazy-loaded. They are not present at the moment the page has loaded. Additionally, ChildrenTabs can be reloaded at runtime after insert, delete or modification or after pressing the refresh button.

So, we need to find a way for calling our function after load, but not too early, and after each reload of any ChildrenTab.

Fortunately, there are helper functions in AppGini Helper Javascript Library which do the hard work for us. AppGiniHelper.DV.ready() fires after ChildrenTabs have been initially loaded. And AppGiniHelper.DV.getChildrenTabs().onReload(...) fires each time we reload a tab.

If you like my contributions, I would appreciate a small one-time donation or even a small monthly contribution! With this you can give back some appreciation and support my work on this blog as well as on the AppGini Forum.

It also always helps me a little bit when you share posts on your social media.

Many thanks for your support.





Here is the complete code for hooks/header-extras.php:

<!-- file: hooks/header-extras.php -->
<style>
    .badge.badge-empty {
        opacity: 0.1;
    }
</style>
<script>
    // updated version 2024/12/17
    function myAutoChangeBadges() {
        jQuery('.badge').each((i, span) => {
            jQuery(span).toggleClass("badge-empty", jQuery(span).text() == "0");
        });
    }

    // old version
    // function myAutoChangeBadges() {
    //    jQuery('.badge:contains("0")').addClass("badge-empty");
    //}

    jQuery(function() {
        AppGiniHelper.DV.ready(function() {
            myAutoChangeBadges();
        });
        AppGiniHelper.DV.getChildrenTabs().onReload(function() {
            myAutoChangeBadges();
        });
    });
</script>

I hope you like it!

Do you like it?