Message Window in JavaScript

Return to demos index page

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. 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

Here is the full code for how this works, if you want to try some simple JavaScripting. By the way, I am aware that the code blocks need to be fixed on this page. (working on it)

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

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.