HTML data-*-attributes

Since I’m working with a server-side programming language (PHP), JavaScript and HTML I’ve been dealing with a way to separate logic, structure and presentation layer. Especially when you work on projects that have a lot of frontend logic. There’s always a need for change late in the project in either one of them. When you have to change the structure or the representation layer you will mess up your logic when there’s no clean separation and the other way around. With the html data-*-attribute things get much easier. It solves the problem of how to pass data from your server to the frontend, helps avoiding mixing up style definitions and frontend logic (class-attributes) and gives your frontend data a home. Continue reading

jQuery 1.4.4. does not animate proper from values above 10000

Imagine a site with a really big header image having a width close to 1000. The header allows sliding between several pictures, each representing a blogpost or item, that may be found on the site. Realising such a carousel is quite easy with jQuery. I built such a site and there where something like 14 such images and jQuery’s animation method suddenly behaved very strange. So i posted a bug, which is reported to be fixed with jQuery v1.5. If you can’t wait there’s a quick fix: use jQuery 1.4.2.

Continue reading

jQuery One Line Element Filter

Im Zuge der Arbeiten an Turboblog setzte ich mich zum ersten Mal richtig mit jQuery auseinander. Zuvor hab ich vor allem mit prototypejs gearbeitet. Dieses Projekt schien jetzt aber schon längere Zeit eingefroren zu sein, obwohl man jetzt wieder ein Lebenszeichen von sich gegeben hat. Zusätzlich bietet jQuery mittlerweile auch wesentlich mehr PlugIns und Addons als Prototype.

Wie gesagt findet dieser Code Anwendung im Turboblog. Die Navigation ist eine einfache Liste der einzelnen Turbos. Eine Filterfunktion dafür schien passend um einfach zu älteren Seiten gelangen zu können. Da für die Darstellung der Liste schon sämtliche Daten im Browser geladen sind, ist eine AJAX Lösung, die immer individuell für jede Filtereingabe die passenden Daten liefert, überflüssig. Den Code habe ich minimiert so gut es ging. Da ich mich aber noch nicht als jQuery Profi sehe, gibt es sicher noch Verbesserungspotential.

Continue reading