Tonight I was supposed to do some boring database related stuff, but instead I got some ideas about
playing with table cells, random access and opacity.

Result is quite interesting, and it shows true power of Javascript. I suppose it would take lot more trouble to do something similar in flash, and if even if it could be done, this method gives you lot more control.
(For example you can add specific onmouse effects/events on some table cells )

So, here it is, 55 linse of javascript, no framework used:

Demo:
http://dragan.yourtree.org/projects/javascript-intro/

UPDATE

and now something even more crazy than our last example:
really nice mouse effect in just 18 lines.
(using prototype though )

Demo:
http://dragan.yourtree.org/projects/js-mouse-grid/

I'm starting to wonder, is it possible to make, lets say 400x400 "display" made from 1x1 table cells and make an javascript demo, like they did in the 90's...
You know, plasmas, rotating cubes, etc..

Viewed 20217 times by 7621 viewers

MGraph - Ajax based graph, updated to v0.96

I've got a letter today from James who asked me how to draw multiple values on the same graph.
That would been too much complicated, because that kind of solution must involve some kind of overlay.

Instead I decided to enable second best solution (as suggested by James), and that is - multiple graphs

New features

• Added Option to draw two or more graphs
• code modified to be more user friendly, and up to date with modern standards

I'll try to improve MGraph as much as I can, so if you have any new ideas - I'm listening.

• Demo
• Download (zip, 14KB)
• Old version

Viewed 63558 times by 18993 viewers

Canvas gallery with thumb reflection. Based oin Prototype and reflection.js

Coding time (6-8 hours, done in two days)

Demo

For last two days I was playing with canvas (again ).
This time i decided to build Gallery, but i wanted to add reflection to images, and to make them scroll left and right, instead of usual scrolling.

First task was to extend Prototype and add 3 new functions: scrollLeft, scrollRight, and stopScroll.

This may not seams completley necessary but it makes code a lot cleaner. Take scroll buttons for example:

		//Add event listeners on scroll buttons
		$('md').observe('mouseover',function(event){
			$('img-holder').scrolRight();
		});
		$('md').observe('mouseout',function(event){
			$('img-holder').stopScroll();
		});

   // as simple as that :]

I really learned a lot from this project, mostly about prototype.
Prototype really have awesome possibilities, all that you need is good plan and some coding skills.
Even if you are not top-notch ajax programmer there is a lot of examples and resources on the Internet.

Future of this project and usage

This project is still in deep beta, and if someone wants to use this gallery i advise to take demo page and modify it to your needs.
Otherwise you risk to loose some css or javascript dependency.

I will try to make new version of this as soon as possible.

If you have any comments or ideas please let me know.

Viewed 90382 times by 26868 viewers

I've heard about slick speed test, but I did not try it until today. I was actually suprised to see prototype win on this one

here are my results

final time (less is better)

mootols 321ms
Prototype: 271ms
jQuery: 838

I'm really disapointed with jQery performance.So, (for now) prototype remains my weapon of choice

link: slick speed

Viewed 53020 times by 13519 viewers

So, what is this? i hear you wonder...

This is Canvas 3DGraph, special type of bar graph used to plot X-Y-Z values.

As you may know, <canvas> tag is not supported in IE, so I was forced to use excanvas.js in order to draw graph in IE. As the result of that, you may experience some freezes when you try to plot large amount of data in IE.
Firefox and safari works just fine (aprox 10x faster than emulated canvas in IE).

This is initial release, i plan to add many more features, so stay stay tuned for updates.
And if you have any comments or ideas please feel free to leave a comment.

• Project page
• Download

Viewed 104293 times by 28142 viewers

CSS Menu with slider using Prototype.js

This little example shows how to make really simple and yet very nice CSS Menu with slider.

Example

Part 1 - HTML

<div id="menu">
	<div id="m-top">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About Us</a></li>
			<li><a href="#">F.A.Q.</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	<div id="m-slider">
		<div id="slider"></div>
	</div>
</div>	

Part 2 - Javascript

Now we add Javascript event that listen for mousemove on div that holds menu.

window.onload=function(){

	var offsetLeft=$('menu').offsetLeft;

	Event.observe('menu', 'mousemove', function(event){

		coordinateX=Event.pointerX(event)-offsetLeft;
		$('slider').style.marginLeft=coordinateX-20+'px';

	});

}

Part 3 - CSS

Here you can see the CSS file that is used for this example.

Download

slider.html
slider.css
helper.js
prototype.js (1.5.1)

Viewed 190583 times by 54813 viewers