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. The buttons below provide 2 usage examples. One preset, and one that will send the text from the form field. Go ahead and try it.
Further reading - Tutorial section
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.
The second part defines the look for the textarea
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.
The first part just defines some variables. The colors, for instance, are preset as strings. It's a way of making the colors usable in plain English rather than hexedecimal. You can change those hex values to anything you want, or add in new ones.
The main function simply takes the inpout and puts the parts where they belong. The bottom part of it sets the color for the DIV and the textarea. Next it sets the .bottom to 10px. Meaning 10px from the bottom. The very last thing it does is sets a timer to count for 3000 milliseconds (3 seconds). Once the timer runs down, it calls the function to move the window back to -130px (off the screen).
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.