Panel Header Pulsation Animation Background

[sky-t]

Hi there,

i want to add a class to panel header to make the header blinking like that

Code:

        .headerClsPulseRed {
            animation-name: backgroundcolor-pulsate;
            animation-duration: 2s;
            animation-iteration-count: infinite;
        }

after adding (and blinking header) i also want to remove the blinking header.


How can i achieve this??

[jarry]

You can set the 'headerCls' property value to add custom class to the panel header.

Code:

$('#p').panel({
  headerCls: 'headerClsPulseRed'
})

[sky-t]

Hi jarry,

thank you for your answer.

When using your solution the header is pulsating - but the panel can't be moved anymore when set the headerCls.

Also i need to remove this pulsating class. When use

Code:

                window.top.$('#window_' + windowId).panel({
                    headerCls: ''
                });

the class is already there.


So what can we do to avoid this?


Thanks

[jarry]

Retrieve the panel header first, and then add or remove class for it.

Code:

var h = $('#p').panel('header');
h.addClass('headerClsPulseRed');
h.removeClass('headerClsPulseRed');

[sky-t]

WOW jarry,


this works AWESOME!!!!


Thank you so much!!!!