AlternateIdea: EffectsPack - Prototype Based Effects

June 1st, 2005

EffectsPack - Prototype Based Effects

11 comments on 245 words

I’ve been toying around with “Prototype”:http://prototype.conio.net/ and “Effects V2”:http://mir.aculo.us/articles/2005/05/30/javascript-visual-effects-v2-beta-version the past couple of days. I wanted to put the great effects offered by both packages to real world use and so far I’ve got some “initial widgets”:http://www.encytemedia.com/effectspack posted.

Currently it’s two simple implementations (“ActiveMenu”:http://www.encytemedia.com/effectspack and “ActiveTab”:http://www.encytemedia.com/effectspack), but I plan on expanding and refining the package further as i’m sure there will be bugs and such.

ActiveMenu is an unordered list that makes use of Effects V2’s Blind function. ActiveTab is a tab-panel system loosely based on “Tabtastic”:http://phrogz.net/JS/Tabtastic/index.html. It could prove to be very useful for hiding advanced options and extended information without requiring a page reload.

Sorry, no docs… yet.

Discussion

Frank Manno said on June 2nd

Justin,

Very nice!! They look awesome, especially the ActiveTab example you have. I love the fade effect.

Wow, I’ve gotta give Prototype/Effects a go… Did you find them easy to work with?
Justin Palmer said on June 2nd

Thanks Frank!

Prototype and Effects V2 were both written in a very clean style, so there both pretty easy to get the hang of.

I’d eventually like to get the widgets into a more manageable format, but hopefully that will come soon.
tobi said on June 2nd

Thats really cool stuff justin!
bodhi said on June 2nd

they are really nice! but i broke the tabs: on safariif you click fast, you can end up with two tabs showing… it’s only a minor issue on an otherwise neat system though!
Ramin said on June 3rd

I also experienced the double tab issue. Only happens when you click fast between the tabs. Typically tab2 stay around for some reason.

Maybe have a the first tab fade out before the next tab fades in? This may look a bit smoother as well.

Nice work though :-)
Mike said on June 3rd

I have that too. FF 1.0.4 – If you click the tabs rapidly (while the first one is still fading in) you can have all three tabs shown at the same time.

Very, very cool effects, though! Kudos!
Justin said on June 3rd

Thanks for the feedback guys :-) , I’ll look into the issue about multiple tab contents showing.
Nacho said on June 11th

Hi.

As all the previous posters, I want to say that you’ve done a great work.

I would also like to make a suggestion for one of the TODO’s items. Maybe you have already considered it, but you could use a different class for the showing tab. This could avoid the use of the inline javascript initialization code, as you could make all the tabs to ‘display:none’ in the css, except for the showing one. Then, when you click on a tab, you could change its class to ‘showing_tab’ and reset all the others. They would hide automatically, and the new one would be displayed. All the effects could be managed through this handler, and maybe, this could even lead to a fix for the multiple tabs showing issue…

Anyway, this is only a suggestion, just keep up with your great work… :D
michael said on June 30th

nice contrib. thanks.

but on my IE, it is broken… at least this page is:
http://www.encytemedia.com/effectspack/#tab3

the effects are clumsy and the tab divs are all viewable…

works perfect in firefox.

IE sucks.
mike said on July 25th

Hey, man. Those tabs look awesome. I was going to use that in my CMS project (called UpdateAble, and it’s on sf.net) but it didn’t work for me in IE.

Keep up the good work. I’m interested in what you’ll come up with next.
Ben said on August 1st

Fantastic tabs! I’m just in the process of adapting them for my latest project.

Sorry, comments are closed for this article.

Justin is the Design Director for entp, the company behind Lighthouse, Warehouse, and Mephisto. You can check out his shiny stuff for proof of his super powers.

Beautifully simple issue tracking and project management. With a beautiful Mac-like interface, email and subversion integration, Lighthouse is the perfect project management tool. We took the suck out of issue tracking.
Web-based Subversion Interface. Manage Subversion permissions and browse through your changesets and files with ease. Warehouse takes the complicated and mundane tasks of Subversion and makes it easy.

