Mootools Javascript Fisheye Dock Menu Example

I’m currently working on a mootools javascript fisheye dock menu example. You can see the fisheye example here: http://www.chrisesler.com/mootools/fisheye/index.php. I’ve taken some inspiration by the fisheye script developed by John Pennypacker at http://www.pennypacker.net as well as some help I got from Inviz (from mootools fame). The script is still a little buggy, but it works in all browsers as far as I can tell with the exception of the IE 6 and below PNG issue. I’ll work that out. But it works great in firefox, camino, safari, and IE 7. I’ll post more of my progress as I go along.

JoomlaOS

It seems some of my javascript experiments with Mootools inspired (in part) the new joomlaOS theme (see post). Thats a first for me! Guess I will still keep hacking away at mootools to come up with more useful javascript examples! Go see my current Mootools examples.

Mootools Javascript - Draggable Window Example

I originally posted this on the freewebsfarms.com forum.

Mootools is the latest incarnation from the Mad4Milk team who brought us MooFX javascript library and Mooglets. Mootools takes the best from prototype and MooFX and makes one lean and powerful little javascript library to do some amazing effects. I plan on posting more examples of mootools usage once I figure out more. The current documentation and examples are sparse, which is where this example comes in.

Here’s something thats a hack of the draggable windows from mooglets mixed in with the goodness of the new Mootools. It was inspired by mooglets windows as well as the mootools drag drop example by Jonathan Snook.

FIRST: add something like this to your styles.

.dragger {width:100px;background-color:#EFE;border:1px solid pink;margin: 2px; padding: 2px;}
.container {background-color: #66CCFF; width: 110px; height: 200px;border:1px solid pink;position:relative;z-index:50;padding:4px;}

SECOND: in the head add something like this. Obviously this comes after you’ve included the latest mootools script.

<script type="text/javascript">

var indexLevel = 1;

function dragContainerInit(el){

var fadeIn = new fx.Opacity(el.parentNode, {duration:300});

var dragContainerOptions = {

handle: el,

onStart: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(1,.5);
indexLevel++;
el.parentNode.style.zIndex = indexLevel;
}.bind(this),

onComplete: function(){
var fadeIn = new fx.Opacity(el.parentNode, {duration:300});
fadeIn.custom(.5,1);

}.bind(this)
};

el.style.cursor = 'move';

el.parentNode.makeDraggable(dragContainerOptions);

}

window.onload=function()
{

/* setup draggables */

var draggables = document.getElementsBySelector('.dragger');
draggables.each(function(el){dragContainerInit(el);});

}
</script>

THIRD: In your HTML, add something simple like this.

<div class="container">
<div class="dragger">Drag me</div>
</div>

<div class="container">
<div class="dragger">Drag me 2</div>
</div>

This should give you draggable boxes with a nice transparency fade when dragging the handle.

LIVE EXAMPLE

NEXT EXAMPLE: Mootools table row and column highlighting.

Krugle - Code Search Engine

I had signed up for the Krugle service when I first heard about it from Ajaxian. It was promising to be a search engine to find source code - of everything (php, java, perl, c, you name it). Well they got an overwhelming response, and had to back off a bit till they had the resources to handle the demand.

I just got my account code the other day, and signed up for the Beta. It looks very promising. The interface is nice and fairly intuitive. Lots of use of Ajax here to make requests and manipulate the gui. If you click on a search result, it enableds a side pane that allows you to look at the code and the repository where it is located. All in one place. Pretty impressive. Very little lag time.

There needs to be some minor cleanup of the gui, but overall its a good project, and I can’t wait to to see the final version. If you haven’t signed up for a Krugle account, I reccomend heading over to their site and sign up for the Beta.

QooxDoo Javascript UI Library

A while ago I discovered a pretty amazing library for UI design written entirely in javascript. What surprised me though is how little attention it was getting. No, it’s not Prototype or Dojo - they get tons of attention. The javascript library I’m talking about is called QooxDoo.

First thing you’e probably saying is ‘Cooks what??’. Heres a snippet from their website stating just how to pronounce the name.

What impresses me most about this javascript is the superb UI it generates. It has most of what you need to develop a Web 2.0 application. It is still fairly early in its development, but the strength of the community behind it has made it come a long way. It has the ability for a windowing system, ajax communication, excellent menu system, event capture, themes, and much more than I could ever write in a day. I suggest you vist their website for a demo.

I’m currently learning more about how to use this script to generate a UI. I’ve also figured out how to integrate CPAINT with it to do ajax communication with my PHP scripts that do the talking to my postgres and mysql database.

I plan on working out a simple application like a contacts list just to show the power of this open source project. And yes. It is free. Qooxdoo uses the LGPL as their license.

So check it out.

Ajax tooltip

I was looking for an ajax tooltip the other day, and I happened to find one that was actually pretty good. The tooltip itself is called “Bubble Tooltip“. This is very similar to the netflix tooltip.

What makes it easy is that you use basically one image for the background of the tooltip. If you want a fancy tooltip such as their example, you need to make the image a PNG to have the best transparency. You then write some basic css for the top and bottom of the tooltip.

Even though this is a pretty impressive ajax tooltip, I think I could do something similar with Prototype. I’ll try to write a new ajax tooltip script that utilizes Prototype since that is what I’ve been using mostly when I write ajax script.

http://web-graphics.com/mtarchive/001717.php