jQuery Notify Demo

Use the buttons below to test the various ways you can call up a notification. The demo's I've laid out for you are in their most basic forms, the sky is really the limit when it comes to implementation!

Here's how you would call jQuery Notify - $.notify(options object, duration);

If you'd like any help implementing jQuery Notify please feel free to post a comment or email me -

Inline HTML

$('#inline_html').click(function(){
    $.notify({
        inline: true,
        html: '<h3>This is inline</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>'
    }, 3000)
})

Test Inline HTML - Try clicking me a few times!

Inpage HTML - this uses a hidden <div> on this page

$('#inpage_html').click(function(){
    $.notify({
        inline: true,
        href: '#inpage_test'
    }, 3000)
})

Test Inpage HTML

Offsite HTML - this grabs an image from another site

$('#offsite_html').click(function(){
    $.notify({
        inline: false,
        href: 'http://dribbble.com/system/users/5227/screenshots/298369/hello_chicago_teaser.jpg?1319158366'
    }, 3000)
})

Test Offsite HTML

Callback Functions - there are 4 in total!

$('#callback_test').click(function(){
    $.notify({
        inline: true,
        html: '<h3>This is inline</h3><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<p>',
        onStart: function(){ alert('This is onStart()!') },
        onComplete: function(){ alert('This is onComplete()!') },
        onCleanup: function(){ alert('This is onCleanup()!') },
        onClosed: function(){ alert('This is onClosed()!') }
    }, 3000)
})

Test Callback Functions

Close Button - use your own HTML for the close button

$('#close_test').click(function(){
    $.notify({
        inline: true,
        href: '#inpage_test',
        close: '<a href="#">Close Notification</a>'
    })
})

Test Close Link