Monthly Archives: April 2011

Javascript Autocomplete

Javascript Autocomplete

Javascript Autocomplete is a javascript that can give sugestion to the user when seraching value in the text area. Then user can chose among the given sugestions. Because we also use database then we will need Jquery and php to access the data.

Lets just jump to the Javascript Autocomplete code.

First the HTML one (index.html):

<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="engine.js"></script>
<input type="hidden" id="choose" value="0" />
<div id="ch0" style="display:none"></div>
<input type="text" onblur="check(this.value)" id="search" onkeyup="check(this.value);"/>
<div id="result"></div>

Second the Javascript code (engine.js):

function check(val){
	if(event.keyCode == 40||event.keyCode == 38){
		choose(event.keyCode);
	}else{
		$.post("test.php",{val:val} , function(data){document.getElementById("result").innerHTML =data;});
		document.getElementById('choose').value = 0;
	}
}

function choose(evnt){
	chs = document.getElementById('choose').value;
	chs = parseInt(chs);
	if(evnt == 40){
		chs2 = chs+1;
	}else{
		chs2 = chs-1;
		if(chs < 0)chs = 0;
	}
	selc = document.getElementById('ch'+chs2);
	selcold = document.getElementById('ch'+chs);
	if(selc){
		selc.style.backgroundColor = "blue";
		document.getElementById('search').value = selc.innerHTML;
		selcold.style.backgroundColor = "white";
	}
	else{
		chs2=chs;
	}
	document.getElementById('choose').value = chs2;
}

Last is the php file (test.php)

$link = mysql_connect('localhost', 'root', '');
if (!$link) {
    die();
}
$dbname = 'member';
mysql_select_db($dbname);

$val = $_POST['val'];
if($val == '') break;
$q = "select name from client where name like '$val%'";
$e = mysql_query($q);
$i=0;
while($r = mysql_fetch_array($e)){
	$i++;
	echo '<div id="ch'.$i.'">'.$r['name'].'</div>';
}

When you type something in the textbox, then Javascript Autocomplete will search posible match for the inputed value. When you pres the down/up button, the Javascript Autocomplete will navigate to the sugestions.

 

http://septiadi.com/2011/04/28/javascript-autocomplete/

Advertisements

Javascript Detecting Screen Resolution

Javascript Detecting Screen Resolution

In this post, I want to share about Javascript Detecting Screen Resolution. In this case you can detect user screen resolution. Javascript Detecting Screen Resolution will be very usefull to help you in designing the layout of your page.

Lets just jump to Javascript Detecting Screen Resolution.

<script language="javascript">
function detect(){
	alert('Width='+screen.width+' \n Height='+screen.height);
}
</script>
<input type="button" value="Detect Resolution" onclick="detect()" />

Indeed, Javascript Detecting Screen Resolution is prety simple code, however it will be powerfull if you combine it with other code while desinging your page.

Just copy the above code into the body of your page, and Javascript Detecting Screen Resolution will be working.

http://septiadi.com/2011/04/27/javascript-detecting-screen-resolution/


Disable Right Click and Selection

Disable Right Click and Selection

Disable Right Click and Selection is very useful for you to protect the content of your website. By using this, the visitor cannot select an area of your page and right click on it. Disable Right Click and Selection is realy a simple code, but indeed it is very powerfull.

Lets just jump to the code for disable right click:

var msg="Right Click has been disabled!";//Give alert here
document.oncontextmenu=new Function("alert(msg);return false");//give alert
//document.oncontextmenu=new Function("return false");//open this row to give no alert

Lets just jump to the code for disable selection:

function stop(){return false;}
function allow(){return true;}
document.onselectstart=new Function ("return false")
if (window.sidebar){
	document.onmousedown=stop;
	document.onclick=allow;
}

Unfortunantely, several blog or public site have disabled the javascript like this wordpress that I use. Therefore I cant implement my own code in this page. However, I have tried Disable Right Click and Selection on local server and it work successfully. I also try Disable Right Click and Selection with IE8, Google Chrome 10.0.648.205, Safari 5.0.4,and FireFox 4.0b10.

Just copy this  into your HTML page. Hope Disable Right Click and Selection simple code can help you alot.

http://septiadi.com/2011/04/25/disable-right-click-and-selection/


Implementing JQuery

Implementing JQuery

Implementing JQuery is little bit similar with Implementing AJAX. However Implementing JQuery could be more vary. It because JQuery has its own defined function.

