Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

PNotify Core




(Click through to things underneath the notice.)

DOM Element Notice

I'm a notice with a DOM element in it.
Of course it is.
The DOM element is inserted into the notice, so it will be ripped out of the DOM if it is already somewhere else.
window.showRich = function showRich() { PNotify.notice({ title: 'Rich Content Notice', titleTrusted: true, text: 'Look at my beautiful strong, emphasized, and large text.', textTrusted: true, maxTextHeight: null }); }; window.dynNotice = function dynNotice() { let percent = 0; const notice = PNotify.info({ text: 'Please Wait', icon: 'fas fa-spinner fa-pulse', hide: false, shadow: false, width: '200px', closer: false, sticker: false }); notice.on('pnotify:afterOpen', () => { setTimeout(() => { notice.update({ title: false }); const interval = setInterval(() => { percent += 2; const options = { text: percent + '% complete.' }; if (percent === 80) { options.title = 'Almost There'; } if (percent >= 100) { window.clearInterval( interval); options.title = 'Done!'; options.type = 'success'; options.hide = true; options.icon = 'fas fa-check'; options.shadow = true; options.width = PNotify .defaults.width; options.closer = true; options.sticker = true; } notice.update(options); }, 120); }, 2000); }); };
Lifecycle Events
Manipulate the notice during its lifecycle.
window.fakeLoad = function fakeLoad() { let curValue = 1; let progress; // Make a loader. const notice = PNotify.notice({ title: 'Creating series of tubes', text: '
\n' + '
\n' + '', textTrusted: true, icon: 'fas fa-cog fa-spin', hide: false, destroy: true, closer: false, sticker: false }); notice.on('pnotify:afterOpen', () => { progress = notice.refs.elem.querySelector( '.progress-bar'); progress.style.width = curValue + '%'; progress.attributes['aria-valuenow'].value = curValue; // Pretend to do something. let plus = 1; const timer = setInterval(() => { if (curValue === 70) { plus = 0.25; notice.update({ title: 'Aligning discrete worms', icon: 'fas fa-circle-notch fa-spin' }); } if (curValue === 80) { notice.update({ title: 'Connecting end points', icon: 'fas fa-sync fa-spin' }); } if (curValue === 90) { notice.update({ title: 'Dividing and conquering', icon: 'fas fa-spinner fa-pulse' }); } if (curValue >= 100) { // Clean up the interval. window.clearInterval(timer); notice.close(); return; } curValue += plus; progress.style.width = curValue + '%'; progress.attributes['aria-valuenow'].value = curValue; }, 65); }); };