Building Drip-Castles using JS and CSS

[Post written by Mario August 22nd, 2010 at 3:10 pm]

...recovered

While looking for some way to draw HTML (sooo lazy :) I came up with some kind of Structure Generation based on divide & conquer. With some CSS it turned out to look like "Kleckerburgen" (engl. Drip Castles). Done by capturing "Mouse-Over" - Event on the initial Element-node, that get divided in 2 child-nodes and so on until reaching a defined max. depth. CSS is adding some visual "offset" to the child-nodes of each level + some shading to each node level.

Elementcount = 1

The poor scripty isn't a beauty at all, but highlights the depth of the nodes created, and so the underlaying html structure.

Here is the Demo @ jsFiddle

Have fun drawing!

Read More

Lichtatmer Hallo Welt!

Augen zu – und…… warten!Wenn dann die Äuglein wieder etwas Licht in den Kopf lassen, die ersten paar Momente richtig mitfühlen.Licht atmen! Gar nicht so einfach – aber beruhigt und lässt einen selbst ein paar tolle Dinge entdecken.Einfach selber mal ausprobieren.Da die meisten Dunkelheit zusammen mit Unbehagen und Unsicherheit empfinden evtl. zuerst in den eigenen 4+x Wänden testen. Später dann auch mal draussen probieren – im Park die Sonnenstrahlen einsaugen, in der U-Bahn den geschäftigen Menschlein zublinzeln, beim Aufzugfahren das Öffnen der Türen abwarten, früh unter der Dusche den von der Nase rutschenden Wasserkörnern folgen. Alles toll!Lichtatmen ist übrigens kostenlos und überall erhältlich Viel Spaß beim Lesen und Schauen,Mario

Read More

Normalize Number Delimiter for different locales with Javascript

Working with a Web-Application based on Java/Spring and FTL / JSP on the Template side you might know that you got some build in localization support(e.g. for number formatting). Various locales(java example locales). result in different number formatting:

• de_DE,german - 1.000,30 €
• cs_CZ,czech - 1 000,30 Kč
• en_GB,english - £1,000.30
• ...

Sometimes this is not that great

Currently some external Affiliate network requires us to handover prices as a standard float number (e.g: 1000.3) via their tracking code snippet.

How you should deal with that

--> Similar question on the Freemarker Templating Q&A
they are differentiating between "computer audience and human audience" in our example ${someLocalizedNumber?c}will do the trick(Freemarker c builtin reference ) This takes the plain float below all (Spring) Localization and exposes this again as an String.

If you can't do that - Javascript to the help!

Normalize the Delimiter with Javascript

So i wrote a little script that deals with that issue and gets you your floaty number back:

function normalizeDelimiter(str){
    var n = "", delim = false;
    for (var i = str.length-1; i >= 0; i--){
        //preserve decimal delimiter - remove all others
        if(!delim && !isInt(str[i])){
            n = "." + n;
            delim = true;
        }else{
            n= (isInt(str[i]) ? str[i] : "") + n;
        }
    }
  return parseFloat(n);  
}

Normalize Delimiter takes a String that contains a (valid) Number and transform into a float.
Feed it with e.g.

'1.234,56'
'1 234,56'
'1#000#01'
'0.2'
'22'

Run it

normalizeDelimiter('1.234,56')

and you get:

1234.56
1234.56
1000.01
0.2
22

It handles the normal stuff as well as the ones that have even strange delimiters

To make use of the code you'll need the isInt() function

// check if given input is of type integer
function isInt(input){
    return !isNaN(input)&&parseInt(input)==input;
}

Demo:

All assembled and ready to run @ jsFiddlehttp://jsfiddle.net/9w5AQ/

Read More