This library allows the page author the ability to creat miniature "windows" on their web pages. For lack of a better name, and to not confuse users or infringe on any other windowing system, I refer to them as Warts. You can place any normal HTML inside a wart, in fact, a wart is nothing more than a <DIV>!
Things to notice, when the page is scrolled, the wart resumes its position relative to the screen not the document, so it always stays accessible to the user. When the same warts are drawn across multiple pages, they remember their position and settings from the previous page, so changes the user makes are not reset everytime they navigate to a new page.
You wouldn't BELIEVE how easy it is for you to put this on your page! Follow along with the steps, choose from the various options, and add a wart to your web page!
Step 1: Get the file library
Download version .90 Sep 25 1997
Step 2: Insert it into your page
Place the following HTML in the <HEAD></HEAD> of your page, and make sure the src="" points to the URL for the library you just downloaded.
<SCRIPT SRC="warts.js"></SCRIPT>
Step 3: Create a wart in your page
Warts are created by using the <DIV> tag, which is basically just a container for other HTML. A good one to cut and paste would be:
<DIV
ID="mywart1"
WART="title:My Wart;title-color:yellow;"
STYLE="visibility:hidden;position:absolute;background:blue;top:100;left:200;height:300;width:200;overflow:hidden;border-style:solid;border-width:3;border-color:black;border-top-width:20;"
> Your content here, anything you want </DIV>
- ID
- Name the wart a unique name
- WART (name:value pairs seperated by semicolons)
- title:
- Name it a name that will fit in the bar, you might want to test it to make sure it isn't too large
- title-color:
- What color do you want the title bar at the to be? Use any normal HTML color
- title-font:
- Use any normal font style
- title-hidden:
- 1/0 Should the title be drawn at all?
- stuck:
- 1/0 Should the wart be stuck to the page when it is created?
- stuck-hidden:
- 1/0 Should the user be able to stick the wart to the page?
- minimized:
- 1/0 Should the wart be minimized?
- minimize-hidden:
- 1/0 Can the user minimize the wart?
- close-hidden:
- 1/0 Can the user close the wart?
- move-hidden:
- 1/0 Can the user move the wart around the page?
- STYLE (standard css attributes, the ones listed here are important to have)
- visibility:hidden
- This hides the wart until it is initialized by the library
- position:absolute
- This allows the wart to move anywhere on the page and sit above the document.
- background:blue
- border-color:black
- top:100
- left:200
- height:300
- width:200
- These are all modifiable settings by you to position and color the wart
- overflow:hidden
- Hides the overflow for the <DIV>
- border-style:solid
- border-width:3
- border-top-width:20
- Suggested settings for the border to make the wart appear correctly
Thats it! Put in as many as you want on your web page and as many web pages as you want!
Please feel free to modify the code, it is fully commented to help you lea how it works, and especially, PLEASE feel free to email me webdev@jeremie.com with your comments/questions/suggestions/bugs/code enhancements, whatever!
For the scripters out there, I made 2 public functions for the warts, open() and close(), so you can script in a document.all.mywart1.open(); and document.all.mywart1.close(); I will be trying to make the full WART="" availble for scripting similiar to the STYLE="" object, after IE4 final release that is.
Keep checking back for new versions, as I suspect I'll be updating this often!
- When there is only 1 wart, the title bar dissappears
- When scrolled partway through the document, moving a wart down quickly makes it flash/dissappear(gotta use .offsetParent)