Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we'll be creating beautiful and dynamic Nag Screen using Mootools.
The application of nag screen is widespread, it widely used by various websites to show important messages on the webpage. Some examples of such screens are :
- Update notices in wordpress
- Import address book message, which facebook shows
- Registration messages shown on various websites
So, considering such a wide use of nag screens I’ve tried to make them a little beautiful and flashy.
Just have a look at the demo to see the effect :
For capturing the scroll events I have used “ScrollSpy” developed by “David Walsh”. Thanks David for make such useful and easy to use plugin.
You can always access source of the webpage for its better understanding. To grab the source please download it here:
For further clarification and suggestions please drop comments.
Be sure to check out the jQuery version.
It does not work in Chrome, at all.
Can you please tell me your Chrome version..
It is working perfectly on 4.1
This nag screens that stick to the top of the window iritate me immensely, to a point I would shoot everyone that is using them, especially when you can’t close them (your [X] only returns to the top of the page…).
I hate how they eat away the screen height (especially now when they don’t even make 16:10 monitors but 16:9…) and how the whole text jumps when you scroll beyond the point when it sticks to the top. If you are reading something and the page suddenly jumps, it really disorentates you and after a while, it can make you really angry…
@Seekar
Thanks for pointing out these bugs, I have taken care of these issues in new jQuery version.
http://www.nitinh.com/2010/03/beautiful-nag-screen-using-jquery-css3/
Look really neat! Any chance to release jQuery version?
jQuery version is up with few improvements
http://www.nitinh.com/2010/03/beautiful-nag-screen-using-jquery-css3/
[...] Beautiful Nag Screen using Mootools & CSS3 [...]
Great tutorial, bookmarked on webdev5
Thanks mupet…..
[...] Nag Screen using JQuery & CSS3By nitin on March 16, 2010 Yesterday I wrote about a beautiful implementation for nag screen using mootools and CSS3. Thanks for all of my visitor for showing interest in [...]
Dude, this looks fantastic. I’m not a big mootools fan but since you also have a jquery version will definitely try it out!
[...] Beautiful Nag Screen using Mootools & CSS3 Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we’ll be creating beautiful and dynamic Nag Screen using Mootools. [...]
good source. thank you admin!
[...] Beautiful Nag Screen using Mootools & CSS3 Nagscreen : Messages on the webpage that reminds (or nags) the user to register, or show some notification. These messages appear on the webpage in a way to seek user attention. Here in this post we’ll be creating beautiful and dynamic Nag Screen using Mootools. [...]