Get source code

Walking Ape Demo

About this demo

This is a simple demo, showing the real-time reactivity of APE.

Which features are used?

  • Mootools

Study the source code

Check out the Client JavaScript, HTML and ServerSide JavaScript source code of this demo by reading the following :

<link rel="stylesheet" type="text/css" href="demos/walk/css/style.css" media="screen" title="Normal" />
<script type="text/javaScript" src="Clients/mootools-core.js"></script>
<script type="text/javaScript" src="Clients/MooTools.js"></script>
<script type="text/javaScript" src="Clients/config.js"></script>
<script type="text/javaScript" src="static/third/mootools-more-1.2.5.1.js"></script>
<script type="text/javaScript" src="demos/walk/js/home.js"></script>
<div id="content">
	<div class="content_box">
		<div id="frontdemo">
			<div id="first_tree">
				<img src="demos/walk/img/tree.gif" alt="" />
			</div>
			<div id="second_tree">
				<img src="demos/walk/img/tree2.gif" alt="" />
			</div>
		</div>
	</div>
</div>
<div id="master_container"></div>
<script type="text/javaScript">
	window.addEvent('domready', function() {
		var home = new APE.Home();
				home.load({
					'identifier': 'demohome',
					'channel': ['*twitter', 'demohome']
				});
	});
	var msg_next = " --»"
			var txt_input = "Type here to chat in real time!"
			var msn_talk = "Post a message on twitter with the hashtag #APE and see it appear in live!"
			var msn_msg = "I'am interactive, move your mouse here for more info!"
			var ape_talk = new Array(),
				ape_talk_alone = new Array();
								ape_talk.push("Hey there ! I\'m your live demo!");	
									ape_talk.push("Click to move me around here!");	
									ape_talk.push("BTW! The other apes are real folks around the world!");	
									ape_talk.push("Also, drop some words below to chat in real time!");	
									ape_talk.push("Hope you\'ll enjoy!");	
									ape_talk_alone.push("Hey there ! I\'m your live demo!");	
									ape_talk_alone.push("Click to move me around here!");	
									ape_talk_alone.push("BTW! The other apes are real folks around the world!");	
									ape_talk_alone.push("Also, drop some words below to chat in real time!");	
									ape_talk_alone.push("Hope you\'ll enjoy!");	
</script>
home.js
/*
Script: APNG.js
	Animated PNGs, background-image or src based. If background-image is used, background-position transitions are supported. Native APNG fallback for browsers that support it included.

	License:
		MIT-style license.

	Authors:
		Guillermo Rauch
*/