Jun08

ActiveRecord Ported To Objective-C brought to us by Ninja Kitten
permalink
May06

With the release of Opera’s DragonFly, IE 8’s Developer tools, Safari’s/Webkit’s Web Inspector and Drosera; and the Grand Daddy of them all, Firebug – we’ve now come full circle.
permalink

Feb08

permalink

DoubleClick and Define using Apple Dictionary


var selection;
if(window.getSelection)
  selection = window.getSelection();
else if(document.selection)
  selection = document.selection.createRange();

document.observe("dblclick", function() {
  if(navigator.userAgent.include("Macintosh")) {
      location.href = "dict://" + selection;
    }
});

A quick (and probably dirty) Prototype-based hack allowing Mac users to get the definition of any word by double clicking it.

Feb08

permalink

A strftime for Prototype


Object.extend(Date.prototype, {
  strftime: function(format) {
    var day = this.getUTCDay(), month = this.getUTCMonth();
    var hours = this.getUTCHours(), minutes = this.getUTCMinutes();
    function pad(num) { return num.toPaddedString(2); };

    return format.gsub(/\%([aAbBcdDHiImMpSwyY])/, function(part) {
      switch(part[1]) {
        case 'a': return $w("Sun Mon Tue Wed Thu Fri Sat")[day]; break;
        case 'A': return $w("Sunday Monday Tuesday Wednesday Thursday Friday Saturday")[day]; break;
        case 'b': return $w("Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec")[month]; break;
        case 'B': return $w("January February March April May June July August September October November December")[month]; break;
        case 'c': return this.toString(); break;
        case 'd': return this.getUTCDate(); break;
        case 'D': return pad(this.getUTCDate()); break;
        case 'H': return pad(hours); break;
        case 'i': return (hours === 12 || hours === 0) ? 12 : (hours + 12) % 12; break;
        case 'I': return pad((hours === 12 || hours === 0) ? 12 : (hours + 12) % 12); break;
        case 'm': return pad(month + 1); break;
        case 'M': return pad(minutes); break;
        case 'p': return hours > 11 ? 'PM' : 'AM'; break;
        case 'S': return pad(this.getUTCSeconds()); break;
        case 'w': return day; break;
        case 'y': return pad(this.getUTCFullYear() % 100); break;
        case 'Y': return this.getUTCFullYear().toString(); break;
      }
    }.bind(this));
  }
});

UPDATE: Bugs fixed. Thanks Andrew and Stephen

Also, some of my old and new code has been posted on GitHub. You might find something useful.

Feb04

A beautiful, organic animation by Flight404 created using Processing.

Processing in Action
Jan08

Aaron Patterson shows us how to define ruby methods which can be called from JavaScript using RKelly.
permalink
Jan07

Dustin might not surprise you at your house with a book in hand, but he’ll damn sure send you his innermost fu in the form of a shiny yellow and black book. It’s an excellent read if you’re looking to put more funk in your functions and class in your classes. Check out “Pro JavaScript Design Patterns” by Dustin and Ross Harmes.

—I’m Justin Palmer and I approve this message.
permalink
Dec23

IE 8 PAsses the Acid 2 Test for those not keeping tabs on things.
permalink
Oct24

Mislav has written up an excellent overview on upgrading Radiant (which used 1.5) to Prototype 1.6. The article does a great job of showing how 1.6 is superior to 1.5.
permalink
Oct19

According to the New York Times, the Daily Show Archives, with over 7,000 videos are online—free and searchable.
permalink
Oct11

Telemarketer gets owned
Oct10

—Erik Kastner shows us how it’s done.

Making an iPhone app in about a minute
Oct09

Defining classes and inheritance in Prototype–Incase you’ve missed it, Prototype 1.6 has a new inheritance model.
permalink
Aug21

Hurricane Dean’s projected path. The most awesomest hurricane ever.
permalink
Aug07

How Ninjas Work

Who would’ve thought Howstuffworks would be able to uncover the secrets behind these illusive creatures.
permalink