|
|
Internet Marketing Resources
PostIt Popup
There is an example of the PostIt popup on this page. It's the yellow note you see moving across the page. The PostIt Popup offers the following distinct advantages...
- It's a DHTML popup that cannot be blocked by a popup blocker.
- The code is object oriented and encapsulated, so you can have more than one popup on a single page.
- It's draggable, so click on it and hold down the mouse button and drag.
So even if you have a DHTML Popup, you might want to consider changing so that you can have multiple popups on a page.
To install the Popup, start by downloading the zip file. The zip contains the necessary files to install the PostIt Popup Note. Simply copy these files to the same folder where your page is. The files are...
| filename |
description |
| PostIt.js |
the main javascript file containing the PostIt note engine |
| PostItYellow.gif |
grahics file for the yellow note with red push pin image |
| jquery-1.5.1.min |
necessary JQuery file |
| jquery-ui-1.8.11.custom.min.js |
necessary JQuery file |
Next, you want add the code to call the Popup to your page. Generate a popup using the form below to see the necessary javascript code.
Notice how there is "left", "backgroundImage" and "html" property? These properties allow you to control the Popup. For instance, the "html" property contains the text that will display on the Popup. There are several properties that you can configure. The table below describes them.
| property |
data type |
default value |
description |
| .allowDrag |
boolean |
true |
Allows or forbids dragging |
| .backgroundImage |
string |
images/ postit.gif |
The graphic file to apply to the popup |
| .closeButton |
boolean |
true |
Shows or hides the "X" to close the Popup |
| .cssClass |
string |
null |
Applies a CSS class to the entire Popup |
| .divID |
string |
null |
The ID of your own DIV element to use as content. This is very useful if you have a complex message (like a form to post) that you want in the Popup. If you supply the .divID, the .html property will have no effect. |
| .finalLeft |
number |
window center |
The ending x coordinate in pixels where the Popup will come to rest. If not equal to the .left property, the Popup will slowly move from .left to .finalLeft |
| .finalTop |
number |
window center |
The ending y coordinate in pixels where the Popup will come to rest. See .finalLeft |
| .html |
string |
... |
Html message of the popup. Not used if .divID is supplied |
| .name |
string |
PostIt |
The name of the Popup. Only useful when debugging. |
| .left |
number |
window center |
The starting x coordinate in pixels of the Popup. If not equal to the .finalLeft property, the Popup will slowly move from .left to .finalLeft |
| .padding |
number |
30 |
Number of pixels of padding. Supplies a margin show that your message will remain inside the graphic. |
| .top |
number |
window center |
the starting y coordinate in pixels of the Popup. See .left property. |
Here is your chance to add another popup to this page. Configure the options below. When you submit the form, the new Popup will appear on the page. Plus it will generate the code so that you can use the popup on your own page,
|