var APNG = new Class({

	Implements: [Options, Class.Occlude, Events],

	options: {
		property: 'src',
		axis: 'x',
		ext: '.png',
		frames: 5,
		endless: true,
		interval: 100,
		autoStart: true,
		startFrame: 1,
		preload: true,
		useNative: Browser.Engine.gecko19 || Browser.Engine.presto950,
		addFilter: Browser.Engine.trident3
	},

	initialize: function(element, options) {
		this.setOptions(options);
		this.element = $(element);
		if (this.occlude('apng')) return this.occluded;
		this.original = this.options.property == 'src' ? this.element.src : this.element.getStyle('background-image').replace(/url\((.*)\)/i, '$1');
		this.basename = this.original.substr(0, this.original.length - this.options.ext.length);
		if (this.options.useNative) {
			this.start = this.reset = this.pause = this.resume = this.cancel = $empty;
		} else {
			if (this.options.preload) this.preload();
			this.reset(!this.options.autoStart);
		}
	},

	setSrc: function(src, index) {
		if (this.options.property != 'background-position') {
			this.options.property == 'src' ? this.element.set('src', src) : this.element.setStyle('background-image', 'url(' + src + ')');
			if (this.options.addFilter) {
				this.element.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='crop')";
				this.setSrc(APNG.blankImage || '/blank.gif');
			}
		} else {
			var w = this.element['get' + (this.options.axis == 'x' ? 'Width' : 'Height')]();
			px = (index * w) - w;
			this.element.setStyle('background-position', (this.options.axis == 'x' ? -px + 'px 0' : '0 ' + px + 'px'));
		}
	},

	setFrame: function(index, pause) {
		if (!this.stoped) {
			this.current = index;
			var ext = this.options.ext;
			this.setSrc(index == 1 ? this.original : (this.basename + '-' + index + this.options.ext), index);
			if (!pause) this.start();
		}
	},

	preload: function() {
		if (!this.preloaded) {
			this.preloaded = true;
		}
	},

	start: function(anim) {
		var no_delay = false;
		if (anim) {
			this.current_anim = anim;
			this.current = anim[0].start;
			no_delay = true;
			this.stoped = false;
			this.current_anim_part = 0;
			this.current_anim_repeat = 0;
			this.current_anim_length = anim.length;
		}
		this.running = true;
		var delay = no_delay ? 0 : $type(this.options.interval) == 'array' ? this.options.interval[this.current - 1] : this.options.interval;
		var next = true;

		if (this.current_anim) {
			//End of anim part
			if (this.current_anim[this.current_anim_part] && this.current == this.current_anim[this.current_anim_part].end) {
				//Repeat?
				if (this.current_anim_repeat == this.current_anim[this.current_anim_part].repeat) { //No more repeat
					delay += this.current_anim[this.current_anim_part].delay;
					this.current_anim_part++;
					this.current_anim_repeat = 0;
					if (!this.current_anim[this.current_anim_part]) { //End of anim
						next = false;
					} else { //set this.current for next part
						this.current = this.current_anim[this.current_anim_part].start - 1;
					}
				} else { //Repeat again
					this.current_anim_repeat++;
					this.current = this.current_anim[this.current_anim_part].start - 1;
				}
			}
		}
		this.last_timer = this.timer;
		this.timer = (function(timer) {
			$clear(this.last_timer);
			if (next) {
				this.setFrame(this.current + 1);
			} else {
				(this.options.endless ? this.reset() : this.pause());
			}
		}).delay(delay, this);
	},

	reset: function(pause) {
		this.current_anim_part = 0;
		if (this.running) this.pause();
		this.setFrame(this.options.startFrame, pause);
	},
	reset_anim: function() {
		this.current_anim = null;
		this.current_anim_part = 0;
		this.current_anim_length = 0;
		this.current_anim_repeat = 0;
		this.current = 0;
		this.stoped = true;
	},
	stop: function(pause) {
		this.pause();
		this.reset_anim();
	},
	pause: function() {
		$clear(this.timer);
		$clear(this.last_timer);
		this.running = false;
		if (!this.options.endless) {
			this.reset_anim();
			this.fireEvent('complete');
		}
	},

	resume: function() {
		if (!this.running) this.start();
	},

	cancel: function() {
		this.pause();
		this.reset(true);
	}

});
var ape_client, ape_home;
APE.Home = new Class({

	Extends: APE.Client,

	initialize: function() {
		this.fps = 50;
		this.max_txt = 60;
		this.ape = null;
		this.max_user = 20;
		this.coef = 250;
		this.pipe = null;

		this.els = {};
		this.msn_user = {
			ape: $('first_tree')
		};
		this.twitter_user = {
			ape: $('second_tree')
		};
		this.els.container = $('frontdemo');
		this.els.container_top = new Element('div').inject(this.els.container, 'before');
		this.els.container_pos = this.els.container.getCoordinates();
		(function() {
			this.els.container_pos = this.els.container.getCoordinates();
		}.bind(this)).delay(5);

		window.addEvent('resize', function() {
			this.els.container_pos = this.els.container.getCoordinates();
		}.bind(this));

		this.addEvent('load', function() {
			this.core.start({
				"home": true,
				"name": this.rand_chars()
			})
		});
		this.onRaw('twitter', this.raw_twitter);
		this.onRaw('butterfly', this.raw_butterfly);
		this.onRaw('data', function(data, pipe) {
			this.write_message(data.data.msg, data.data.from);
		});
		this.addEvent('init', function() {
			loading_el.destroy()
		});
		this.onRaw('positions', this.raw_positions);
		this.onCmd('send', this.cmd_send);
		this.onCmd('setpos', this.save_user_pos);
		this.onError('004', this.reset);
		this.addEvent('userLeft', this.remove_ape);
		this.addEvent('multiPipeCreate', function(pipe) {
			if (pipe.name.contains('demohome')) {
				this.pipe = pipe;
				this.add_chat();
				this.els.container.addEvent('click', this.set_coord.bindWithEvent(this));
			} else if (pipe.name == '*twitter') {
				this.twitter = pipe;
			}
		});
		this.addEvent('userJoin', this.create_ape);
	},
	rand: function(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	},
	show_tweet: function(tweet) {
		var txt = decodeURIComponent(tweet.text);
		var els = this.write_message(txt, this.twitter_user, true, {
			'no_remove': true,
			'style': 'msg_twitter'
		});
		var w = els.cnt.getScrollSize().x;
		els.el.setStyle('margin-left', -w);

		(function() {
			if (Browser.Engine.trident) {
				new Fx.Morph(els.real_cnt, {
					duration: 2000
				}).start({
					'opacity': 0
				});
			}
			var mtop = this.rand(30, 90);
			new Fx.Morph(els.el, {
				transition: Fx.Transitions.linear,
				duration: 2000
			}).start({
				'left': -this.rand(500, 1000),
				'top': (Browser.Engine.trident && !document.querySelectorAll) ? mtop - 30 : mtop,
				'opacity': Browser.Engine.trident ? 1 : 0
			}).addEvent('complete', function() {
				this.destroy();
			}.bind(els.el));
		}.delay(200, this));
	},
	save_user_pos: function(data, pipe) {
		pipe.getUser(this.user.pubid).properties.x = data.x;
	},
	save_pipe: function(pipe) {
		pipe.sessions = {};
	},
	cmd_send: function(cmd, pipe) {
		this.write_message(cmd.msg, this.user);
	},
	raw_twitter: function(res) {
		this.show_tweet.delay($random(100, 600), this, res.data);
	},
	raw_butterfly: function(res) {
		this.write_message(decodeURIComponent(res.data.user + ' : ' + res.data.text), this.msn_user, false, {
			'style': 'msg_msn'
		});
	},
	write_message: function(message, sender, no_hide, options) {
		if (!options) options = {};
		if (!no_hide) no_hide = false;
		//Define sender
		sender = this.pipe.getUser(sender.pubid) || sender;
		var left = sender.ape.getCoordinates().left;

		//destroy old message
		if (!options.no_remove) sender.ape.getElements('.ape_message_container').destroy();

		//Create message container
		var msg = new Element('div', {
			'class': 'ape_message_container ' + options.style
		});
		if (Browser.Engine.trident && !document.querySelectorAll) msg.setStyle('margin-top', 0);
		var left = new Element('div', {
			'class': 'msg_left'
		}).inject(msg);
		var cnt = new Element('div', {
			'class': 'msg'
		}).inject(left);
		message = decodeURIComponent(message);
		var right = new Element('div', {
			'class': 'msg_right',
			'text': message.substring(0, this.max_txt)
		}).inject(cnt);

		//Inject message
		msg.inject(sender.ape);
		if (message.toLowerCase().contains('houba')) {
			this.set_houba(sender);
		}

		//Show message
		new Fx.Morph(cnt, {
			'duration': 200
		}).start({
			'opacity': 1
		});

		//Delete old message
		if (!no_hide) {
			(function(el) {
				$(el).morph({
					'opacity': '0'
				});
				(function() {
					$(this).destroy();
				}).delay(300, el);
			}).delay(5000, this, msg);
		}
		return {
			'el': msg,
			'cnt': right,
			'real_cnt': cnt,
			'left': left
		};
	},
	limit_text: function(ev) {
		var input = this.els.input;
		if (input.get('value').length > this.max_txt) {
			input.set('value', input.get('value').substring(0, this.max_txt));
		}
	},
	add_chat: function() {
		var form = null;

		/*
		//Twitter API changed. This doesn't work anymore :(
		this.msn_talk = new Element('div', {
			'styles': {
				'opacity': 0
			},
			'html': msn_talk,
			'class': 'msn_talk'
		}).inject(this.msn_user.ape);

		this.msn_user.ape.addEvent('mouseover', function() {
			this.msn_talk.morph({
				'opacity': 1
			});
		}.bind(this));
		(function() {
			this.write_message(msn_msg, this.msn_user, false, {
				'style': 'msg_msn'
			});
		}.delay(1500, this));
		this.msn_user.ape.addEvent('mouseout', function() {
			this.msn_talk.morph({
				'opacity': 0
			});
		}.bind(this));*/

		this.els.chat_box_home = new Element('div', {
			'class': 'chat_box_home'
		}).inject($('master_container'), 'before').morph({
			height: 16
		});
		//this.els.chat_box_home.store('fx',new Fx.Morph(this.els.chat_box_home));
		form = new Element('form').inject(this.els.chat_box_home);

		this.els.input = new Element('input', {
			'type': 'text',
			'value': txt_input,
			'class': 'text autoclear'
		}).inject(form);
		add_autoclear(this.els.input);

		this.els.input.addEvent('keydown', this.limit_text.bindWithEvent(this));
		this.els.input.addEvent('keyup', this.limit_text.bindWithEvent(this));
		new Element('input', {
			'type': 'submit',
			'class': 'submit',
			'value': ''
		}).inject(form);

		form.addEvent('submit', function(ev) {
			ev.stop();
			var val = this.els.input.get('value');
			if (val.trim() != '') {
				this.pipe.send(val);
				this.els.input.set('value', '');
			}
		}.bind(this));
	},
	raw_positions: function(raw, pipe) {
		var user = pipe.getUser(raw.data.from.pubid);
		if (raw.data.x) {
			this.move_ape(user, raw.data.x, 0);
		}
	},
	set_coord: function(ev, user) {
		if (!user) user = this.user;
		var new_pos = this.coord_to_relative(ev.page.x) - 35;
		this.move_ape(user, new_pos);
		this.pipe.request.send('SETPOS', {
			'x': new_pos,
			'y': 0
		});
	},
	create_ape: function(user, pipe) {
		if (pipe.name.contains('demohome')) {
			user.ape_container = new Element('div', {
				'class': 'ape_container',
				'styles': {
					'opacity': 0
				}
			});
			user.ape = new Element('div', {
				'class': 'ape'
			}).inject(user.ape_container);
			user.ape_anim = new APNG(user.ape, {
				autoStart: false,
				useNative: false,
				frames: 20,
				endless: true,
				property: 'background-position',
				axis: 'x',
				interval: [1500, 200, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100]
			});

			user.ape_anim.addEvent('complete', function(user) {
				this.set_idle(user);
			}.bind(this, user));
			user.tie = new Element('div', {
				'styles': {
					'background-color': 'rgb(' + this.user_color(user.properties.name) + ')'
				},
				'class': 'ape_tie'
			}).inject(user.ape_container);
			var fx = new Fx.Morph(user.ape_container, {
				duration: 4000,
				transition: Fx.Transitions.linear
			});
			user.ape_container.store('fx', fx);
			fx.addEvent('complete', this.set_idle.bind(this, user));
			this.set_ape_pos(user);
			this.set_idle(user);
			user.ape_container.inject('frontdemo', 'top').morph({
				'opacity': 1
			});
			if (user.pubid == this.core.getPubid()) { //It's Meeeeeeee
				this.user = user;
				this.start_text();
				if (!this.core.options.restore) {
					(function() {
						this.set_coord({
							'page': {
								'x': this.rand(150, 780) + this.els.container_pos.left
							}
						});
					}.delay(200, this));
				}
			}
		}
	},
	go_left: function(user) {
		this.reset_user(user);
		user.ape_container.addClass('go_left');
		user.ape_anim.start([{
			'start': 5,
			'end': 12,
			'delay': 0
		}]);
	},
	go_right: function(user) {
		this.reset_user(user);
		user.ape_container.addClass('go_right');
		user.ape_anim.start([{
			'start': 13,
			'end': 20,
			'delay': 0
		}]);
	},
	rand: function(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	},
	reset_user: function(user) {
		user.ape_container.removeClass('go_left');
		user.ape_container.removeClass('go_right');
		user.ape_anim.setFrame(1);
		user.ape_anim.stop();
	},
	set_houba: function(user) {
		this.reset_user(user);
		user.ape_anim.options.endless = false;
		user.ape_anim.start([{
			'start': 3,
			'end': 4,
			'delay': 0,
			'repeat': 1
		}, {
			'start': 1,
			'end': 1,
			'repeat': 0,
			'delay': 0
		}, ]);
	},
	set_idle: function(user) {
		user.ape_anim.options.endless = true;
		this.reset_user(user);
		user.ape_anim.start([{
			'start': 1,
			'end': 1,
			'repeat': 0,
			'delay': this.rand(0, 1000)
		}, {
			'start': 1,
			'end': 2,
			'delay': 0,
			'repeat': this.rand(3, 5)
		}, {
			'start': 1,
			'end': 1,
			'delay': 2500,
			'repeat': 0
		}, {
			'start': 3,
			'end': 4,
			'delay': 0,
			'repeat': 1
		}, {
			'start': 1,
			'end': 1,
			'repeat': 0,
			'delay': 3000
		}]);
	},
	next_link: function(el) {
		new Element('a', {
			'text': msg_next
		}).inject(el.cnt);
		el.el.addEvent('mousedown', function(ev) {
			ev.stop();
			this.next_text();
		}.bind(this));
	},
	start_text: function() {
		if (!this.text_i && !this.core.options.restore) {
			this.text_i = 0;
			if (this.pipe.users.getLength() > this.max_user) {
				this.text = ape_talk;
			} else {
				this.text = ape_talk_alone;
			}
			this.next_text();
		}
	},
	next_text: function() {
		var no_hide = true;
		if (this.text_i == this.text.length - 1) {
			no_hide = false;
		}
		var els = this.write_message(this.text[this.text_i], this.user, no_hide);
		if (no_hide) {
			this.next_link(els);
		}
		this.text_i++;
	},
	move_ape: function(user, x) {
		//Get some info
		var ape = user.ape_container,
			old_pos = this.coord_to_relative(ape.getCoordinates().left),
			new_pos = this.check_pos(x),
			fx = ape.retrieve('fx');

		//Stop event
		fx.cancel();

		//Get way
		if (new_pos < old_pos) { //left
			this.go_left(user);
		} else { //right
			this.go_right(user);
		}
		//Set time
		fx.options.duration = (Math.abs(new_pos - old_pos) / this.fps) * this.coef;

		//Moooooveee
		fx.start({
			'margin-left': new_pos
		});

	},
	user_color: function(nickname) {
		var color = new Array(0, 0, 0);
		var i = 0;
		while (i < 3 && i < nickname.length) {
			//Transformation du code ascii du caractère en code couleur
			color[i] = Math.abs(Math.round(((nickname.charCodeAt(i) - 97) / 26) * 200 + 10));
			i++;
		}
		return color.join(',');
	},
	check_pos: function(x) {
		if (!x) return 63;
		else if (x < 63) return 63;
		else if (x > 790) return 790;
		return x;
	},
	set_ape_pos: function(user) {
		user.ape_container.setStyle('margin-left', this.check_pos(user.properties.x) + 'px');
	},
	coord_to_relative: function(x) {
		return x - this.els.container_pos.left;
	},
	rand_chars: function() {
		var keylist = "abcdefghijklmnopqrstuvwxyz"
		var temp = ''
		var plength = 5;
		for (i = 0; i < plength; i++) {
			temp += keylist.charAt(Math.floor(Math.random() * keylist.length))
		}
		return temp;
	},
	reset: function() {
		this.core.clearSession();
		this.els.container.getElements('.ape_container').destroy();
		if (this.els.chat_box_home) this.els.chat_box_home.destroy();
		//if(this.els.msn_help) this.els.msn_help.destroy();
		this.els.container.removeEvents('click');
		this.core.initialize(this.core.options);
	},
	remove_ape: function(user, pipe) {
		user.ape_container.destroy();
	}
});
var loading_el;
var weeTips = new Class({

	els: {},
	options: {},

	initialize: function(selector, options) {
		this.els.tip = Element('div', {
			'styles': {
				'opacity': '0.8',
				'z-index': 999,
				'position': 'absolute'
			},
			'class': 'tip-wrap'
		}).inject(document.body);
		this.options.offset = {
			'x': 0,
			'y': 0
		}
		var tips = $$(selector);
		tips.each(function(el) {
			el.store('title', el.get('title'));
			el.removeAttribute('title');
		});
		this.els.tip.addEvent('mouseenter', function(ev) {
			$(ev.target).setStyle('display', 'none');
		});
		tips.addEvents({
			'mouseenter': function(ev) {
				var el = $(ev.target);
				this.els.tip.inject(el);
				var text = el.retrieve('title');
				this.els.tip.set('text', text);
				var pos = el.getPosition();
				this.els.tip.setStyle('display', 'block');
				var size = this.els.tip.getSize();
				var elx = (pos.x);
				var ely = (pos.y + 20);

				this.els.tip.setStyles({
					'left': elx,
					'top': ely
				});
			}.bind(this),
			'mouseleave': function() {
				this.els.tip.setStyle('display', 'none');
			}.bind(this)
		});
	}
});
window.addEvent('domready', function() {
	loading_el = new Element('div', {
		'text': 'Your APE is coming...',
		'id': 'home_loading'
	}).inject('frontdemo');
	new weeTips('#home_bullets li');
});


