Thursday, 6 June 2013

Create a Success Message using Dynamic Action - Second

You can extend this simple example by adding a counter to it and close it after the specified number of seconds:

var my_counter = 5;

var success_message = $('#P299_MESSAGE').val() + '<br/>' 
+ 'This message will close in ' + 
'<span id="my_sec">' + my_counter + '</span>' + ' seconds.';
$('.t10messages').empty();
$('.t10messages').append(<div class="t10success" style="display: none;">
</div>
');
$('.t10success').append(success_message);
$('.t10success').fadeIn(1000);

var time_in_seconds = setInterval(function() {

my_counter--;

$('#my_sec').empty();
$('#my_sec').append(my_counter);

if (my_counter == 0) {
    clearInterval(time_in_seconds);
    $('.t10success').fadeOut(1000);
    }
}, 1000);

Using jQuery this is quite easy to acomplish.


5 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Deneš,

    I think that your code will add additional div with class t10messages into div with class t10messages :)

    $('.t10messages').empty();
    $('.t10messages').append('<div class="t10messages">
    <div class="t10success" style="display: block;"></div></div>');
    $('.t10success').hide();
    $('.t10success').append(success_message);
    $('.t10success').fadeIn(1000);


    You can write this part shorter, e.g. :

    $('.t10messages').empty().append('<div class="t10success" style="display: none;"></div>');
    $('.t10success').append(success_message).fadeIn(1000);


    Br,
    Marko Goricki
    http://apexbyg.blogspot.com

    ReplyDelete
  3. Hello Marko,

    sure. I did the correction. Thanx.

    Denes

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. sure. I did the correction. Thank.

    ReplyDelete