Tibor Szász - web development in action

JavaScript template engine upgraded

I'm a big fan of separating the business logic and the presentation layer. This can be easily done by PHP, ROR, Java, etc. but when you try to do it in JavaScript it's not obvious how to do it, or which is the best way.

I've researched a lot on the topic and found two schools that is used by JS template libraries:
- Template language parsing
- Procedural approach
Both are great ways to generate, it only depends on your needs.

Here are some projects worth noting:

JST - JavaScipt templates - Big and evolved library, Smarty like syntax, GPL
SWATO - Very similar to the above, it's created for Java develpers. Example.
Chain.js - a nice tutorial about this.
PURE - this is a hybrid one and library free
jTemplates - a jQuery plugin
JTL - A Django template engine port

I played with the last one. It had some basic functions such as for loop, counter, reverse order, if syntax for checking if a value exists. The only problem was that it didn't had a comparison operator for strings and variables, so I decided to upgrade it.

Category: Programming - Tags: javascript template free open-source Read more

Tabbed CSS only website template

Did you know what a small anchor link can do for you? More, than you might think. You can turn it into an advanced navigation on your website. There is nothing new in this, it was designed to do this. This only make sense, if the scrollbars are visible in your browser, isn't it? Well, no. Anchor links even work, when the invisible content is in an overflow: hidden container. The target element should have the same ID as the anchor link's href attribute.

Show content

   Very very long text... images... forms... btw my over flow is hidden...
   
       I'm invisible by default, 
       but your click just revealed me. :)

This is really nice, but this is too nice to be true. The bad guy this time is Opera. She refuses to play the game and anchoring simply doesn't work in overflow: hidden elements.

After some experimenting, I came up with a working solution: Opera jumps to the desired point, if the overflow is auto. Great, I only need to hide those scrollbars, and I'll have a cross browser, JavaScript free navigation system, that just rocks.

The trick is, that you have to put the overflow:auto element in an overflow: hidden wrapper, that crops the scrollbars.

Category: Programming - Tags: css template free tabs - 12 Read more

Tibor Szász30 years old code addict

JavaScript template engine upgraded

Tabbed CSS only website template

Briefing

My startup

Topics

Friends

Feeling so social

Tags