Topic awaiting preservation: BoxLib v1.0.20030701

http://www.schillmania.com/dev/boxlib

Reusable component-based DHTML library designed to add style to the typical DIV element. Rounded corners, highlight / shading effects, background images etc. The idea for making this was inspired by the current design on my main site - I just finally got around to making it a downloadable component that people can use in their own stuff

It was designed to follow a simple HTML structure..

<div class="box color1">
&nbsp;<div class="content">
&nbsp;&nbsp;Content goes here
&nbsp;</div>
</div>

One .js include and the library will "automagically" apply the appropriate styles and rounded corner effects.

Thoughts?

I hated to see this get no reply cuz it's really very neat. That means nothing coming from me however

I'll play around with it, that's for sure, thanks =)

Jason

Scott: Very interesting - can I assume the jaggy corners on the blue box are due to the graphics used and not the script?

___________________
Emps

FAQs: Emperor

Yes, the corners are a simple pixel pattern at the moment - the reason being that GIFs are being used for the corners, and due to transparency issues it's easiest to have a simple "non-dithered" corner. However I was thinking if you can use PNGs for that, you can probably get away with some fancier dithered rounding that would give a smoother, cleaner effect.

Scott: Cool - its good work. I tracked down CSS-only solutions to rounded corners and they are horrible and massively complicated so this has to be a Good Thing

[edit: I have added a relevant section to the FAQ:

:FAQ: How do I get rounded corners on my box/DIV using CSS and no tables?

___________________
Emps

FAQs: Emperor

Emperor: Thanks for the mention, I'm honored My surname is actually "Schiller", my nickname "Schill" is derivative from that (as you may have guessed, heh).

I intend to add some more features to BoxLib over time - more specifically, adding more box styles and types and tinkering with PNGs and a few other things.

It would be nice if the css worked with Javascript, as it is if I disable JS I get a completly unstyled page.

Appart from that, I think it's a wonderfull idea.

Scott: Ooops - its a Wiki so you can edit it if there is anything wrong (as it is my mistake I'll sort it out).

___________________
Emps

FAQs: Emperor

Thanks for the comments.

Drac: I agree it would be convenient for this to work without javascript, however that would mean that HTML for the corners would have to be hard-coded for every box - and that adds extra HTML for browsers that don't support it (eg. Netscape 4), increases code size etc. My approach was to keep the HTML structure as simple as possible to allow the script to do the dirty work; this way older browsers can interpret the bare content code structure without having any extra "unnecessary" elements in there.

Actually, I was thinking it would be nice if you could just set it up so that it would round the corners of a CSS defined Box (div). So if the user has JS then they see the rounded box, if not then they still see a box, but with just the plain vanilla css coloured square edges defined by pure css. Kinda like some of the ideas proposed for PNG scripts -- use 8-bit alpha PNG image if supported, otherwise use 1 bit alpha gif's...

Honestly, I couldn't care less about 4x browsers. I have the same view as you, as long as they can read the content then their catered for. I was mainly refering to how it lookied if I disabled JS in mozilla and opera, which I often do.

Oh shoot, you are right! I was thinking to myself after reading, "you know, it should work without Javascript".. but the problem there was, I wanted to "hide" the CSS from older browsers without using any hacks etc. and the best way I could think of was to use JS to write out a LINK tag.

It did work as you described it before I started using JS to write out the CSS reference D'oh! Something to consider for a future revision.