Darksat

ByteView, the world Smallest Javascript Lightview

Friday, October 9, 2009 1:54:23 PM

ByteView, Lightwindow, Simple Javascript, Lightview, SimpleJS, Lightbox

Byteview is the worlds smallest javascript based lightbox/lightview with fade/transition effects and the ability to load external html components via ajax.

I created ByteView as I was unhappy with the size and complexity of many of the pre-existing lightview solutions on the net and I knew it should be possible to create a much smaller effective solution.

Based around the SimpleJS javascript Library, Byteview stretches the capability of this ultra compact effects librarary by adding less than 1KB of CSS code to create a superlightweight lighview capable of loading external content via Ajax.
Also the SimpleJS effects library can provide most of the basic javascript effects you need for your website in only a few KB

Plus as well as being fast loading the links for loading the external content are search engine friendly and the html components will be loaded normally even if javascript is turned off.

Download Now

Required/Included files
byteview.css - 891 bytes
simple.js - 4.2 KB (uncompressed)
simpleajax.js - 5.9 KB (uncompressed)
close.gif - 269 bytes

Find out more about the other fuctionality of SimpleJS
http://simplejs.bleebot.com/

ByteView Example http://files.myopera.com/Darksat/files/byteview.html

insert the following tags into your head

<script language="javascript" type="text/javascript" src="simple.js"></script>
<script language="javascript" type="text/javascript" src="simpleajax.js"></script>
<link type="text/css" rel="stylesheet" href="byteview.css"/>

This is the content of the byteview.css file, you can include it as above or instead add it to your existing css file.

body {width:100%;height:100%;padding:0;margin:0;border:0;position:absolute;background-image:url(about:blank);background-attachment:fixed;}
#byt1 {position:fixed;top:0;left:0;width:100%;height:100%;display:none;} * html #byt1 {position:absolute;width:100%;height:100%;} 
* html div#byt1 {position: absolute;top: expression(0+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');}
#byt2 {position:relative;height:100%;width:100%;} #byt3 {position:absolute;width:100%;height:100%;background:#236;-moz-opacity:.45; filter:alpha(opacity=45); opacity:.45;}
#bytX,#bytx  {position:relative;float:right;padding:3px 14px;display:block;background: url(close.gif) no-repeat center left;color:#f50;font-weight:bold;z-index:99;}
#bytajax {position:relative;z-index:9;width:100%;height:100%;padding:9% 0 0 0 ;} 
#bytbox{position:relative;background:#eee;border:2px solid blue;}

This is the code that triggers the lightview window and loads test.html into the lightview area.

<a href="test.html" onclick="$ajaxload('bytajax','test.html','loading..','appear',false);$toggle('byt1');return false">Load test</a>

This is the HTML Code that goes in the foot of the page before the end of the body tag.

<div id="byt1"><div id="byt2"><div id="byt3"></div><a id="bytX" href="#" onclick="$toggle('byt1');return false">Close</a>
<div id="bytajax" align="center" valign="center"></div></div></div>

Example http://files.myopera.com/Darksat/files/byteview.html Download http://files.myopera.com/Darksat/files/byteview.zip Find updates and support questions here. http://darksat.x47.net/index.php?topic=1912.0

Opera 10 with Unite Webserver