jQuery MagicLine Navigation

CSS, Javascript No Comments »


These “sliding” style navigation bars have been around a while, I just thought I’d take a crack at doing it myself as the opportunity came up recently. Turns out it’s really pretty darn easy. I put two examples together for it.

Link

Firebug for ie/safari/opera

Javascript No Comments »

firebug1.jpg

finally something to help speed up the debugging process of web development for ie.

link

Smooth slideshow

Javascript, images No Comments »

obama781331.jpg

Nice slideshow with links to each image. Check it out.

LINK

From Devthought

s3slider jQuery plugin

CSS, Javascript No Comments »

pretty slick image fading with description overlay.
LINK

Face Lift for your website

Javascript, Uncategorized, Web Design No Comments »

preview-promo1.jpgFacelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (h1, h2, etc.) to span elements and everything in between!

LINK

Starbox: Rating stars for prototype

Ajax, Javascript No Comments »

starbox_logo1.gifLooking for a nice rating script? Check out Starbox.

Starbox allows you to easily create all kinds of rating boxes using just one PNG image. The library is build on top of the Prototype javascript framework. For some extra effects you can add Scriptaculous as well. Check the demos below to see what Starbox is all about and read on for more information on how to customize your own Starboxes.

LINK

TextboxList meets Autocompletion

Javascript No Comments »

auto1.png
Guillermo Rauch created a very nice implementation of an autocompletion input field. Check out the demo at the link below. I can see a ton of applications using this nice tool.

Good Job G!

LINK

Image Transition Manager

Ajax, Javascript, images No Comments »

Ajaxorized proudly presents… the Image Transition Manager. The Image Transition Manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking and more to come.

While working on a project for a customer, I needed to create a kind of slideshow-like effect for presenting several photos of products. When I started out making this ‘effect’, I found out that I could use this for much more other projects than just this single one. That is what triggered me to create a nice class out of it, so I could easily implement it into my other projects. After showing my first version to Willem, he did some of his magic and extended my class with some other nifty image transitions and functionalities. That is how our Image Transition Manager was born.

The advantage of our library is the way in which you can implement it in your own projects.

[from ajaxorized]

MooTools 1.2 Beta 2 Released, Adds New Element Storage

Javascript No Comments »

The MooTools team has been quietly hacking away at their next major release of the MooTools library. A couple of days ago, project leader Valerio announced Beta 2 of MooTools v1.2 for public consumption:

Its been almost 2 months since the first 1.2 beta. Bugs were fixed, features were improved, and here it comes: the second beta. The first big feature we've been working on for 1.2 is Documentation.

1.2 Documentation is in fact almost 5 times more detailed than it was in version 1. Every class option has now its description, every method has a complete list of arguments along with description, type, and now every functionality comes with a code example — sometimes more than one. If you want to see it for yourself, here is the temporary link for the 1.2 beta documentation.

Along with enhanced documentation, this release also introduces the new Element Accessors feature which makes working with elements more concise. Valerio offered a nice example which basically negates the need for chaining:

PLAIN TEXT
LANGUAGE:
    $(element).set({
    href: 'http://mad4milk.net',
    text: 'mad4milk website',
    morph: {duration: 200, transition: 'quad:out'},
    events: {
    click: function(){
    document.location.href = this.href;
    return false;
    }
    }
    });

Tom Occhino followed up with another blog posting about the new Element Storage class which is meant to provide a better method of storing data for DOM elements. The concept came about mainly due to issues with how IE handles the storage of additional attributes within Elements especially with respect to memory leaks.

Element.Storage is brand new in MooTools 1.2. It is basically an external Hash that stores all the custom properties and events for every element you interact with. Let's take another look at our previous example, this time using the new Element.Storage API:

LANGUAGE:
    var element = $('myElement');
    element.store('effectInstance', new Fx.Tween(element, 'color'));
    element.store('customProperty', 'someProperty');

     

    element.retrieve('effectInstance'); //the Fx.Tween instance
    element.retrieve('customProperty'); //'someProperty'

Note that events and actions are no longer attached directly to the Elements. Everything is stored in the external Hash, and managed by MooTools, so as a developer, you have nothing to worry about. Finally, an elegant and coherent API for attaching custom properties, functions, and objects to Elements.

Tom's blog posting goes into greater detail about the implementation and the applicable scenarios.

[via Ajaxian]

The ultimate password strength meter

Ajax, Javascript No Comments »

I made some improvements on the password strength meters available on the web. Using prototype/scriptaculous, I stole some code from ZeBadger (thanks!) and created a new meter which dynamically changes while typing your password.

Preview

Click here to see the demo

If you want to use this script, feel free to download the source and use it on your website.

Enjoy.

[via Ajaxorized]

Entries RSS Comments RSS Log in