I added a slider to allow users to set the speed of the carousel. this is based off of the  JavaScript Carousel v4 example, You will notice that faster speeds will cause elements not to properly align, I'll dig into that issue soon. Click on any...

I hated the Mootools FX animation from the last example, so I rewrote the animation using setInterval().  This allows me to have a more constant movement and control precisely the animation.  I also added event handlers on the icons. ...

I added Mootools FX animation to the last example, I personally don't like the way mootools makes my elements move.  I will be exploring new options in the next experiments.

Building with code from the last example, I added next and previous buttons and made the elements move to new target positions.  You will notice that I did not animate the carousel. I wanted this experiment to be focused on calculating the correct...

Based off the circle animation experiments and mathematics, I am moving towards a javaScript carousel. In the next 3-4 posts I will explore and build different variations and finish off with a complete carousel script. The experiment adds a Mootools...

Adding multiple elements to the last post's animating along a circle script. I create a variable called angle.  All the animation is based off of that variable as it increments from 0 to 360 and resets to 0. Changing angles means changing position...

How do you make clips move along a circle using Javascript.  Definitely a mathematical solution that uses angles, a radius and sin cos manipulation. In this example I choose and angle between 1 and 360 and calculate the value of the radian from...

As Geoff from deconcept suggested in an earlier comment. It seems to me that using an ordered list with radio buttons inside would be more appropriate for this kind of thing. Since you can only select 1 thing at a time, and it's ordered from 1 to...

With sminor CSS modifications to the list item elements width and height + background image you can set your stars rating to look like snowflakes.  This experiments is based off the rating with stars v1 and can perhaps be used for the holidays...

Multiple ratings using the Rating with stars using definition lists: the DL, DT, and DD elements technique.

Definition lists vary only slightly from <ul><ol> lists in that list items consist of two parts: a term and a description. The <dt> tag is used in conjunction with <dl> and <dd>.  Using definition lists I rewrote...

I added rollover hover CSS to the previous star rating script. The concept does not change much, it's mostly CSS and the JavaScript will evaluate the star the mouse is currently on, and assign to it a rollover class name using addClass.  The logic...

I see all kinds of crazy CSS and ultra over the top rating systems over the web. I decided to create a simple one and expand on it. I created an unordered list <ul> and set <li> elements inside it. Each list item element then gets...

I like the fact that in ActionScript, when preloading extrenal assets, one has access to events to monitor the progress of the load and create appropriate detailed preloading animations. Working from my last image loading experiment I added an interval...

This is an extension of the last image loading experiment.  I added an "on" state script on the unordered list item menu to the left.  Once the button is clicked, in order to show the current selected image, I add a class named...

This is an extension of the last image loading experiment.  I added an "on" state script on the unordered list item menu to the left.  Once the button is clicked, in order to show the current selected image, I add a class named...

A set of new experiments.  Loading images dynamically in Javascript. I will explore the basics and add preloaders to the mix. In this example I am using the links a href url to change the target images .src property. Once the image source value...

This is the last iteration of the filmstrip series.  No major addition except for some CSS and HTML tweaks to enable for background images. The variable "currstep" hold the number of items that need to be shifted at every click.

This filmstrip is a slight modification from the filmstrip v4 script.  The issue I have with the last version is that the width of the filmstrip needs to be calculated "precisely" before animating.  This can cause a problem if items...

Adding border recognition to the filmstrip v2 script.  I created a variable named "newscroll" to define the new position to scroll to. Using that, a conditional checks for the beginning and end of the filmstrip. This stops the animation...

I often like to post the progression of a complex script in order to show the thinking behind and let novice users learn and understand the cocktail that make a complex behavior. This post is based of the filmstrip v0 & filmstrip v1 experiments...

Moving along with the filmstrip, I added a tween effect to animate the strip to it's new position. This is now the base for my filmstrip and in the next experiment I will add the next forward buttons in order to get it to move to new positions. errata:...

Starting on a new set of experiments, creating a flimstrip. I set up the CSS for a number of div's aligned horizontally. Most important here is the div that holds the squares has it's overflow property set to "hidden" to ask like a mask....

This experiment uses the slider to change the speed of the Scaling DOM Elements in % v2 experiment. Looking back at the last series of experiments, I can definitely attest that browser performance is nothing like the Flash pluggin, although I need...

In this example I introduce the concept of depth by creating a new FX where I set the z-index of the icon from it's scale value.  In other words, the bigger the icon the closer it is an vice-versa.  This code extends on the scaling dom elements...

As you know, my ultimate goal is to create and play around with 3D camera's in JavaScript and these initial experiments explore essential elements necessary for 3D mathematics.  This is a new extension to the  on Moving elements from the...

extending on yesterdays post, I added image elements to each div. For a developer with a flash background, I need to poit out that I find that Mootools handles tween animation in a similar way. Other frameworks have animation packages, my personal...

Exploring moving multiple items.  This example takes the previous code and applies it to a number of <div>'s; 5 to be exact. If you are not familiar with HTML and wondering how does a <div> translate to an animated square. In CSS,...

My last post, using FX.Morph, I created an animation to randomly reposition a div to a random top,left position on the stage and rescale itself to a new width, height value. This extends on that experiment by adding an interval to create a looping...

In my last post I mentioned that mootools has an FX Class which incorporates 3 ways to animate an object withing the DOM.  - FX.Tween : changes a single CSS style property - FX.Morph : changes many CSS style properties - FX.Transitions : changes...

Mootools has an FX Class which incorporates 3 ways to animate an object withing the DOM. - FX.Tween - FX.Morph - FX.Transitions The one in this experiment is the FX Tween.  The Tween effect is used to transition any CSS property from one value...

Creating three dimensions is only a mathematical smoke and mirrors scaling trick based on a virtual focal point. I had experimented on this topic in flash and had explored all the mathematics to create 3D navigations.I will be exploring the topic in...

Yesterday I posted about the Mootools DOM $ and $$ selectors.  They serve as shortcuts to traverse the DOM tree and find elements. Today's experiment looks into the Element.setStyle method. myElement.setStyle(property, value); basically,...

Mootools contains shortcuts for collecting elements from the DOM. A simple yet powerful solution is the DOM $ and $$ selectors.$ Collects an element from the DOM much like the document.getElementById(). The later might be intentionally verbose for...

Sometimes while coding experiments bloopers come along.  I was working on the mouse follow experiment when by accident I set the cursor background CSS property to "repeat fixed" instead of "repeat scroll". background: transparent...

This is an extension of my last javascript onMouseMove post.  In this case I used the CSS background-image property instead of an <img> tag to set the cursor follow image. The advantage in this method is that I bypass  the transparent...

In the following example I am creating a onMouseMove event handler and placing it on the <body> tag to catch all mouse movements on the page. A clip I am setting as position:absolute is then assigned to follow the mouse position by setting...

Mootools rgbToHex method converts an RGB color value to hexidecimal. Input array in array  format where each item represents a color value between 0 and 255 are used to set RGB colors. Ex : [255,255,255] In this example I am setting a 2D array...

The following Adobe Edge feature shot at FITC Amsterdam explores the state of the Flash economy.  What comes out of it is the necessity for flash developers, too content to sit on their skills, to start learning new skills.  The most promising...

JavaScript is a brilliant language with very public flaws. The javaScript environments within browsers vary widely in spec compliance, language features, and speed.  Major pains come from the different levels of DOM support. They're things some...