However, in this Implementing JQuery post, ill only explain simple way to communicate with server with JQuery without reload.

Frist you need to download the JQuery file. You can download it from http://jquery.com/. Then lets us jump to the code.

<script language="javascript" src="jquery.js"></script>
<script language="javascript">
function jquery(){
	$.post("test.php",{ call:'server' } , function(data){
		document.getElementById("return").innerHTML=data;
	});
}
</script>

<button type="button" onclick="jquery()">Call Server</button>
<div id="return"></div>

The second code will be the code for the file that called by JQuery.

if(isset($_POST['call'])&&$_POST['call'] == 'server')echo 'Server say hello to you';

Totally, you will need 3 files. However, you can make the HTML file to call itself so it will only need 2 files.

That’s all about Implementing JQuery that i can share today. Hope this Implementing JQuery can be useful for you.

http://septiadi.com/2011/04/20/implementing-jquery/


Implementing AJAX

Implementing AJAX

Implementing AJAX is very crucial thing today in web development. AJAX is the abbreviation of Asynchronous JavaScript and XML. In this case, The page of a site have not to be reloaded to communicate with server.

Implementing Ajax can save bandwidth, because, the page only request the needed information to the server. It is very different than a site that fully reloaded to just communicate with the server.

Lets just jump to the JavaScript code.

function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest){//for IE7+, Opera, Chrome, Firefox, Safari
	xmlhttp=new XMLHttpRequest();
}
else{//for IE5, IE6
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("result").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}

Then you need to have html code to call the function.

<button type="button" onclick="ajax()">Call Server</button>
<div id="result"></div>

Last but not least, you need the file that will be called by AJAX. In this case I use php file.

echo 'Server say hello to you';

As a result, you will have 2 file in your server.

First is the AJAX file.

<script type="text/javascript">
function ajax()
{
var xmlhttp;
if (window.XMLHttpRequest){//for IE7+, Opera, Chrome, Firefox, Safari
	xmlhttp=new XMLHttpRequest();
}
else{//for IE5, IE6
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}
xmlhttp.open("GET","test.php",true);
xmlhttp.send();
}
</script>

<button type="button" onclick="ajax()">Call Server</button>
<div id="myDiv"></div>

Second, the file that will be called.

echo 'Server say hello to you';

Thats all about simple Implementing AJAX. Hope this article of Implementing AJAX, could be useful to you.

http://septiadi.com/2011/04/20/implementing-ajax/


Slide HTML Title with JavaScript

Slide HTML Title with JavaScript

Slide HTML Title with JavaScript is a simple Javascript function that made for slide your HTML title. So, when your script opened by browser, the title will slide.

Slide HTML Title with JavaScript only need JavaScript code, it even dont need HTML title tag to be edited.

Slide HTML Title with JavaScript :

message = "Website Title Here";//set your title here
position = 0;
delay = 500;//in millisecond
function slide_title() {
	document.title = message.substring(position, message.length) + message.substring(0, position); position++;
	if (position > message.length) position = 0
}
window.setInterval("slide_title()",delay);

Just copy Slide HTML Title with JavaScript into your HTML page inside script tag, then the code should be working.

Hope this Slide HTML Title with JavaScript can be usefull for you

http://septiadi.com/2011/04/19/slide-html-title-with-javascript/


Reload Page Periodically with JavaScript or PHP

Reload Page Periodically with JavaScript or PHP

Do you know how to Reload Page Periodically with JavaScript or PHP ? If you dont, then you are visiting a correct blog. In this article Ill explain how to Reload Page Periodically with JavaScript or PHP.

Reload Page Periodically with JavaScript or PHP can be usefull for reloading your website page. Reloading the page can be usefull for giving an up to date information to the user.

Enough the chit-chat and jump to the code already.
First is JavaScript code:

setTimeout('window.location.reload();', 5000);

Second is PHP code:

$page = $_SERVER['PHP_SELF'];
$wait = "5";//in second
header("Refresh: $wait; url=$page");

Just copy Reload Page Periodically with JavaScript or PHP codes into your php or html file. Just to keep in mind, you can put the above javascript anywhere in your file. However, you only can put the php code anywhere in the file as long as there is no echo or text printed to be viewed before the php code. To make it save, just put the php code in the top of the file.

Hope this Reload Page Periodically with JavaScript or PHP article is useful for you.

http://septiadi.com/2011/04/14/reload-page-periodically-with-javascript-or-php/