Download Versions 0.1

(You'll also need to download jQuery found at jQuery.org.)

What is Pop Down?

Popdown is a light-weight, easy to use library that allows you to add notifications to your webpages with javascript.

Examples

Try it youself! Click the examples below.

How to use

Step Zero

If you haven't already, download jQuery from here and download popdown from the top of this page.

Step One

After downloading the both jquery and popdown, place references to them in the head tag of your web pages like so:

	<head>
	...
	<script type="text/javascript" src="jquery/jquery.js"></script>
	<script type="text/javascript" src="popDown/popdown.js"></script>
	...
	</head>

Step Two

Place a div element with an "id" attibute right before the end of the body tag. This is important because otherwise the popdown will appear or inside of other elements. The example uses "someID" for the id attribute, but you can use whatever you want. 

	...
	<div id="someID"></div>
	</body>

Step Three

Style your div element. You can add whatever styles you like, but make sure to set the "display" attribute to "none".

	<div id="someID"style="display:none"></div>

Step 4

Use PopDown's built in functions to change the content of your div and make it appear and disappear. You can have them react to user event such as button clicks, or, if you're a bit more javascript savvy, you may want to have them appear automatically by automatically scanning rss feeds. The functions are described in greater depth in the following section. 

	<div id="someID"style="display:none"></div>

PopDown Functions

There are four functions in popdown: pdClear, pdAdd, pdShow, and pdHide. Their names should be pretty self explanatory. I think it's best to set up another functon that used them in the order, but feel free to mix and match at your leisure.

  • pdClear(string element)
  • pdAdd(string element, string content)
  • pdShow(string element [,string position="top|bottom", string effect="slide", int delay=0])
  • pdHide(string element [, string effect="fade", int delay=0])

Function Parameters

  • element - id of element to be maniputated (show, hidden, etc.)
  • content - content to be added to element
  • position - position where element is to appear. can be set to "top" or "bottom".
  • effect - effect used when showing/hiding element. Can be set to "slide", "fade", or "normal"
  • delay - number of milliseconds before an element is shown or hidden. Setting this to 0 shows or hides it immediately.

Tips

  • When placing notifications at the top of a page, style it so that it has no top or side borders.
  • When placing notifications at the bottom of a page, style it so that it has no bottom or side borders.
  • You can preload you pop up with content at runtime that will remain unchanged. This is useful if you have an element, such as a corporate logo, that you want to always appear in your popups.
  • There is no practical limit to the number of popdowns you can have on one page. (Just becareful that they don't all pop up at once!)
  • Avoid calling a popdown while it's still visible.
  • Only add text dynamically. Other types of content should preloaded or added before the popdown is revealed as they may take too long to load.