adwords marketing   adwords marketing
 

Dan Smith
 
imarketingtool.com
Internet Marketing Tools
for your website.
 


imarketingtool.com

Internet Marketing Tools for your website.

Contact Me

Site Map

Copyright 2024 All Rights Reserved

Resources

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,

.allowDrag .backgroundImage
.closeButton .cssClass
.divID .finalLeft
.finalTop .html
.name .left
.padding .top


Generated Code
 
adwords marketing   adwords marketing