CODEWITHSUNDEEP
javascripthtmlcss
Wingston Sharon
Wingston Sharon

Reputation: 1050

CSS TextArea - giving different opacity to each visible line

SO i have a textarea in my html

<textarea id="log" class="txtbx-log" rows="10"></textarea>

Now i'm using this to display a running log in real time. I would like the first line to be 100% opacity, and each further line's opacity reducing by 10.

is this possible to do with css/javascript?

i am aware of the possibility to make multiple divs and give each its own opacity, and move the position of the divs / opacity as new log messages come in.

but that would lead to ugly code to move the log messages from one div to the other. Is there an easier way to do this.

** EDIT **

as of now, i am simply prepending the log messages like this.

on_chunk_uploaded: function() {
                        $('#log').prepend("<span>Chunk finished uploading</span>")
}

Upvotes: 0

Views: 695

Answers (1)

SixteenStudio
SixteenStudio

Reputation: 1026

Instead of this...

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")
}

You could do it like this... (If you only have 10 messages shown per log as you stated?)

on_chunk_uploaded: function() {
    $('#log').prepend("<span>Chunk finished uploading</span>")

    // If there are now more than 10 log lines, remove the last one
    if($('#log span').length > 10){
        $('#log span:last').remove();
    }

    // Remove all classes from the log lines
    $('#log span').removeClass();
    var opacity = 100;

    // Cycle through each line and add decrementing opacity classes
    $.each($('#log span'), function(index, $element){
        $element.addClass('opacity-' + opacity);
        opacity = opacity - 10;
    });
}

Then add some appropriate CSS with opacity from opacity-100 to opacity 0... (untested!)

The CSS:

.opacity-100
{
   /* Opaque, doesn't need transparency... */
}
.opacity-90
{
   opacity: 0.9;
   filter:Alpha(opacity=90);
}
.opacity-80
{
   opacity: 0.8;
   filter:Alpha(opacity=80);
}
/* All the way down to 0... */

Note: Edited code as I accidently appended the opacity with . instead of + (PHP habits)

Upvotes: 2

Related Questions