Message Window in JavaScript

Return to demos index page

Share on Facebook Tweet about this on Twitter Share on Google+ Share on StumbleUpon Share on LinkedIn Share on Reddit pinterest Email this to someone

The purpose for this demo is to replace JavaScript alerts. Those things are still useful, sure. But they annoy people. And in many cases the browser gets annoyed too and offers the user, "Should I not allow this?"

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

Here is the full code for how this works, if you want to try some simple JavaScript.

The program consists of 3 parts:

  • HTML to create the window on the page
  • CSS that defines how the window looks and behaves
  • JavaScript that responds to the function call and makes the window visible.

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 CSS:

<style> .dp_messageWindow{ position:fixed; left:10px; background: #dbf2ff; height: auto; width: auto; min-height: 100px; min-width:200px; font-family: arial; border-radius: 10px; padding: 0px 10px 5px 10px; z-index: 1000; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; bottom:-130px; } .dp_messageWindow textarea{ border:0; margin: 10px 0 0 0; font-family: arial; background: #dbf2ff; height: auto; width: auto; min-height: 100px; min-width:200px; } </style>

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

The HTML:

<div id="dp_messageWindow" class="dp_messageWindow" > <form name="dp_messageForm" name="dp_messageForm" action="" method=""> <textarea id="dp_finalMessage">Message will appear here</textarea> </form> </div>

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 important parts of this are to define the ID and the Class for each part. That is how the CSS and JavaScript talk to the HTML objects.

The JavaScript:

<script> //Define a few things that will be needed later var dp_messageWindow = document.getElementById("dp_messageWindow").style; var dp_pink = '#ffd0db'; var dp_blue = '#dbf2ff'; var dp_green = '#c8e6d4'; //Set the object for the message box, and set the value for that object. //While in here, also set the color. //Lastly, invoke a timeout so that the window slides away after 3 seconds. function dp_sendMessage(messageIn,color){ dp_finalMessage = document.getElementById("dp_finalMessage"); dp_finalMessage.value = messageIn; document.getElementById("dp_messageWindow").style.background = '' + color; dp_finalMessage.style.background = color; dp_messageWindow.bottom= '10px'; setTimeout(dp_closeMessage, 3000); } function dp_closeMessage() { dp_messageWindow.bottom= '-130px'; } </script>

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.


bottom corner