Documentation

Updates

Version 0.8:
- Add Feature: Opening Effects
- Some small fixed and Code improvements
- Fixed some Issue with quirksmode in Internet Explorer of course ^^°
- Try to minized the Code
- Change some function names for a better overview

Version 0.72:
- Add VideoPortal Support for Putfile.com, SevenLoad.com and MegaVideo.com (Request from E-tRoN) - Fix CodeStyle for new JsLint Version.

Version 0.71:
- Small Bug fixes

Version 0.7:
- Better Filehandling
- Add Feature to display Flashfiles with Fallback
- Add Feature to display Content from a DIV
- Add Feature to stop scrolling while winDIV is displayed
- Add VideoPortal Support for Veoh.com
- Better Ajax Handling
- Fix some Issue with Internet Explorer 6 and Object TAG
- Fix Fullscreen for VideoPortals
- Rewrite some Parts of the Code

Version 0.6:
- Add Feature to hide Elements like Iframe, Objects, Flash and other thinks
- Add Feature VideoPortal Support (e.g: YouTube.com, Video.Google.com, ClipFish.com and myVideo.com)
- Add Feature Ajax Support for Interactions with the Window
- Coder Overworking and small Fixes for Internet Explorer 6

Because of the new Feature the new Version is a little bit bigger, when you dont need these feature you can also use the Version 0.5

Version 0.5:
- Fix bug with re sizing Images
- Add Feature automatic Scaling
- Error Handling
- Optimize Template
- Add Feature to disable the Background
- Add Feature to disable the CloseButton
- Add Feature to disable the Infobar
- Changed Namespace
- Fix Resize Event that fire without resize.... bad Internet Explorer Bug... :(

This Version is not compatible with Version 0.4 and lower.

Version 0.4:
- Add Hotkey Handling for Firefox, Safari and Internet Explorer (e.g: navigation over KeyLeft / KeyRight and ESC)
- Fix some small Browser Bugs
- Add support for other Objects like HTML, PDF and TXT without Iframes.
- Make SourceCode JsLint conform for better support on different Browser
- Eleminated duplicated Variables and Functions
- General Code Improvement

Version 0.3:
- Code Optimization
- Alternative for Browser which cant handle "position: static;"
- Gallery Support
- Insert Events and Objects W3C conform
- Remove CSS File and implemented the hole DIVs and Styles over JavaScript

Version 0.2:
- Add dynamic insert of Objects in the DOM Tree
- Add scaling Images
- Add better Layout
- Make compatible with Safari

Version 0.1:
- Internal Testversion, can simple show and hide a Image dynamic

What is winDiv

WinDiv is a DIV based Window Script, you can simple display the Content in a on page Div instead in a new HTML Page or Browser Window / Browser Tab.
Some time ago I used jQuery and ThickBox , because it was simple and looks great.

But 1/2 year later, I notice that jQuery has some small failure's and its to huge for such simple things and so I code winDiv for my Gallery.
The Code for this is only 15k in compress Format, which already include the CSS Style and the Div Code for the Div Layout Box.
(Compare to jQuery (20k) and Thickbox (10k JavaScript + 2k CSS) = 32k )

Don't get me wrong jQuery and Thickbox are great, but they don't cover my needs.
Have you every try to Browser a Webpage with jQuery with a PSP (Sony Playstation) or a Handy (e.g: Sidekick). The JavaScript blocked the Page and you wait about 5 Min until you can Browser over the Page after a JavaScript Timeout.

Online Example: http://animearchive.de/anime/pictures/

Features of winDiv

- Run Crossbrowser-wide (Firefox, Internet Explorer, Safari)
- Simple implementation over classnames
- W3C compatible
- Can also display HTML Files, PDFs and other things
- Cool and Simple Design
- Gallery Modus, you can used Key left and Key right to navigate
- only one JavaScript
- VideoPortal Support
- and its free... ;)

License and Copyright 

* Copyright (c) 2008 Markus Bordihn (markusbordihn.de)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.

Installation

Simple copy the byrei_windiv.js to your web page and include it in the .... content in you web page, because it will load faster and allow the browser to do a better caching.

MIME Typ Identification

winDiv try to identify the MIME Type over the file type extension, so when you want to used an URL simple use the URL.

Example:
<a href="http://example.org" class="winDiv"> ... </a>
<a href="http://example.org/index.html" class="winDiv"> ... </a>

When you want do display an Flash File or Image simple used the URL to this.

Example:
<a href="http://windiv.markusbordihn.de/example/pic/elsch-003.jpg" class="winDiv"> ... </a>
<a href="http://windiv.markusbordihn.de/example/swf/chi.swf" class="winDiv"> ... </a>

Classnames

winDiv will be activated over classnames, the following Classnames are possible:

  • winDiv
  • winDiv_width-...
  • winDiv_height-...
  • winDiv_Ajax
  • winDiv_scale
  • winDiv_nobg
  • winDiv_noclose
  • winDiv_nofooter
  • winDiv_effect-...

winDiv

With <a href="..." class="winDiv"> ... </a> you activated the winDiv for a Link.

winDiv_width- and winDiv_height-

