Ce6f4f50611af8a1a964c3cdd3edd004

Hi there, I wrote a javascript effect - based on the Version of Michael Perry - that presents images like (kind of) Apples CoverFlow. The main problem I have is the overall performance. It also varies on different Browsers. A smaller Problem would be, that it is incompatible to Safari running on a Mac. Safari under WinXP is fine. What improvements would you make? To see the effect in action visit: http://imageflow.finnrudolph.de

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/* Set some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";

/* Get width of the images div container in px */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	if (target < current-1 || target > current+1)
	{
		moveTo(current + (target-current)/3);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function moveTo(x)
{
	current = x;

	/* do stuff with the images div */
	var padding_left = document.getElementById("imageflow").offsetLeft;
	var div = document.getElementById("images");
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var biggest = width * 0.5;

	/* zIndex is the z-index in css = order of the layers (here images) */
	var zIndex = div.childNodes.length;

	for (index = 0; index < div.childNodes.length; index++)
	{
		var image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			var z = Math.sqrt(10000 + x * x)+100;
			var xs = x / z * size + size;

			var gna = 100 / z * biggest;

			if((image.width) > (image.height))
			{
				image.style.left = xs - 67 / z * biggest + padding_left +"px";
				image.style.height = gna + "px";
				image.style.width = "";
			}
			else
			{
				image.style.left = xs - 50 / z * biggest + padding_left + "px";
				image.style.width = gna + "px";
				image.style.height = "";
			}
		
			image.style.top = (width * 0.35 - image.height) + top + "px";
			image.style.zIndex = zIndex;
			if ( x < 0 )
			{
				zIndex++;
			}
			else
			{
				zIndex = zIndex -1;
			}
			x += 150;
		}
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.zIndex = 100;

	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;

	/* Call subFunction */
	moveTo(current);
}

Refactorings

No refactoring yet !

Bfec5f7d1a4aaafc5a2451be8c42d26a

macournoyer

October 25, 2007, October 25, 2007 15:49, permalink

No rating. Login to rate!

WOW! that's some nice effects, really impressive!
Indeed it does not work in Safari on Mac

6b5a68d41436ce28831a0e0ca6bcd124

Etandrib

October 26, 2007, October 26, 2007 20:15, permalink

No rating. Login to rate!

I'm using safari v3 and it works just as it does in Camino. Performance isn't that great but hey it is CoverFlow in the browser. Pretty amazing JS. I don't have any ideas on refactoring.

Ce6f4f50611af8a1a964c3cdd3edd004

admiralquade

November 4, 2007, November 04, 2007 20:38, permalink

No rating. Login to rate!

I made some changes on it that slightly improved the performance. The biggest improvement has been achieved by putting the image.height/image.width calls in variables, instead of recalling them two times within the slave. I also changed the if/else to a switch/case (no idea if this improved anything ;D). And I defined the variables used inside the for-slave as global variables. Those were lokal variables before an redefined on each loop... perhaps this has improved something?! And I added a dynamically generated (server sided PHP) reflection to the images: http://imageflow.finnrudolph.de/

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
/* Set some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";
var img_h = 0;
var img_w = 0;
var img_percent = 0;
var z = 0;
var xs = 0;
var image = 0;
var new_img_h = 0;
var new_img_top = 0;

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

/* Get width of the images div container */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	if (target < current-1 || target > current+1)
	{
		moveTo(current + (target-current)/3);
		window.setTimeout(step, 50);
		timer = 1;
	}
	else
	{
		timer = 0;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function moveTo(x)
{
	current = x;

	/* do stuff with the images div */
	var padding_left = document.getElementById("imageflow").offsetLeft;
	var div = document.getElementById("images");
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var max = div.childNodes.length;
	var zIndex = max;

	for (index = 0; index < max; index++)
	{
		image = div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			z = Math.sqrt(10000 + x * x)+100;
			xs = x / z * size + size;
			
			/* Get current image properties */
			img_h = image.height;
			img_w = image.width;
			
			/* Check source image format. Get image height minus reflection height! */
			switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
			{
				/* Landscape format */
				case true:
					img_percent = 118;
					break;

				/* Portrait and square format */
				default:
					img_percent = 100;
					break;
			}
			
			/* Process new image height and top spacing */
			new_img_h = (img_h / img_w * img_percent) / z * size;
			new_img_top = (width * 0.35 - new_img_h) + top + ((new_img_h / (reflection_p + 1)) * reflection_p);

			/* Set new image properties */
			image.style.left = xs - (img_percent / 2) / z * size + padding_left + "px";
			image.style.height = new_img_h + "px";
			image.style.width= "";
			image.style.top = new_img_top + "px";
			image.style.zIndex = zIndex;

			if ( x < 0 )
			{
				zIndex++;
			}
			else
			{
				zIndex = zIndex -1;
			}
			x += 150;
		}
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.width = width + "px";
	captionTarget.style.zIndex = 10000;
	
	/* Call subFunction */
	moveTo(current);

	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}
Avatar

Carlos

November 5, 2007, November 05, 2007 00:48, permalink

No rating. Login to rate!

It doesn't work on Firefox over Linux.

Avatar

Finn

November 5, 2007, November 05, 2007 07:35, permalink

No rating. Login to rate!

@ Carlos: Hmmm, I only tested on a machine running WindowsXP SP2: Firefox 2.0.0.9 = OK, Safari 3.0.3 = OK, InternetExplorer 7.0.5730.11 = OK, Opera
9.24 = OK... What exactly doesn't work on Firefox and which version do you run?

Ce6f4f50611af8a1a964c3cdd3edd004

admiralquade

November 6, 2007, November 06, 2007 00:47, permalink

No rating. Login to rate!

*phew* I implemented a improved JavaScript Implementation of a Duff's Device Loop. That was kind of tricky... At this moment i couldn't think of anything else to improve. Now the main limiting factor should be the rendering engine of the browser. The speed scales in relation to the image quality of resized images: IE is fast, but the resized images look messy, Opera and Safari do a way better job, but are therefore somewhat slower... This version is testing only at the moment, you can check it out here: http://tinyurl.com/2ywabh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
/* Define some variables */
var current = 0;
var target = 0;
var timer = 0;
var captionId = "i1";
var captionTarget = "";
var img_h = 0;
var img_w = 0;
var img_percent = 0;
var z = 0;
var xs = 0;
var image = 0;
var new_img_h = 0;
var new_img_top = 0;
var x = 0;

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

/* Get width of the images div container */
function windowWidth()
{
	var width = document.getElementById("images").offsetWidth;
	return width;
}

function step()
{
	
	switch (target < current-1 || target > current+1) 
	{
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			break;
	}
}

function glideTo(x, newCaptionId)
{
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	captionId = newCaptionId;
	var caption = document.getElementById(captionId);
	captionTarget.innerHTML = caption.innerHTML;
}


function duff(index, x, left, top, width, size, zIndex){

	image = div.childNodes.item(index);
	if (image.nodeType == 1)
	{

		z = Math.sqrt(10000 + x * x)+100;
		xs = x / z * size + size;
			
		/* Get current image properties */
		img_h = image.height;
		img_w = image.width;
			
		/* Check source image format. Get image height minus reflection height! */
		switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
		{
			/* Landscape format */
			case true:
				img_percent = 118;
				break;

			/* Portrait and square format */
			default:
				img_percent = 100;
				break;
		}
			
		/* Process new image height and top spacing */
		new_img_h = (img_h / img_w * img_percent) / z * size;
		new_img_top = (width * 0.35 - new_img_h) + top + ((new_img_h / (reflection_p + 1)) * reflection_p);

		/* Set new image properties */
		image.style.left = xs - (img_percent / 2) / z * size + left + "px";
		image.style.height = new_img_h + "px";
		image.style.top = new_img_top + "px";

		/* Set image layer through zIndex */
		switch ( x < 0) 
		{
			case true:
				zIndex = zIndex + index;
				break;

			default:
				zIndex = zIndex - index;
				break;
		}
		image.style.zIndex = zIndex;

		x = x + 150;
	}
	return x;
}

function moveTo(x)
{
	current = x;
	div = document.getElementById("images");

	/* do stuff with the images div */
	var left = document.getElementById("imageflow").offsetLeft;
	var top = div.offsetTop;
	var width = windowWidth();
	var size = width * 0.5;
	var iterations = div.childNodes.length;

	/* Duff's Device - JavaScript implementation
	   http://www.websiteoptimization.com/speed/10/10-18.txt */

	var index=0;
	var n = iterations % 8;

	if (n>0) {
		do 
		{
			x=duff(index++, x, left, top, width, size, iterations);
		}
		while (--n);
	}
	n = parseInt(iterations / 8);
	if (n>0) {
		do 
		{
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
			x=duff(index++, x, left, top, width, size, iterations);
		}
		while (--n);
	}
}

/* Main Function */
function refresh()
{
	var width = windowWidth();
	var height = width * 0.35;
	var images = document.getElementById("images");
	images.style.height = height + "px";

	/* Text on top through zIndex */
	captionTarget = document.getElementById("captionTarget");
	captionTarget.style.top = images.offsetTop + height + "px";
	captionTarget.style.width = width + "px";
	captionTarget.innerHTML = document.getElementById(captionId).innerHTML;
	
	/* Call subFunction */
	moveTo(current);
}
8a15477cb63a2915d4e2172c4e2a299c

Michael Perry

November 6, 2007, November 06, 2007 12:19, permalink

No rating. Login to rate!

This might offer a slight improvement over the initial remainder loop. Please measure to be sure. The optimization will probably get lost among all of the image resizing.

(WARNING: untested code)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var count = iterations;

while (count > 0)
{
  switch (count % 8)
  {
    case 0:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 7:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 6:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 5:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 4:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 3:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 2:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
    case 1:
      x=duff(index++, x, left, top, width, size, iterations);
      --count;
  }
}
Ce6f4f50611af8a1a964c3cdd3edd004

admiralquade

November 7, 2007, November 07, 2007 16:32, permalink

No rating. Login to rate!

Okay... I cached document objects and other stuff, that only has to run once in global variables. I also cached correct node type indices in an array... I think there is no more to improve on this one. The main bottleneck is definitely the render engine of the browser. Fastest is Firefox 2.0.0.9 and slowest is Opera 9.24... Try it by yourself: http://imageflow.finnrudolph.de/

It runs on a Mac with the LATEST version of Safari... I tried ;D

Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
/* Define global variables */
var caption_id = "i1";
var new_caption_id = "";
var current = 0;
var target = 0;
var timer = 0;
var array_images = new Array();

/* This variable must be changed to the used reflection image height in % of the source image */
var reflection_p = 0.5;

function step()
{
	switch (target < current-1 || target > current+1) 
	{
		case true:
			moveTo(current + (target-current)/3);
			window.setTimeout(step, 50);
			timer = 1;
			break;

		default:
			timer = 0;
			break;
	}
}

function glideTo(x, new_caption_id)
{	
	/* Animate gliding to new x position */
	target = x;
	if (timer == 0)
	{
		window.setTimeout(step, 50);
		timer = 1;
	}

	/* Display new caption */
	caption_id = new_caption_id;
	caption = document.getElementById(caption_id)
	if (caption) caption_div.innerHTML = caption.innerHTML;
}

function moveTo(x)
{
	current = x;
	var zIndex = max;
	
	/* Loop */
	for (var index = 0; index < max; index++)
	{ 
		var image = img_div.childNodes.item(array_images[index]);
		var z = Math.sqrt(10000 + x * x)+100;
		var xs = x / z * size + size;
		
		/* Get current image properties */
		var img_h = image.height;
		var img_w = image.width;
		
		/* Check source image format. Get image height minus reflection height! */
		switch ((img_w + 1) > (img_h / (reflection_p + 1))) 
		{
			/* Landscape format */
			case true:
				var img_percent = 118;
				break;

			/* Portrait and square format */
			default:
				var img_percent = 100;
				break;
		}
		
		/* Process new image height and top spacing */
		var new_img_h = (img_h / img_w * img_percent) / z * size;
		var new_img_top = (images_width * 0.33 - new_img_h) + images_top + ((new_img_h / (reflection_p + 1)) * reflection_p);

		/* Set new image properties */
		image.style.left = xs - (img_percent / 2) / z * size + imageflow_left + "px";
		image.style.height = new_img_h + "px";
		image.style.width= "";
		image.style.top = new_img_top + "px";

		/* Set image layer through zIndex */
		switch ( x < 0) 
		{
			case true:
				zIndex++;
				break;

			default:
				zIndex = zIndex -1;
				break;
		}
		image.style.zIndex = zIndex;

		x += 150;
	}
}

/* Main function */
function refresh()
{
	/* Cache document objects in global script variables */
	img_div = document.getElementById("images");
	caption_div = document.getElementById("captions");
	
	/* Change images div properties */
	images_width = img_div.offsetWidth;
	var images_height = images_width * 0.33;
	img_div.style.height = images_height + "px";

	/* Change captions div properties */
	caption_div.style.top = img_div.offsetTop + images_height + "px";
	caption_div.style.width = images_width + "px";
	caption_div.innerHTML = document.getElementById(caption_id).innerHTML;
	
	/* Cache global variables, that only change on refresh */
	imageflow_left = document.getElementById("imageflow").offsetLeft;
	images_top = img_div.offsetTop;
	size = images_width * 0.5;
	max = img_div.childNodes.length;
	
	/* Cache correct node type indices in an array */
	var count=0;
	for (var index = 0; index < max; index++)
	{ 
		var image = img_div.childNodes.item(index);
		if (image.nodeType == 1)
		{
			array_images[count] = index;
			count++;
		}
	}
	max = array_images.length;

	/* Display images in current order */
	moveTo(current);
}

/* Show/hide functions */
function show(id) {
	var element = document.getElementById(id);
	element.style.visibility = "visible";
}
function hide(id) {
	var element = document.getElementById(id);
	element.style.visibility = "hidden";
}

/* Hide loading div and show the images div */
window.onload = function() {
	hide('loading');
	show('images');
	refresh();
}

window.onresize = refresh;

/* JavaScript mouse wheel support */
function handle(delta) {

	var caption_id_int = caption_id.substr(1);
	caption_id_int = parseInt(caption_id_int);

	switch (delta > 0) 
	{
	case true:
		if(target != 0)
		{
			target = target + 150;
			new_caption_id = 'i' + (caption_id_int - 1);
		}
		break;

	default:
		if(caption_id_int < max)
		{
			target = target - 150;
			new_caption_id = 'i' + (caption_id_int + 1);
			break;
		}
	}
	glideTo(target, new_caption_id);
}

/* JavaScript mouse wheel support */
function wheel(event){
	var delta = 0;
	if (!event) event = window.event;
	if (event.wheelDelta) {
		delta = event.wheelDelta/120; 
	} else if (event.detail) {
		delta = -event.detail/3;
	}
	if (delta)
		handle(delta);
        if (event.preventDefault)
                event.preventDefault();
        event.returnValue = false;
}

/* Initialization code */
if (window.addEventListener)
	window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
648916869533f005e0ef8ba994fd2c5e

Daniel

November 12, 2007, November 12, 2007 01:21, permalink

No rating. Login to rate!

Hi

I was hoping that some one could help me with a project I am working on. I love imageflow. Thanks so much for all the hard work that has been done. I would like to make imagflow work with Videobox. Videobox is a script, which shows your videos in the page with an overlay. I think that the to together would be a very cool effect.

http://videobox-lb.sourceforge.net/

Any help very appreciated

Daniel

39b6611d493cd8f5e616ceac2b1ea608

Oli Griffiths

November 15, 2007, November 15, 2007 12:35, permalink

No rating. Login to rate!

Great script, but how can I make it so that the images are only scaled upto their maximum size to avoid stretching them above the max file size?

Thanks

Oli

Ce6f4f50611af8a1a964c3cdd3edd004

admiralquade

November 22, 2007, November 22, 2007 13:09, permalink

No rating. Login to rate!

@ Oli and Daniel: I think, that Refactor :my => 'code' is not the place, to discuss such questions. It's refactoring only ;D

There is a new Version available and you can simply drop me a line in my Shoutbox if you have technical questions on implementing ImageFlow into your application: http://shoutbox.finnrudolph.de/

And I currently work on a documentation of ImageFlow - Check it out: http://imageflowdocu.finnrudolph.de/

Finn

1a01c6b7a1470993eb7367094988833f

kingistheone

March 20, 2008, March 20, 2008 15:51, permalink

No rating. Login to rate!

ImageFlow is the coolist effect on the web. However, I'm having a hard time adding basic rollover navigation script to site with the imageflow effect. Please advise

491bfda5b5b784babe1f5b5f18ea577f

k

April 11, 2008, April 11, 2008 13:44, permalink

No rating. Login to rate!

You should change the JS so that the default image is one in the center - so there are images on either side of the center one to begin with.

1c7b2db5b23ca735680eaee72ab5fd6b

Stephen

December 23, 2008, December 23, 2008 20:02, permalink

No rating. Login to rate!

Do you think it would be possible to use this as a container for iFrames instead of images? I'm looking at the code now and I want to use it as a navigation system for my website, but I'm not sure where to begin with edits... it seems like calls to getElementById could refer to arbitrary files instead of images, but I see alot of places where this would break down. Thoughts?

927ff72e6a9f54ccc7b50c8fe60d4a6e

Alexander

January 18, 2010, January 18, 2010 18:29, permalink

No rating. Login to rate!

You might want to check out this implementation using jquery and applying real perspective to the images:
http://flow.momolog.info
Works with Chrome, Safari, Opera and Firefox, feedback is welcome!
Cheers, Alex

Avatar

bc

February 3, 2010, February 03, 2010 17:19, permalink

No rating. Login to rate!

how do you put images into it?

2a018f8b16a3fe7273afde907c2e1bec

Kristian Mandrup

February 20, 2010, February 20, 2010 16:24, permalink

No rating. Login to rate!

It is a bit sad that the reflection is done using php. First, it requires round trips to the server. Second it requires PHP installed on the server. I would recommend using reflection.js (http://www.deensoft.com/lab/protoflow/) or reflex.js (http://www.netzgesta.de/reflex/) instead. A pure javascript solution, Much more portable and faster too I'm sure ;)

Your refactoring





Format Copy from initial code

or Cancel