Archive for the ‘ JavaScript ’ Category

Prototype: Ajax Controller

To load Prototype and Scriptaculous object library:

<script src="../javascript/prototype.js" type="text/javascript" language="JavaScript"></script>
<script src="../javascript/scriptaculous.js" type="text/javascript" language="JavaScript"></script>

Now the Controller class and some lines to use it:

<script language="Javascript" type="text/javascript">
ajax_controller = Class.create();
ajax_controller.prototype = {
	initialize : function(url, target, name, parameters) {
		this.url = url;
		this.target = target;
		this.method = 'post';
		this.name = name;
		this.js_stop = name + '.stop()';
		this.parameters = 'STOP=' + this.js_stop + '&' + parameters;
 
		this.xml_Http_Object = null;
		this.running = false;
	},
	start : function() {
		if (this.xml_Http_Object == null) {
			this.xml_Http_Object = new Ajax.PeriodicalUpdater(this.target,
					this.url, {
						method : this.method,
						encoding : 'ISO-8859-1',
						parameters : this.parameters,
						onSuccess : this.success_handler,
						onInteractive : this.interactive_handler,
						onComplete : this.complete_handler,
						onLoading : this.loading_handler,
						onLoaded : this.loaded_handler,
						evalScripts : true,
						asynchronous : true,
						frequency : 0.8,
						decay : 0.1
					});
			this.running = true;
		} else if (!this.running) {
			this.xml_Http_Object.start();
			this.running = true;
		}
	},
	stop : function() {
		if ((this.xml_Http_Object != null) && (this.running)) {
			this.xml_Http_Object.stop();
			this.running = false;
		}
	},
	change_parameters : function(parameters) {
		this.stop();
		this.xml_Http_Object = null;
		this.parameters = 'STOP=' + this.js_stop + parameters;
		this.start();
	},
	success_handler : function(request) {
 
	},
	interactive_handler : function(request) {
 
	},
	complete_handler : function(request) {
 
	},
	loading_handler : function(request) {
 
	},
	loaded_handler : function(request) {
 
	}
}
 
var begin_date;
var end_date;
var my_controller = new ajax_controller('../include/stats_writer_response.php',
		'div_result_open', 'my_controller', 'date_de=' + $F('date_de')
				+ '&date_ah=' + $F('date_ah'));
 
Event.observe('sp_btn_start', 'click', start_me, false);
Event.observe('sp_btn_stop', 'click', stopp_me, false);
//Event.observe('toDate', 'click', toDate, false);
 
function start_me() {
	my_controller.start();
}
 
function stopp_me() {
	my_controller.stop();
}
 
function toDate() {
	my_controller.change_parameters('&begin_day=' + $F('begin_day')
			+ '&begin_month=' + $F('begin_month') + '&begin_year='
			+ $F('begin_year') + '&end_day=' + $F('end_day') + '&end_month='
			+ $F('end_month') + '&end_year=' + $F('end_year'));
}
</script>

ProgressBar div

This little snippet is to demonstrate how easy it is to insert and to control a progress bar in your html code:



Step: 


33 %

Resting 77% !!



Styles css:

<style>
.container {
	position: relative;
	height: 20px;
	width: 550px;
}
 
.bar-container {
	position: relative;
	float: left;
	height: 15px;
	width: 300px;
	border: solid 1px #AAA;
	background: #EEE;
	overlow: hidden;
}
 
.progress-bar {
	position: absolute;
	z-index:1;
	height: 100%;
	width: 33%;
	background: #F60;
}
 
.progress-label {
	position: absolute;
	z-index:2;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 11px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
 
.text-info {
	position: relative;
	float: left;
	height: 15px;
	width: 202px;
	left: 20px;
	font-size: 15px;
	font-family: Helvetica,Arial;
	font-weight: bold;
	padding-top: 1px;
}
</style>

The structure of the html elements:

<input type="button" value="less" onclick="doLess()"/>
<input type="button" value="more" onclick="doMore()"/>
Step:&nbsp;
<select id="stepper">
<option value="1">1</option>
<option value="2">2</option>
<option value="5">5</option>
<option value="10" selected="true">10</option>
<option value="20">20</option>
</select>
<br/>
<br/>
<div class="container">
	<div class="bar-container">
		<div class="progress-bar" id="progress_bar">
		</div>
		<div class="progress-label" id="progress_label">33 %
		</div>
	</div>
	<div class="text-info" id="text_info">Resting 77% !!
	</div>
</div>

The javascript to animate the progress bar:

initial_progress = 33;
stepper = 10;
document.getElementById('progress_bar').style.width = initial_progress + "%";
 
function actualizeStepper() {
	stepper = document.getElementById('stepper').value;
	stepper = parseInt(stepper);
}
 
function actualizeNumbers() {
	document.getElementById('progress_bar').style.width = initial_progress + "%";
	document.getElementById('progress_label').innerHTML = initial_progress + "%";
	document.getElementById('text_info').innerHTML = "Resting: " + initial_progress + "%!! ";
}
 
function doMore() {
	actualizeStepper();
	if ((initial_progress + stepper) <= 100) {
		initial_progress += stepper;
		actualizeNumbers();
	}
}
function doLess() {
	actualizeStepper();
	if ((initial_progress - stepper) >= 0) {
		initial_progress -= stepper;
		actualizeNumbers();
	}
}

Using Regular Expressions

 
function transform(text) {
 
 text=text.replace(/é/gi,"e");
 text=text.replace(/(\bla\b)|(\ble\b)|(\bles\b)|(\bde\b)|(\bdes\b)|(\bdu\b)|(\ba\b)|(l')|(d')/gi,"");
 text=text.replace(/\//gi," ");
 
 return text;
}

3.) replaces the french character “é” with a “e” for all occurences
4.) delete some french words
5.) delete the special character slash with a space

For further information to the RegEx I recommend:

Regular_expression wiki