Guymon

Drupal 7: JavaScript

James O’Beirne gibt einige Tips wie man JavaScript Dateien in Drupal 7 sinnvoll einbindet und wie man JavaScript Funktionen mit Behaviors aufruft.

Instead, the better way to include foobar_block_accordionizer.js would be to find a hook that is unique to the foobar block and include the JS file in the body of that hook.

Generating CSS animations in JavaScript

Chris Heilmann zeigt wie man CSS animations in JavaScript abfragt und erstellt:

This checks if the browser supports animation without any prefixes. If it does, the animation string will be ‘animation’ and there is no need for any keyframe prefixes. If it doesn’t then we go through all the browser prefixes (to date ) and check if there is a property on the style collection called browser prefix + AnimationName. If there is, the loop exits and we define the right animation string and keyframe prefix and set animation to true. On Firefox this will result in MozAnimation and -moz- and on Chrome in WebkitAnimation and -webkit- so on. This we can then use to create a new CSS animation in JavaScript. If none of the prefix checks return a supported style property we animate in an alternative fashion.

JavaScript Spinning Wheel

Nett spin.js:

• No images, no external CSS
• No dependencies
• Highly configurable
• Resolution independant
• Works in all major browsers, including IE6
• Smaller than an animated GIF (2.8K minified, 1.7K gzipped)

Cavas Links

Das .net Magazine erklärt wie man einen Page Flip Effect mit Canvas nachbaut.

This tutorial will take you through the process of creating your own page flip effect using the canvas element and plenty of JavaScript. Some of the rudimentary code, such as variable declarations and event listener subscription, has been left out of the snippets in this article, so remember to reference the tutorials files for the complete code.

Der Effekt ist nett, aber ich finde immer noch, dass man dafür zuviel Code schreiben muss. Trotzdem noch ein Canvas Link: Paper.js.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.

HTML5 Cross Browser Polyfills

Eine Polyfill Übersicht von Paul Irish gibt es im Modernizr Wiki.

So here we’re collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don’t natively support them.

The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn’t have to change but users will move to the better, native experience cleanly.