Progress bars

[Moh Youba]

Hello

I am looking for the way to create a progress bar inside a column. Is that possible.

level_mark.jpg (12.77 KiB) Viewed 4339 times

Thank you

[pbottcher]

Hi,

yes you can

add something like

Code: Select all

.addClass('progress-bar progress-bar-warning').attr({'role':"progressbar"}).css({"width": width}) 

to your table column where you calculate the width according to your definition.

[Moh Youba]

Hello
Thank you for your reply, I am going to try it.

Regards,

[SkayyHH]

that is very cool. where exactly does the code have to be inserted?

[landinialejandro]

use this code inside your tablename-tv.js

Code: Select all

$j(function () {
    const max = 300;
    $j("td.tablename-fieldname").each(function () {
        var obj = $j(this);
        obj.css({position:"relative"});
        obj.children('a').css({position:"absolute","z-index":"1"});
        var value = obj.text();
        var rel = value / max;
        var w = obj.width();
        var h = obj.height();
        var $container = $j("<div/>", {
            "style": "border:1px solid #d3d3d3; position:absolute; top:3px; left:3px; z-index:0;"
        }).width(w).height(h);
        var $bar = $j("<div/>",{class:"bg-info"}).width(rel*100+"%").height("100%");
        obj.append($container.append($bar))
    });
});

[SkayyHH]

Thank you so much. It works fantastic

Kai

[SkayyHH]

Can you maybe tell me how I can adjust the height of the bar?

Thanks again, Kai

[landinialejandro]

Can you maybe tell me how I can adjust the height of the bar?

Thanks again, Kai

hi! this example get de height of container in
var h = obj.height();
there you can put your own value.

[SkayyHH]

Hi, Thanks much!!

I tried this before.

But then the bar disappears completely. I guess I got that wrong. I have tried:

Code: Select all

       var h = obj.height (10px); and
       var h = obj.height (100%);

But unfortunately it doesn't work for me.

[landinialejandro]

Hi, Thanks much!!

I tried this before.

But then the bar disappears completely. I guess I got that wrong. I have tried:

Code: Select all

       var h = obj.height (10px); and
       var h = obj.height (100%);

But unfortunately it doesn't work for me.

the obj.height() function only return the container object define in var obj = $j(this);
only put a value
var h = "20px";
or
var h = "100%";
in this case yo need to re-define :
top:3px; left:3px ---> top:0px; left:0px
the bar is floating inside the td container, if you exceed the height the view is bad. so, 100% and obj.height() must be the max value to be get. without change the td container.

[Moh Youba]

Hello

Thank you very much, works as a charm for me

progress_bar.jpg (35.51 KiB) Viewed 4210 times

Regards,

[SkayyHH]

This is exactly what i was looking for. Thank you very much!

Kai