javascript

mooShell - utility to test your MooTools code

Edit: mooShell is discontinued. Please use jsFiddle instead. Sorry for any inconvenience. If you happen to have anything embedded – contact me

I present mooShell – a tool which is helping with writing html, css and javascript.

Make images appear in random order

It's a very easy to achieve, but beautiful effect. All images and objects with class .appear_randomly will appear in slightly random order.

Enough to do is to load appropriate library (Prototype/Scrip­taculous or jQuery), create a site wide loaded Javascript file (in example generic.js) and put this simple code inside:

Link triggered page transition with fade out

My client wanted to make a transition between pages. I thought it would be difficult to do, but with help of Scriptaculous effects and Prototype's $$() function it turned out to be pretty simple.

The method I used is easy to use, unobtrusive and needs only one element which usually is already in the code – main div surrounding all page content.

Working example

Unobtrusive Javascript based login window

Login window which appears on top of the content.

Login functionality is one of the gates to the members area. It should be provided in very accessible and clear form. I think that the best solution is to display a form on top of existing page, send the login request with automatically forward the action to the desired one.

The example uses Prototype and PHP, but it shouldn't be complicated to rewrite it for other software.

I've used this functionality on William Baker's B*Boy website which I had honour to build with Hatch recently.

Thanks for the Jash!

Just incredible thing - Javascript Shell.

Click here to open the Jash console and access the Javascript on that page.

Write there

alert('hello world');

And hit [Enter]. Alert window pops up

Show and hide div - Prototype with XhochY modification

The goal is to look if the modified Prototype actually works. Let's make an object hide and show on user action.

hide

this is a test object which should hide and show on user action