CVI
tripleb.js 1.24 allows you to simulate CSS 3 support for border-radius, box-shadow and background-gradient on your webpages.

It works in most major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari 3+ and IE 7+. On older browsers, it'll degrade and your visitors won't notice a thing.

Demonstration

TripleB   ...provides CSS 3 capabilities for div elements!

For test purposes
  • resize the browser window and zoom in and out
  • change blind text
!

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Copyright

tripleb.js 1.0 (18-Aug-2009) (c) by Christian Effenberger. All Rights Reserved.


tripleb.js is distributed under the Netzgestade Non-commercial Software License Agreement. License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.
YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE. IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

About TripleB

TripleB is my first attempt to get the 3 major beautifying features of CSS 3, namely "border-radius", "box-shadow" and "background-image: gradient", to run on not natively supporting browser platforms.

Because of compatibility reasons and to get the first release done, I've built in several...
Restrictions:

Features:

Disadvantages:


TripleB always uses the inbuilt browser capabilities first. As a last solution, if the combination of features don't match the browser capabilities, it creates an additional element. This element is positioned in the outer div as the first child, before the inner element. The element consists of the type canvas or div and is always named like the outer div, followed by an underscore and the suffix "canvas". The outer div can also be queried (for tripleb.js DOM modification) by "if(object.modified) {... }". The inner element can always be accessed by "object.lastChild". If the outer div is modified and the additional element consists of the type canvas, then tripleb.js has added an observer for a custom "onzoom" event. Assuming that the inner element has been changed by "object.lastChild.innerHTML" and the elements dimensions have also been changed, the repainting of the canvas element starts after the defined interval (default 1000 ms) modifiable by the tripleb property "cvi_3b.interval=200;". You can also enforce the repainting of the canvas without time delay by "cvi_3b.paint(object);".

Setting Up

Download tripleb.js and include it into your webpage.

<script type="text/javascript" src="tripleb.js"></script>

Using It

To get it run just add the class="tripleb" to the outer div.

Classes

Syntax

Set defaults using Javascript
cvi_3b.interval = 1000; //INT 50-5000 (ms)

Get some informations
FLOAT = cvi_3b.version;
STRING = cvi_3b.released;

Initialize simulation using Javascript
cvi_3b.init();

This function has been executed automatically on page load!

Repaint element using Javascript
cvi_3b.paint(element);
Example:
var ele=document.getElementById("outer");
if(ele&&ele.modified) {cvi_3b.paint(ele);}

Why use Javascript TripleB?

In older browsers, the script degrades and your visitors won't notice a thing.

Download

Please read the license before you download tripleb.js 1.24

F.A.Q.

Please read the Frequently Asked Questions before you contact the author.

History

Version 1.24

Version 1.2 Version 1.1 Version 1.0

Contact

Please leave any comments at this contact formular.

License

tripleb.js is distributed under the Netzgestade Non-commercial Software License Agreement.
License permits free of charge use on non-commercial and private web sites only under special conditions (as described in the license). This license equals neither "open source" nor "public domain". There are also Commercial Software Licenses available.

YOU AGREE TO ALL CONDITIONS OF THIS LICENCE AGREEMENT CONCERNING THE USE OF THE SOFTWARE BY ACCEPTING THIS LICENCE.
IF YOU DO NOT AGREE TO ALL CONDITIONS OF THIS AGREEMENT, YOU SHALL NOT INSTALL THE SOFTWARE, OR USE IT IN OTHER WAYS.

Other Projects

tripleb.netzgesta.de © 2024 by Christian Effenberger :: Imprint feed   twitter   facebook   myspace   delicious   digg   reddit   magnoliacom   newsvine   furl   google   yahoo   blinklist   mister-wong