Archive for the 'HTML' Category


NSBrowser vs. YUI ColumNav 0

ColumNav ist eine Erweiterung für Yahoo UI und Bill Scott’s Karussell Komponente und sozusagen das Gegenstück zum Cocoa Element NSBrowser

web_columnav.jpg
ColumnNav

cocoa_columnav.jpg
NSBrowser

Als Datenquelle werden Verschachtelte HTML Listen verwendet.
[html]

  • Freunde
    • Hans Maulwurf
    • Lisa
  • Familie
    • blah
    • blah

[/html]
Die ColumnNav ( + Karussell Komponente ) wird so initialisiert (HTML)
[html]

[/html]
Jetzt noch alle Javascript Dateien einbinden.
[html]








[/html]
Und ein paar Zeilen Javascript
[javascript]
function init() {
var cn_cfg = { prevElement: ‘columnav-prev’, source: document.getElementById(’linkliste’) };
var cn = new YAHOO.extension.ColumNav(’columnav’, cn_cfg);

}
YAHOO.util.Event.addListener(window, ‘load’, init);
[/javascript]
Und schon haben wir eine NSBrowser Komponente fürs Web. :)

Zur Karussell Komponente hätte ich noch eine weitere Idee.
Zusammen mit der Reflection.js ( für Mootools ) würde man sicher einen sehr netten Coverflow a la iTunes hinbekommen.

Ich denke für YUI gibts wohl auch eine Reflection Komponente. Derzeit kenn ich nur script.aculo.us Reflector, einen unabhängigen Reflection Script und für JQuery hatte ich auch schon einen gesehen.
Wenn ich am Wochenende etwas Zeit finde werd ich so etwas mal ausprobieren.

Wii Buttons 0

Auch wenn ich keine Wii hab, die Wii Buttons kann ich mit 2 tags + 1 Bild und ein bisschen CSS haben

wii buttons

Das ganze ist kompatibel mit allen gängigen Browsern ( IE6, IE5.5, IE7, Safari 2, Firefox 2, Opera  )

Sehen wirklich sehr schick aus :-)

To Do with Mootools 0

MootoolsToday i tried mootools.

Its really great and easy to understand. I love it. With my first idea in the head i tried to rebuild the new feature of OS X Leopard Mail but also integrate some own ideas. The presentation of Mail wasn’t that detailed.

Try Hackdev - Notes 0.1 Demo

I played a bit with the nice effects of mootools. Its really fun!

Select a random task from the note and then click on Create a To Do!

The selected text is now highlighted and a new task appears in the menu “Task”-list.

Thats it. Very simple and only tested on Firefox 2.0. The effects are working on Safari and IE though.

The next steps:

  • Working on usability
  • Crossbrowser
  • PHP/MYSQL/AJAX integration
  • editable notes
  • and a lot of more things

I hope you like it. Its not a finished thing just some brainstorming and sandbox programming.

When you have more ideas let me know.

greetings

Hackfrag