Explore the logic behind small WEB APPLICATIONS
Html,Css,Javascript,php,Jquery,Ajax
Saturday, 27 July 2013
Explore the logic behind small WEB APPLICATIONS: Dynamic form validation using AJAX
All possible combination of CSS color code
Want 2 se all 16777216 shades of color,just run the above script*.I was struggling with the color code and this came to my mind.....
*I am not responsible if your PC hangs while executing this :p
This requires changes in php.ini file or you'll get an time-out error and memory error :p
Just manupulate the loops an get different shades of particular color :D
<?php
$i=0;
$j=0;
$k=0;
$op='';
$count='';
for($i=0;$i<256;$i++){
for($j=0;$j<256;$j++){
for($k=0;$k<256;$k++){
$op.="<div style='background-color:rgb($i,$j,$k);width:80px;height:20px;'></div>rgb($i,$j,$k)<br/>";
$count++;
}
}
}
?>
<html>
<body>
<?php
echo "$count<br/>";
echo "$op.";
?>
</body>
</html>
Wednesday, 24 July 2013
Select box using PHP
Many of you'll might think that this is so stupid to publish,but there are people out there who still follow the traditional approach for creating selection box for stuff like date of birth an all(including me :D but not now ).They still use normal HTML and manually type each day,month and year from 1960 till today or whatever.
Lets check out this easy PHP script that saves all your time and make the most of it.
Index.php
<?php
$date='';
$month='';
$year = '';
for($i=1;$i<31;$i++){
$date.="<option value='$i' name = '$i'>$i</option>";
}
for($i=1;$i<13;$i++){
$month.="<option value='$i' name = '$i'>$i</option>";
}
for($i=1970;$i<2014;$i++){
$year.="<option value='$i' name = '$i'>$i</option>";
}
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<form method="post" action="test.php">
<select name="date">
<?php
echo "$date";
?>
</select>
<select name="month">
<?php
echo "$month";
?>
</select>
<select name="year">
<?php
echo "$year";
?>
</select>
<input type="submit" value="submit"></input>
</form>
</body>
</html>
Sunday, 7 July 2013
Dynamic search box
Creating a dynamic search box is quite simple.A big thanks to AJAX,which allows us to send HTTP requests without reloading the whole page.
This is a very simple system you should have a basic knowledge of AJAX,PHP & MYSQL and offcource HTML.
Getting started
I have included 3 files in this system but it totally depends on you.You can finish of in 2
1) HTML search page named index.php.
2) Database connection file named as database_con.php
3) PHP file to fetch information from the database.
PHP file named as search.php
Database named as data.
Table named as search.
Let's get started....
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#suggestion_box{
display: none;
}
</style>
<script>
//From here begins the magic of AJAX
function check(){
var search_box_id = document.getElementById('search_box');
var search_value = search_box_id.value;
var box_id = document.getElementById('suggestion_box')
var ajax = new XMLHttpRequest();ajax.open("POST","search.php",true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
if(ajax.responseText!=''){
box_id.style.display = "block";
box_id.innerHTML = ajax.responseText;
}
}
}
ajax.send("query="+search_value);
}
</script>
</head>
<body>
<input id="search_box" onkeyup="check()" type="text" style="margin-left: 500px;padding-left: 5px; margin-top: 250px; width: 250px; height: 30px;"> </input>
<div id="suggestion_box" style="margin-left: 500px;border-color:background; border-style:solid;
border-width:1px;margin-top:0px; width: 257px; background-color: blanchedalmond; border-radius:3px; "></div>
</body>
</html>
search.php
<?php
if(isset($_POST['query']) && $_POST['query']!=''){
$search_value = preg_replace('#[^a-z.]#i', '', $_POST['query']);
include_once 'database_con.php';
$sql = "Select * from search where contents like '%$search_value%'";
$result = mysqli_query($db_connx, $sql);
if(mysqli_num_rows($result)>0){
while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$id = $row['id'];
$search_string = $row['contents'];
echo "<div style='height:35px;padding-left:15px;' >
<a href='index.php?search=$search_string' style='text-decoration:none;
padding-right:190px;
text-allign:centre; padding-bottom:3px; padding-top:3px
;cursor:pointer; '>
$search_string </a>
<hr> </div>";
}
}
}
?>
database_con.php
<?php
$db_connx = mysqli_connect("localhost", "root", "root", "data");
if(mysqli_connect_errno()){
echo mysqli_connect_error();
exit();
}
?>
I have kept everything simple.Only a simple styling.But you can extend it to whatever and however you want.
Happy Coding :)
Saturday, 23 March 2013
JavaScript 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
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
This is a pretty useful yet easy to code :)
Working Demo:
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>