The animations where created originally by Daniel Eden.
There are 4 types of notifications i have used: Top, Center, Bottom Center, Bottom Right.
This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.
HTMLEverything will stay inside "notifications" element.
"notifications-window" is the element that hold the two drop downs, the position of the notification and the effects used. Because there are many effects i won't include them all here but you will find them in the demo or download.
The same can be said for Center, Bottom Center and Bottom Right notifications. They will not show up in HTML but they will be appended using jquery.
CSSThere are two main CSS files linked in the document. The first one is animate.css which stores the actual animation classes. The second CSS file attached is animated-notifications.css, this contains the CSS code for this tutorial. If you only want to use a particular effect you will have to go and find the CSS class with the name of the desired effect inside animate.css. In order for the notifications to properly be aligned. I have created a separate div to hold the background and it will freely float inside “notifications” div which is the master div element.
The two select drop downs and the select button are hosted inside “#notifications-window”. The position of this div is absolute and is centered using the absolute position with 50% from left and the left margin set to -352px because the total div width is 700px + (2 x 2px ) because of the borders on each side. Regarding the rest of the css styles for this sections i am going to leave you at this because there is nothing special and i don’t want to bother you. So let’s move on to bigger and better things.
The same goes for the rest of the CSS, nothing special here just the fact that all notifications div elements have the position set to absolute.
Next we have to create a universal function that will be applied each time the close button is clicked.
The HTML for each notification is written inside each variable that corresponds to each notification.
The last thing we have to do is to insert each notification when the appropriate effect is selected. All if statements will become active only when the “#notifications-window-row-button” is clicked. After the submit button is clicked depending on which position has been chosen, the appropriate statement will be activated. If the ‘top’ position is selected we will see this by checking the value inside the select field. We always have to remove the old content before proceeding to append the new content. I say new content because depending on which effect is selected we will have to add the appropriate class, by doing this we change the html content so we can say there is a new and an old content. The notification is inserted together with the appropriate animation class. After adding the class the only thing left to do is summoning the refresh_close() class once again so that the close button for each notification will work with the new content. The top and center notification work by appending the HTML inside the master div “#notifications” meanwhile the bottom and bottom right notifications work by changing the content inside “#notifications-bottom-center” and “#notifications-bottom-right”, big difference here.