var autoClearValues = new Array();
function add_autoclear(el) {
	autoClearValues[el.get('id')] = el.get('value');
	el.addEvent('focus', function(ev) {
		var el = $(ev.target);
		if (el.get('value') == autoClearValues[el.get('id')]) {
			el.set('value', '');
		}
	});
	el.addEvent('blur', function(ev) {
		var el = $(ev.target);
		if (el.get('value') == '') {
			el.set('value', autoClearValues[el.get('id')]);
		}
	});
}
style.css
#content {
	background-color:#e5eef5;
	font-family:'Verdana',"Lucida Grande",'Arial','sans-serif';
	font-size:11px;
	color:#444749;
}

.content_box {
	width:903px;
	margin:0 auto;
}

#frontdemo {
	margin-top:-10px;
	width:902px;
	height:119px;
	cursor:pointer;
	position:relative;
}

#first_tree,#second_tree {
	margin-top:12px;
	position:absolute;
}

#second_tree {
	margin-left:835px;
}

.ape_container {
	width:65px;
	height:55px;
	position:absolute;
	margin-top:64px;
	z-index:3;
}

.ape_container .ape {
	width:65px;
	height:55px;
	background-image:url(/demos/walk/img/pix_ape.gif);
	z-index:2;
	position:absolute;
}

