Explore the logic behind small WEB APPLICATIONS: March 2013

Saturday, 23 March 2013

JavaScript WYSIWYG

A simple WYSIWYG

Cool yet Simple

JAVASCRIPT FILE

function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}

HTML FILE

<body onLoad="iFrameOn();">
<h2>Cool yet Simple</h2>
<form action="my_parse_file.php" name="myform" id="myform" method="post">

<p>Text goes here<br>
<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>

<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>

</p>
<br />
</form>
</body>

JavaScript digital clock

JAVASCRIPT,CSS DIGITAL CLOCK

Working demo:

Javascript CSS Digital Clock

This looks cool yet very easy to code.
Here comes the magical code that does this

<h2>Javascript CSS Digital Clock </h2>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime() { var currentTime = new Date();
var suf = "AM";
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
setTimeout('renderTime()',1000);
if (h == 0) { h = 12; }
else if (h > 12)
{ h = h - 12; suf="PM"; }
if (h < 10) { h = "0" + h; }
if (m < 10) { m = "0" + m; }
if (s < 10) { s = "0" + s; }
var myClock = document.getElementById('clockDisplay');
myClock.innerHTML = h + ":" + m + ":" + s + " " + suf; }
renderTime();
</script>

Textarea field counting

TEXTAREA FIELD COUNTING...

This is a pretty useful yet easy to code :)

Working Demo:

Textarea counter
Letters remaining-

For this you will require a single html file with the following script.

<html>
<head>
<title>Textarea counter</title>
<script type="text/javascript">
function count(txtid){
var limit = 150;
var current = document.getElementById(txtid).value;
if(current.length <= limit){

document.getElementById("stat").innerHTML = limit - current.length;
}
else{
alert("Dude max limit of letters reached");

}
}
</script>

</head>

<body>
<textarea id="txt" onkeydown="count(id)" onkeyup="count(id)"></textarea><br>
Letters remaining-
<span id="stat"></span>
</body>

</html>

Friday, 22 March 2013

Dynamic form validation using AJAX

Dynamic form validation using JAVASCRIPT and AJAX

Hello...Web Application Developers(Beginners)
Today you will learn how to dynamically validate a form using AJAX and JAVASCRIPT.
If you already know how to do it then your are at wrong place DUDE.
So without wasting time lets start ....zzZZZz
#*The above example will take the username from username and dynamically checks whether this username is already taken by other user or not*#

Lets understand the logic behind validating form dynamically.

The block diagram clearly shows the flow of data through our system.
Files required.
1)form.html(To allow user to input data)
2)validate.js(Main validation function to send an AJAX request to find if user already exists in the system)
3)ajax.js(An AJAX module to create an AJAX request)
4)php file (to serach in database if username is already in use or not?}

1)form.html
code:
Username<input id="uname" type="text" onblur = "val(id)" /><span id = "valspan"></span>

Output
Username
*here we will be dealing with only username but you can apply the same logic to all your validation

2)validate.js
<script src="ajax.js"></script>
<script type= "text/javascript">
function val(txtid){
var username = document.getElementById(txtid).value;
var spanstatus = document.getElementById("valspan").value;
if(username.length == ' '){
spanstatus.innerhtml = "Please enter an username";
}
else{

var ajax = ajaxobj("POST","checkname.php");

ajax.onreadystatechange = function(){

if(ajaxreturn(ajax)==true){

var response = ajax.responseText;

if(response == "ok"){
spanstatus.innerhtml = "OK";




}
else{
spanstatus.innerhtml = "Sorry,but this username is already taken";

}

}


}

ajax.send("user="+username);

}
}

</script>

3)ajax.js

function ajaxobj(method,url){
var x = new XMLHttpRequest();
x.open(method, url,true);
x.setRequestHeader("Content-type","application/x-www-form-urlencoded");
return x;
}

function ajaxreturn(x){
if(x.readyState==4 && x.status==200){
return true;

}

}

4)php file
<?php
include_once("db_connect");
if(isset($_POST['user'])){
include_once("db_connect");
$user = $_POST['user'];
$sql = "select id from table where username='$user';
$query = mysqli_query($db_conx,$query);
$numrow = mysqli_num_rows($query);
if($numrow < 1){
echo "ok" //This is what goes back to ajax in val.js if username doesn't exists in the DB//
exit();
}
else{
echo "Username in use";
//This is what goes back to ajax in val.js if username exists in the DB//
exit();
}

}
exit();
?>