Code Snippets: Visual Effects: Posts

Mootools and 3rd party widgets

I have several classes that I’ve written for use with Mootools that I’ll be posting about soon. I thought I’d go ahead and point to this great little slider widget over at lenhatanh.pebox:

slider.gif

I know that Valerio over at mootools is planning a plugin repository for things like this, which I think will really help move that framework forward. In the mean time, I’ll probably take things like this and move them into our own global framework after testing them out so that developers here can make use of them.

Transcorners: Because you are obsessed with rounded corners

via ajaxian:

People really are obsessed with rounded corners aren’t they? If we had a simple way to express them in CSS, maybe then we would be writting JS libraries and CSS hacks to give us spikey corners or something :)

Well, the latest kid on the block is Transcorners, which is a mootools based rounded corners system.

No more IE background flicker

Fantastic! Via ajaxian (of course):

Have you been bugged by IE background flicker?

Cristi Balan talked about the issue and the solution:

html {
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

Cristi links to a blog posting by Dan Popa, who discovered the IE6 background image flicker fix. And while you’re on Dan’s site, check out a forensic analysis of the IE6 BackgroundImageCache command identifier.

Prototype Carousel Widget

I know that Bill Scott’s carousel widget (written with the Yahoo UI Library) is already in play here on CNET Redball (News.com is using it). Here’s a Prototype version that seems to be a lot smaller - you’ll need Prototype (you might be able to get away with the lite version @ 8K, otherwise, 33K), but NOT scriptaculous. Might be worth considering swapping out? Does all the ajax stuff, too.

Sebastien Gruhier has written a Prototype version of the YUI Carousel component.

This version is lightweight and has a few parameters compared to the more flexible YUI version (that comes with a 200kb price tag).

Prototype Carousel

Mootools

Well crap. 1) I love the mad4milk guys (makers of moo.fx, moo.ajax, moo.dom, prototype.lite). 2) their new framework looks AWESOME. 3) as always, their libraries are SUPER TINY.

But damn, now I have to learn something new, and maybe rewrite a bunch of crap. This is the problem with javascript. Still, when Prototype + Scriptaculous is 100K, you gotta admire their ability to crank something out in under 20K that will get you nearly the same thing.

The Mad4Milk team (the minds that brought the world moo.fx) have unleashed a brand new, very impressive Javascript library out onto the web - MooTools.

mootools is a very compact, modular, Object-Oriented javascript framework. Its unique design makes it extremely crossbrowser, easy to use, and a snap to extend with your own code. It comes with a choice of more than fifteen scripts, plugins and addons, including Effects (moo.fx) Ajax (moo.ajax), Dom Navigator (moo.dom), Drag and Drop, Sortable lists, cookies Manager and many more.

There aren’t any demos of the functionality quite yet (as of the date of this post), but you can download the first release of thise powerful little tool.

You can also check out what Jonathan Snook has to say about it, having already downloaded and worked with it a bit. He’s also created a simple tutorial on using the new library to create a drag-and-drop example.

Surveying open-source AJAX toolkits

One of the aspects of having a lot of action going on around a development space that’s rather new is that you get a lot of people solving problems just like the ones you’re having. These people release their work and you can make use of them if you like.

So you go download a few, pick the one that looks best and get started working. Meanwhile ten more solutions hit the market and you’ve already commited yourself. Stopping what you’re doing and going back has that oh-so-familiar pitfal that we’ve all experienced: you either waste a lot of time reading up and trying out those ten new things or, almost worse, discover that someone has a better solution than the one you’re half way through implementing.

I saw this post below on Ajaxian today and figured I’d read it because I’d been curious about Rico and Dojo in particular but hadn’t gotten around to trying them out. Dojo is friggin awesome. From a tech prod perspective, I think it’s the slickest thing I’ve seen yet. Implementing the various aspects of the Dojo platform seems super-duper easy, almost to the point that you don’t need to know a lot of javascript. So now I gotta go download, install, and fiddle with it for a few weeks and then probably rewrite some of my existing work. Sheesh.
In the article linked to below, you’ll find screencasts for each of the six frameworks. They aren’t terribly detailed, but the give you a decent idea of what it’s like to actually use the libraries. | Read the rest »

Popupdetails.js (now leak free!… hopefully)

Here’s a little utility I’m releasing for you sportsfans out there. After much wailing and gnashing of teeth, it would appear to be leak free. So what is it?

UPDATE This is now released for Mootools 1.0.

popupdetails.js makes a little DHTML layover when the user clicks or mouses over an element, generally to provide more detailed information for that item. It makes use of moo.fx to fade in and out (slick!) and it uses an iframe shim to obscure select elements and the like so they don’t poke through.
| Read the rest »

moo.dom - easily target html elements & add actions

Those crazy guys at mad4milk.net have added a bit more to the moo.fx library. Now, in addition to their animation library, prototype-lite, and ajax-lite scripts, they've added a 3kb selector library: moo.dom

| Read the rest »

Javascript/DHTML in-page popups

Over on Download.com we use a popup DHTML window library called overlibmws for dialogs and the like. I like this library because it works in a ton of browsers and degrades nicely, and because it's easy to position the popups (give it an x/y for the window, tell it to center on the page, tell it to center on the mouse, tell it to position relative to an element on the page, etc.). (See previous posts about the library)

Here's an upcoming alternative that introduces the same functionality but using prototype and scriptalicious style effects to make a slicker looking version of the same functionality. | Read the rest »

Linkdump

Sorry about the non-annotated linkdump. Aaron's always after me to post stuff here instead of emailing him links to new things I find, but I just don't have time to describe all these sites. At least I categorized them... | Read the rest »

Categories

Archives

Links and whatnot