QR Code Generator
Custom Banner Tutorial
Percentage of Year
Daily News Pick
Animated GIF Archive
Bitcoin Mining. Is it Worth it?
Twitter Bot Examples
Belial - band
For my own purposes, I often need to send a message to the user to let them know that something happened, but not be so intrusive. A little message window sliding up from the bottom corner of the page is something I've seen in common usage now. So I made one for myself.
It's not a complicated piece of code at all. It's just a couple of functions and a bunch of CSS. But it works exactly as intended. Drop the JS reference on the page, and use the function call: dp_sendMessage('This is a test',dp_pink)
Basically, you call the function, send in the message and the color. Go ahead and try it.
If you want to skip the tutorial you can just add this script to your page.
Or download it and put it on your own server.
Further reading / Tutorial
The program consists of 3 parts:
- HTML to create the window on the page
- CSS that defines how the window looks and behaves
In short, the window is always there. It's just hidden under the bottom of the screen. When it is invoked, it appears by sliding up.
The first chunk makes the window stick to the bottom and sizes it. It also defines the transition. This is a cool feature where once you define that transition, any changes you make to its appearance will animate automatically.
This is a simple DIV tag with a FORM with a TEXTAREA inside. There is literally no styling to it. That's what the above CSS is for.
That's all there is to it. You can copy/paste these chunks of code onto a new HTML page and it will work fine.