With <a href="..." class="winDiv winDiv_width-400 winDiv_height-400"> ... </a> you can manual set the width and the height for winDiv.
In this Example the Content will be display in 400x400 pixel, please keep in mind that winDiv automatic add the close button or/and the footer so that the complete div will be higher.
This only set the content size not the complete div size.

winDiv_Ajax

With this you tell winDiv to load the content from the URL, please keep in mind that only the content between the <body> ... </body> will be fetched.
You also don't need a complete web page behind this, so you can only have a little html code behind this.

winDiv_scale

With <a href="..." class="winDiv winDiv_scale"> ... </a> winDiv will try to change the size to the content, this will only worked for Images.
When the Image is greater than the Browserwindow, it will be maximize to the highest possible value.

winDiv_nobg

To disable the Background simple used <a href="..." class="winDiv winDiv_nobg"> ... </a> , please keep in Mind that winDiv will also display centered.

winDiv_noclose

You can also disable the Closebutton with <a href="..." class="winDiv winDiv_noclose"> ... </a> .
Please keep in mind that when you don't display an image you don't have the possibility to close this window at the moment.
Maybe i will support this in features Versions. ;)

winDiv_nofooter

When you don't want a footer in you winDiv you can disable this over <a href="..." class="winDiv winDiv_nofoot"> ... </a> , this will only worked when you don't used the Group Feature.

winDiv_effect-...

When you want, you can select and opening effect for winDiv.
There are 7 simple effects in general which you can used:

  • winDiv_effect-down
  • winDiv_effect-up
  • winDiv_effect-left
  • winDiv_effect-right
  • winDiv_effect-width
  • winDiv_effect-height
  • winDiv_effect-pop
  • winDiv_effect-tv

For more Details please take a look at the example Page.

Grouping

You can group several Content over <a href="..." class="winDiv" rel="group-1"> ... </a> you can choose the name of the group.
In this example the group is named "group-1" so all other links with this group will be display in Groups.

Simple Example 
<a href="[Image 1]" class="winDiv" rel="group-1">  [Image 1] </a>
<a href="[Image 2]" class="winDiv" rel="group-1">  [Image 2] </a>
<a href="[Image 3]" class="winDiv" rel="group-1">  [Image 3] </a>
<a href="[Image 4]" class="winDiv" rel="group-1">  [Image 4] </a>
<a href="[Image 5]" class="winDiv" rel="group-1">  [Image 5] </a>

Change default Font / FontSize

The default Font for winDiv is "Impact" fantasy with the default Fontsize of 16px.
But you can change this very simple with the following additional JavaScript after the winDiv JavaScript.

JavaScript Example 
<script type="text/javascript">
 ByRei_winDiv.cache.font_size = '9px';
 ByRei_winDiv.cache.font = 'Arial';
</script>

Tranparenty of the Background / Color Background

You can also changed the transparent and the color of the Background with simple JavaScript. The default value for transparent is "75" and the default color is #000. Its also possible to use an Image as Background.

<script type="text/javascript">
 ByRei_winDiv.cache.opacity = "0"; // Make the Background invisible
 ByRei_winDiv.cache.opacity = "50"; // Make the Background 50% visible
 ByRei_winDiv.cache.opacity = "100"; // The Background is 100% visible

 ByRei_winDiv.cache.background = '#f00'; // Change the Background Color to red
 ByRei_winDiv.cache.background = 'url(testbg.png)'; // Set the Images as Background Image
</script>

Tipp:
You can make cool effects when you used an transparent images as background and change the opacity to "100".

DIV ID's

You can changed the IDs for every DIV over Javascript or simple in the Source code.
Some explainations to the different DIVs and there default ID.

ByRei_winDiv.cache.prefix: 'winDiv_' // The prefix which is used for the hole winDiv JavaScript
ByRei_winDiv.id.def:     'def'     // The hole winDiv DIV
ByRei_winDiv.id.bg:      'bg'      // The Background DIV
ByRei_winDiv.id.body:    'body'    // This DIV containt the Content, Top and Bottom DIV
ByRei_winDiv.id.content: 'content' // The Content DIV where the Content will be placed
ByRei_winDiv.id.top:     'top'     // The Top Content where the Closebutton will be placed
ByRei_winDiv.id.bottom:  'bottom'  // The Bottom Content where the additional Text will be displayed

To changed the ID you can simple used JavaScript for example: 

<script type="text/javascript">
 ByRei_winDiv.id.def = 'MyWinDiv';
</script>

HotKeys

winDiv has several Hot keys to allow a better navigation and User felling.
I worked over one hour to support all Browsers so these Hot keys should works for each Browser, expect Lynx ;)

  • ESC - to close winDiv
  • Left Arrow / Right Arrow - to navigated in Groups
  • NumPad 4 and NumPad 6 - to navigated in Groups

Stop Browser Scrolling

As long winDiv is displayed the User cant scroll the Content behind, so the User will always see the same content as he has seen before winDiv started.

Description

When you want to display a Description for a Picture, simple add the Information in the ...title="Hello World"... for e.g: <a href="..." class="winDiv" title="Hello World"> ... </a>

What other things to say

I hope you have fun with it ;)


Greetings,
- Markus B.