Tweet

Documentation

Set-up

			
<script src="js/infotop.js"></script>
<link href="css/infotop.css" rel="stylesheet">

<div id="infotop" class="infotop">
<div class="infotop-close" onClick="infoTopClose();"></div>
<div></div>
</div>
			
		 

How to use

		 
infoTop('Text to display', options);
infoTopAppend('Text to append', options);
infoTopClose();
		 

Code examples

The simplest way to display a message

		 
infoTop('Hi there!');
		 

Run


Don't hide message until closed

		 
infoTop('Close this notification manually', 
	{
		fadeout_delay: 0,
		display_delay: 0
	});
		 

Run


Add text to a message: first, display the message

infoTop('Now click <b>Add text</b>',
	{
		fadeout_delay: 0,
		display_delay: 0
	});
	

Then add text

infoTopAppend('<div>Text added</div>');
	

Display message Add text


Styling

		 
infoTop('You can customize the style of your notifications', 
				{
					fadeout_delay: 0,
					display_delay: 0,
					width: "400px",
					max-width: "70%",
					border: "1px solid #098CE3",
					background: "#52BAFF",
					color: "#FFFFFF"
				});
		 

Run


Play with fadein_delay, fadeout_delay, display_delay options

		 
infoTop('You can control for how long the message is displayed', 
	{
		fadein_delay: 100,
		fadeout_delay: 700,
		display_delay: 1000
	});
		 

Run

Options

Possible options and their defaults for infoTop(); function

{
  // message container ID
  id: "infotop",
  
  // duration of the 'fade-in' transition effect, ms
  fadein_delay: 300,
  
  // duration of the 'fade-out' transition effect, ms
  fadeout_delay: 2000,
  
  // for how long to show the message, ms
  display_delay: 1000,
  
  // message container width
  width: "320px",
  
  // message container maximum width
  max_width: "90%",
  
  // message container border style
  border: "1px solid #FFB41E",
  
  // message background color
  background: "#FFE88D",
  
  // message text color
  color: "#000000"  
  
}

Possible options and their defaults for infoTopAppend(); function

{
  // message container ID
  id: "infotop",
  
  // duration of the 'fade-out' transition effect, ms
  fadeout_delay: 2000,
  
  // for how long to show the message, ms
  display_delay: 1000

}