.ape_container.go_right .ape_tie {
	height:25px;
	margin-left:34px;
}

.ape_container.go_left .ape_tie {
	height:26px;
	margin-left:21px;
}

.ape_tie {
	z-index:1;
	position:absolute;
	width:10px;
	height:29px;
	margin-left:28px;
	margin-top:25px;
}

.ape_message_container {
	margin-left:35px;
	margin-top:-25px;
	position:absolute;
	white-space:nowrap;
	width:auto;
}

.msg_twitter,.msg_msn {
	top:30px;
	left:14px;
}

.msg_msn .msg_left,.msg_msn .msg_right,.msg_msn .msg,.msg_twitter .msg_left,.msg_twitter .msg_right,.msg_twitter .msg {
	height:18px;
	line-height:15px;
}

.msg_twitter .msg_left {
	background-image:url(/demos/walk/img/bubble_rightrb.png);
	background-image:none;
	width:7px;
}

.msg_twitter .msg_right {
	background-image:url(/demos/walk/img/bubble_leftrb.png);
}

.msg_twitter .msg {
	background:url(/demos/walk/img/bubble_midb.png);
	margin-left:7px;
}

.msg_msn .msg_left {
	background-image:url(/demos/walk/img/bubble_leftb.png);
}

.msg_msn .msg_right {
	background-image:url(/demos/walk/img/bubble_rightb.png);
}

