Tag Archives: javascript

CSS3 columns in Internet Explorer and other unsupported browsers

Leave a reply

http://i1.wp.com/www.csscripting.com/wiki/images/4/4b/Diagram-css3multicolumn.gif?w=625

Recently I’ve been working on a project for a client that makes use of CSS3 columns in its layout design. The problem with CSS3 columns is that it’s not supported by any stable version of Internet Explorer so far (surprised? no? good!). At the time of this writing IE9 is the latest version.

Luckily there’s hope. The CSS3 Multi-column script helps render columns in browsers that do not have this capability. All you need to do is download the file and add it to your HTML after all your stylesheet declarations. It will read all your CSS3 column declarations and render the content accordingly.

The script uses some crossdomain ajax calls to work its magic, but IE8 does things differently. I’ve patched the library with the fixes needed for it to work correctly in IE8.

Download the patched CSS3 Multi-column script.

Thanks to Tobin Titus, Internet Explorer Performance Manager, who helped me track the bug down.

Related posts:

  1. How to test your website on Internet Explorer with GNU/Linux and Virtualbox
  2. Free virtual box & other VM images to test website in IE
  3. Is your ISP messing with your Internet traffic?
  4. A website visitor tracking statistics free open source alternative to Google Analytics

From my reading links: HTML5 forms and Django, Google API playground and Python development tips

Leave a reply
  • Making Forms fabulous with html5 Great introduction to the new HTML5 form input types and what you can do with them.
  • HTML5 – Example Form validation and styling Form elements With the new HTML5 form input types and CSS3 properties, form validation is very quick and easy, as well as nice form element presentation.
  • Head JS A very interesting utility that will load all your js scripts (jquery, google analytics, etc) in parallel so page load times get shorter, plus a lot of other nice features like new HTML5 elements styling in browsers that don’t yet support them like some versions of Internet Explorer.
  • Google APIs code playgroud I didn’t know you could play with all the Google APIs in a single webpage, testing your code as your write it.
  • GeoDjango and google maps An interesting read if you’re trying to integrate Google Maps with Django
  • HTML5 and Django form inputs How to render the new HTML5 input types with Django form classes. It doesn’t require much, really easy and fast.
  • Emacs as Python IDE A bunch of tips to have a good Emacs Python development environment. I personally don’t prefer IDEs, so I don’t use ECB but the rest is very useful.
  • Setting up a Python Environment Good advice for those coming from a PHP world and are getting started on Python development. I didn’t know about virtualenv until I had to deploy my first Django app on a shared host web server. Then it all made sense.

Related posts:

  1. Random links from my bookmarks
  2. HTML5 a jump backwards in web standards?
  3. The importance of Web frameworks in startup development teams
  4. Easy PHP code test development with SimpleTest unit testing framework

Animate your webpage fast and easy with Facebook Animation Library

Today Facebook released an animation javascript library that modifies CSS properties on the fly. You can download it and use it on your webpages.

Its a very light (10.4 Kb compressed version) animation library and its very easy to use. You can chain events or animations to create the effects you want. You can download it on the facebook developer’s resources page.

A typical effect used in websites is the flash effect to alert or notify of some action.

Here’s all you need to accomplish that:

<a href="#" onclick="Animation(this).to('background', '#fff').from('background', '#ffff4b').go(); return false;">Flash</a>

The syntax is easy. All you need to do is call Animation(this) on your element and then specify what CSS property you want to change on the .to and .from methods. In this case: go from yellow background to white background. The last .go() method tells Animation to run the specified animation.

You can also mix animations or transitions instead of playing one animation after another. For this you have to use .checkpoint() function and .duration() to specify how long the transition will take (in milliseconds). The checkpoints indicate when the second animation will start playing, allowing you to tweak the default behavior of playing one animation after the other one stopped.

So you can basically change anything: colors, widths, lengths, margins, positions, etc. For complete documentation of the library, go to the Facebook Developers Wiki. Its worth checking out.

Its a very simple syntax, with familiar terms (CSS properties) and very lightweight compared to using Prototype and Scriptaculous. Maybe Scriptaulous syntax for doing some animations is simpler or shorter, but you must load Prototype in order to use it, so that makes it heavier. Plus, you need to know the Scriptaculous effects functions and sometimes they are not that tweakable.

Its also nice to see Facebook releasing some open source code (BSD licensed) and contributing back.

Related posts:

  1. Facebook terms for your uploaded content
  2. Easy CSS editing with Emacs
  3. Easy PHP code test development with SimpleTest unit testing framework
  4. ACM Crossroads issue 14.4 online fast, thanks to Emacs