.msg_msn .msg {
	background:url(/demos/walk/img/bubble_midb.png);
	margin-left:14px;
}

.msg_right,.msg_left,.msg {
	height:35px;
	float:left;
}

.msg_right a {
	cursor:pointer;
}

.msg_right {
	background:url(/demos/walk/img/bubble_right.png) no-repeat top right;
	padding-right:8px;
	float:right;
	margin-right:-7px;
}

.msg {
	background:url(/demos/walk/img/bubble_mid.png);
	line-height:24px;
	margin-left:8px;
}

.msg_left {
	background:url(/demos/walk/img/bubble_left.png);
	width:19px;
}

.msn_talk {
	position:absolute;
	margin-left:75px;
	background:#FFF;
	border:1px solid #dbdbdb;
	width:220px;
	padding:10px;
	margin-top:-105px;
	z-index:10;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}

.chat_box_home {
	width:500px;
	margin:auto;
	border-left:1px solid #cecece;
	border-right:1px solid #cecece;
	border-bottom:1px solid #cecece;
	color:#777;
	padding-bottom:3px;
	text-align:center;
	padding-top:5px;
	padding-bottom:6px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-bottom-right-radius:10px;
	background-color:#fafafa;
	height:0;
	overflow:hidden;
}

.chat_box_home .submit {
	border:none;
	width:34px;
	height:14px;
	background:url(/demos/walk/img/send_text.png);
	float:left;
	cursor:pointer;
}

.chat_box_home .text {
	background-color:#fafafa;
	width:440px;
	padding-left:10px;
	color:#777;
	border:none;
	float:left;
	margin-left:1px;
}

#home_loading {
	font-weight:700;
	margin-bottom:auto;
	margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	padding-top:55px;
	position:absolute;
	left:380px;
	width:150px;
}

.msn_talk {
	position:absolute;
	margin-left:75px;
	background:#FFF;
	border:1px solid #dbdbdb;
	width:220px;
	padding:10px;
	margin-top:-105px;
	z-index:10;
	-moz-border-radius-bottomleft:5px;
	-moz-border-radius-bottomright:5px;
	-moz-border-radius-topleft:5px;
	-moz-border-radius-topright:5px;
	-webkit-border-bottom-left-radius:5px;
	-webkit-border-bottom-right-radius:5px;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
}

Embed and share this demo

Share: