CSS tr even-odd in a table:
<html>
<head>
<style type="text/css">
tr:nth-child(odd){
background-color: #740;
color: #fff;
}
tr:nth-child(even){
background-color: #aaa;
color: #444;
}
table{
border-collapse:collapse;
text-align:center;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
</tr>
</table>
</body>
</html>
JQuery Image Carousel:
<html>
<head>
<title>Youtube-thumbnail</title>
<script src="jq/jquery-1.4.js"></script>
<script src="jq/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="jq/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#car').jcarousel({visible:3});
});
</script>
</head>
<body>
<div>
<ul id="car" class="jcarousel-skin-tango">
<li><img src="1.jpg" height="200px" width="200px" /></li>
<li><img src="2.jpg" height="200px" width="200px" /></li>
<li><img src="3.jpg" height="200px" width="200px" /></li>
<li><img src="thunder1.jpeg" height="200px" width="200px" /></li>
<li><img src="thunder3.jpeg" height="200px" width="200px" /></li>
<li><img src="thunder3.jpeg" height="200px" width="200px" /></li>
</ul>
<div disabled="disabled" class="jcarousel-prev-horizontal jcarousel-prev-disabled-horizontal"></div>
<div class="jcarousel-next-horizontal"></div>
</div>
</body>
</html>
Triangular div:
<html>
<head></head>
<body>
<div style="width: 0;height: 0;border-left: 215px solid transparent;border-right: 0px solid transparent;border-bottom: 125px solid black;"></div>
</body>
</html>
Flipping the div:
Captcha with mathematical expression:
<html>
<head>
<script type="text/javascript">
captchaString="";
function generateCaptcha(){
randomString="+-*";
document.getElementById("cap").innerHTML=captchaString="";
num=0;
while(num%2!=1 || num<=3){
num=Math.floor(Math.random()*8);
}
for(i=1;i<=num;i++){
operand=Math.floor(Math.random()*99);
operator=Math.floor(Math.random()*3);
op=randomString.charAt(operator);
if(i<=num-1)
document.getElementById("cap").innerHTML+=operand+op;
else
document.getElementById("cap").innerHTML+=operand;
}
captchaString=document.getElementById("cap").innerHTML;
document.getElementById("cap").innerHTML+="=?";
}
function check(){
if(document.getElementById("txtCap").value==eval(captchaString))
alert("Success");
else
alert("Failure");
}
</script>
</head>
<body onload="generateCaptcha()">
<div id="cap" style="border:1px solid #000;float:left;background-color:#ccddee;margin:2px;padding:2px"></div>
<div style="clear:both"></div><br />
<form>
<input type="text" name="txtCap" id="txtCap" /><br />
<input type="button" name="btnChk" id="btnChk" value="check" onclick="check()" />
<input type="button" name="btnRef" id="btnRef" value="Refresh" onclick="generateCaptcha()" />
</form>
</body>
</html>
Simplest Captcha Code
<html>
<head>
<style>
li:nth-child(even) {
background-color: #def;
}
li:nth-child(odd) {
background-color: #fff;
}
</style>
<script type="text/javascript">
captchaString="";
function generateCaptcha(){
randomString="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var style=new Array();
style[0]="margin-bottom:2px;font-size:19;text-decoration:line-through;color:blue;";
style[1]="margin:2px;font-size:25;text-decoration:underline;color:green;font-family:cursive;";
style[2]="margin-top:2px;font-size:12;text-decoration:none;color:red;";
style[3]="margin-top:2px;font-size:22;text-decoration:line-through;color:#898796;";
style[4]="margin-top:2px;font-size:32;text-decoration:none;color:#ff7777;";
style[5]="margin-top:2px;font-size:19;font-family:sans-serif;text-decoration:none;color:#1abf7f;";
document.getElementById("cap").innerHTML="";
for(i=1;i<=11;i++){
num=Math.floor(Math.random()*62);
styleNum=Math.floor(Math.random()*6);
charc=randomString.charAt(num);
document.getElementById("cap").innerHTML+="<div style='float:left;height:50;"+style[styleNum]+"'>"+charc+"</div>";
captchaString+=charc;
}
}
function check(){
if(document.getElementById("txtCap").value==captchaString)
alert("Success");
else
alert("Failure");
}
</script>
</head>
<body onload="generateCaptcha()">
<div id="cap" style="border:1px solid #000;float:left;background-color:#ccddee;margin:2px;padding:2px"></div>
<div style="clear:both"></div><br />
<form>
<input type="text" name="txtCap" id="txtCap" /><br />
<input type="button" name="btnChk" id="btnChk" value="check" onclick="check()" />
<input type="button" name="btnRef" id="btnRef" value="Refresh" onclick="generateCaptcha()" />
</form>
</body>
</html>
Making Simple Player which plays your browsed song
<html>
<head>
<script type="text/javascript" language="javascript">
var flag=1;
function play()
{
if(document.getElementById("btn").value=="Play" && document.getElementById("hid").value!=""){
document.getElementById("player").src=document.getElementById("hid").value;
document.getElementById("equ").src="EQ.gif";
document.getElementById("btn").value="Stop";
}
else
{
document.getElementById("btn").value="Play";
document.getElementById("equ").src="center.jpg";
document.getElementById("player").src="";
}
document.getElementById("song").innerHTML=document.getElementById("hid").value;
}
function playlist(a)
{
document.getElementById("hid").value=a.innerHTML;
document.getElementById("btn").value="Play";
play();
}
function add()
{
document.getElementById("list").innerHTML+="<br/>"+flag+".<a href='#' ondblclick='playlist(this)'>"+document.getElementById("fileup").value+"</a>";
flag++;
}
function addToHid()
{
document.getElementById("hid").value=document.getElementById("fileup").value;
//alert("hi");
}
function minus()
{
var cur=document.getElementById("player").volume;
var wid=document.getElementById("indicator").width;
if(cur > -5000)
{
cur-=500;
wid-=38;
}
document.getElementById("indicator").width=wid;
document.getElementById("player").volume=cur;
}
function plus()
{
var cur=document.getElementById("player").volume;
var wid=document.getElementById("indicator").width;
if(cur<0)
{
cur+=500;
wid+=38;
}
document.getElementById("indicator").width=wid;
document.getElementById("player").volume=cur;
}
function Mute()
{
if(document.getElementById("player").volume>-10000)
document.getElementById("player").volume=-10000;
else
document.getElementById("player").volume=0;
}
</script>
</head>
<body bgcolor="#778899">
<center>
<img width="400px" src="center.jpg" id="equ"></img>
<div style="width:400;background-color:#99aabb;">
<marquee id="song"></marquee>
</div>
<div style="width:400;">
<div style="float:left">
<img width="10px" src="minus.jpg" onmouseover="minus()"></img>
</div>
<div style="float:left;background-color:white;width:380px;height:10px;vertical-align:baseline;text-align:left">
<img id="indicator" width="380px" height="10px" src="green.png"></img>
</div>
<div style="float:left">
<img width="10px" src="sum.jpg" onmouseover="plus()"></img>
</div>
</div>
<img src="mute.png" onclick="Mute()" height="10px"></img>
<form action="" name="frm" method="">
<bgsound src="" id="player" volume="0"> </bgsound>
<input type="file" id="fileup" onchange="addToHid()" />
<input type="hidden" id="hid" />
<input type="button" onclick="play()" value="Play" id="btn"/>
<input type="button" onclick="add()" value="Add To List" id="add1" />
<div id="list" style="background-color:black;overflow:auto;color:white;width:400px"><center><h3 style="color:white">PlayList</h3></center></div>
</form>
</center>
</body>
</html>Save this file with .hta (HTML application).
Making Video Player which plays your browsed Video
<html>
<head>
<script language="javascript" type="text/javascript">
function play()
{
document.getElementById("video").src=document.getElementById("fileup").value;
document.getElementById("fileup").value="";
}
</script>
</head>
<body bgcolor="aqua">
<embed id="video" src=""></embed>
<form name="frm" action="" method="">
<input type="file" id="fileup" />
<input type="button" value="Play" onclick="play()"/>
</form>
</body>
</html>
Making Your own Calendar in C
#include<stdio.h>
#include<process.h>
#include<conio.h>
void main()
{
int i=0,yr,year=1984,leap,d=1,sp;
long days=0,dy,temp;
int ndays[]={31,28,31,30,31,30,31,31,30,31,30,31};
char ch;
char mnth[][10]={"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"};
do
{
clrscr();
textcolor(WHITE);
printf("\nEnter Year(1984 onwards) to See calender\n");
scanf("%d",&yr);
if(yr<1984)
{
textcolor(WHITE +128);
cprintf("\nSORRY!!!! Can not Accept year less than 1984");
getch();
textcolor(WHITE);
}
}while(yr<1984);
leap=(!(yr%4)&&(yr%100))||(!(yr%400));
if(leap)
ndays[1]++;
while(year<yr)
{
leap=(!(year%4)&&(year%100))||(!(year%400));
if(leap)
days+=366;
else
days+=365;
year++;
}
days%=7;
temp=days;
do
{
clrscr();
textcolor(CYAN+i);
if(i==5)
{
//printf("%d",i+1);
textcolor(WHITE);
}
printf("\t%s,%d\n",mnth[i],yr);
printf(" S M T W T F S\n");
for(sp=1;sp<=days;sp++)
printf(" ");
dy=days;
while(d<=ndays[i])
{
printf("%3d",d);
dy++;
if(!(dy%7))
printf("\n");
d++;
}
printf("\n\nn.Next Month\nAny Other key will exit this program\n");
ch=getch();
switch(ch)
{
case 'n':
d=1;
days+=ndays[i];
days%=7;
i++;
if(i==12)
days=temp;
i%=12;
break;
default:
textcolor(CYAN);
exit(0);
}
}while(1);
}
Making Clone of a ROW using Javascript with php
$("#idOfControl") is used as i have included a jquery library.
<html>
<head>
<script>
function addRow()
{
var n=$("#elementCount").val();
var i=$('#rowid'+(n-1));
i.clone(true).attr('id','rowid'+(n)).insertAfter(i);
var p="#txtname"+(n-1);
var no="txtname"+(n);
$('#rowid'+(n)).find('.c').attr('id',no);
$('#rowid'+(n)).find('.c').attr('name',no);
$('#rowid'+(n)).find('.c').attr('value','');
$('#rowid'+(n)).find('.b').attr('id',"txtprc"+(n));
$('#rowid'+(n)).find('.b').attr('name',"txtprc"+(n));
$('#rowid'+(n)).find('.b').attr('value','');
n++;
$("#elementCount").val(n);
}
function getNewRow()
{
var id=$("#lstmenu").val();
$.ajax({
url: "index.php?option=com_hotel_manangement&task=ajax.getNewRow&format=raw",
type: "post",
data: "menuID="+id,
success: function(response){
$("#mi").html(response);
},
error: function(response){
$("#mi").html(response);
}
});
$("#btn").show();
}
function getMenu()
{
var id=$("#sel").val();
$.ajax({
url: "index.php?option=com_hotel_manangement&task=ajax.getMenu&format=raw",
type: "post",
data: "hotelID="+id,
success: function(response){
$("#mt").html(response);
},
error: function(response){
$("#mt").html(response);
}
});
}
</script>
<title></title>
</head>
<body>
<center>
<form id="addmenu" action="index.php?option=com_hotel_manangement&controller=menuadd&task=insert" method="post">//Need not to define action in form tag
<table>
<tr><td colspan="2"><h2>Add New Menu/Item</h2></td></tr>
<tr><td>Hotel Branch</td>
<td><select id="sel" name="sel" onchange="getMenu()">
<option value="0">-Select-</option>
<?php
foreach($ht as $h)
{
echo "<option value='$h->id'>$h->City</option>";//Database coding
}
?>
</select></td>
</tr>
<tr id="mt"></tr>
<tr id="mi"></tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Insert" id="btn" name="btn" style="display: none"/></td>
</tr>
</table>
<INPUT type="hidden" value="2" id="elementCount" name="elementCount" />
</form>
</center>
</body>
</html>
Here I using Jquery, and Jquery identifies an HTML control by 3 things
1st by id : eg :- $("#idOfAnyControl")
2nd by class : eg :- $(".classOfAnyControl")
3rd by tag : eg :- $("tag")
Now Following file need to be downloaded first :-
jquery-min.js (search it on net)
Now the generalized code for AJAX is :-
<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
<script>
function ajaxTry()
{
var id=$("#txtAjax").val();
$.ajax({
url: "ajaxManual.aspx?id=1&cid="+id,
type: "post",
//data: "clientID="+id,
success: function(response){
$("#div1").html(response);
},
error: function(response){
$("#div1").html(response);
}
});
}
</script>
cid is the value on which I need to work on ajaxManual.aspx page and id= 1/2/3 will define the funtionality that is to be performed on ajaxManual.aspx...
Let's see what i did on ajaxManual.aspx :-
public partial class ajaxManual : System.Web.UI.Page
{
DBConnection dbc = new DBConnection();
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt;
Response.Write("Hello!!!<br />");
if (Request["id"].ToString() == "1")
{
dt = dbc.selectquery("select name,photo from info where id='"+int.Parse(Request["cid"].ToString())+"'");
Response.Write(dt.Rows[0]["name"].ToString()+"hi!!<br /><image src=Images/"+dt.Rows[0]["photo"]+" width=100 height=100></image>");
}
if (Request["id"].ToString() == "2")
{
Response.Write("In Second");
}
}
}
You can perform multiple tasks on single page as I did. If you are working with php / jsp /servelets or on any other platform yon need to follow syntax of that language. Ajax code will remain same.
Just try it.
<html>
<head>
<style type="text/css">
tr:nth-child(odd){
background-color: #740;
color: #fff;
}
tr:nth-child(even){
background-color: #aaa;
color: #444;
}
table{
border-collapse:collapse;
text-align:center;
}
</style>
</head>
<body>
<table cellpadding="5" cellspacing="5">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
</tr>
</table>
</body>
</html>
JQuery Image Carousel:
<html>
<head>
<title>Youtube-thumbnail</title>
<script src="jq/jquery-1.4.js"></script>
<script src="jq/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="jq/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#car').jcarousel({visible:3});
});
</script>
</head>
<body>
<div>
<ul id="car" class="jcarousel-skin-tango">
<li><img src="1.jpg" height="200px" width="200px" /></li>
<li><img src="2.jpg" height="200px" width="200px" /></li>
<li><img src="3.jpg" height="200px" width="200px" /></li>
<li><img src="thunder1.jpeg" height="200px" width="200px" /></li>
<li><img src="thunder3.jpeg" height="200px" width="200px" /></li>
<li><img src="thunder3.jpeg" height="200px" width="200px" /></li>
</ul>
<div disabled="disabled" class="jcarousel-prev-horizontal jcarousel-prev-disabled-horizontal"></div>
<div class="jcarousel-next-horizontal"></div>
</div>
</body>
</html>
Triangular div:
<html>
<head></head>
<body>
<div style="width: 0;height: 0;border-left: 215px solid transparent;border-right: 0px solid transparent;border-bottom: 125px solid black;"></div>
</body>
</html>
Flipping the div:
<html>
<head>
<title>Flip</title>
<script src="jq/jquery.js"></script>
<script src="jq/jquery-ui-1.8.21.custom.min.js"></script>
<script src="jq/jquery.flip.js"></script>
<script type="text/javascript">
$(function(){
$("#flipPad a:not(.revert)").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $this.attr("title"),
onBefore: function(){$(".revert").show()}
})
return false;
});
$(".revert").bind("click",function(){
$("#flipbox").revertFlip();
return false;
});
});
</script>
</head>
<body>
<div id="flipbox" style="height:200px;width:200px;background-color:green">Flip Me</div>
<div id="flipPad">
<a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">left</a>
<a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">top</a>
<a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Hey oh let's go!">bottom</a>
<a href="#" class="right" rel="lr" rev="#C8D97E" title="Waiting for css3...">right</a>
<a href="#" class="revert">revert!</a>
</div>
</body>
</html>
<head>
<title>Flip</title>
<script src="jq/jquery.js"></script>
<script src="jq/jquery-ui-1.8.21.custom.min.js"></script>
<script src="jq/jquery.flip.js"></script>
<script type="text/javascript">
$(function(){
$("#flipPad a:not(.revert)").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $this.attr("title"),
onBefore: function(){$(".revert").show()}
})
return false;
});
$(".revert").bind("click",function(){
$("#flipbox").revertFlip();
return false;
});
});
</script>
</head>
<body>
<div id="flipbox" style="height:200px;width:200px;background-color:green">Flip Me</div>
<div id="flipPad">
<a href="#" class="left" rel="rl" rev="#39AB3E" title="Change content as <em>you</em> like!">left</a>
<a href="#" class="top" rel="bt" rev="#B0EB17" title="Ohhh yeah!">top</a>
<a href="#" class="bottom" rel="tb" rev="#82BD2E" title="Hey oh let's go!">bottom</a>
<a href="#" class="right" rel="lr" rev="#C8D97E" title="Waiting for css3...">right</a>
<a href="#" class="revert">revert!</a>
</div>
</body>
</html>
Captcha with mathematical expression:
<html>
<head>
<script type="text/javascript">
captchaString="";
function generateCaptcha(){
randomString="+-*";
document.getElementById("cap").innerHTML=captchaString="";
num=0;
while(num%2!=1 || num<=3){
num=Math.floor(Math.random()*8);
}
for(i=1;i<=num;i++){
operand=Math.floor(Math.random()*99);
operator=Math.floor(Math.random()*3);
op=randomString.charAt(operator);
if(i<=num-1)
document.getElementById("cap").innerHTML+=operand+op;
else
document.getElementById("cap").innerHTML+=operand;
}
captchaString=document.getElementById("cap").innerHTML;
document.getElementById("cap").innerHTML+="=?";
}
function check(){
if(document.getElementById("txtCap").value==eval(captchaString))
alert("Success");
else
alert("Failure");
}
</script>
</head>
<body onload="generateCaptcha()">
<div id="cap" style="border:1px solid #000;float:left;background-color:#ccddee;margin:2px;padding:2px"></div>
<div style="clear:both"></div><br />
<form>
<input type="text" name="txtCap" id="txtCap" /><br />
<input type="button" name="btnChk" id="btnChk" value="check" onclick="check()" />
<input type="button" name="btnRef" id="btnRef" value="Refresh" onclick="generateCaptcha()" />
</form>
</body>
</html>
Simplest Captcha Code
<html>
<head>
<style>
li:nth-child(even) {
background-color: #def;
}
li:nth-child(odd) {
background-color: #fff;
}
</style>
<script type="text/javascript">
captchaString="";
function generateCaptcha(){
randomString="abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var style=new Array();
style[0]="margin-bottom:2px;font-size:19;text-decoration:line-through;color:blue;";
style[1]="margin:2px;font-size:25;text-decoration:underline;color:green;font-family:cursive;";
style[2]="margin-top:2px;font-size:12;text-decoration:none;color:red;";
style[3]="margin-top:2px;font-size:22;text-decoration:line-through;color:#898796;";
style[4]="margin-top:2px;font-size:32;text-decoration:none;color:#ff7777;";
style[5]="margin-top:2px;font-size:19;font-family:sans-serif;text-decoration:none;color:#1abf7f;";
document.getElementById("cap").innerHTML="";
for(i=1;i<=11;i++){
num=Math.floor(Math.random()*62);
styleNum=Math.floor(Math.random()*6);
charc=randomString.charAt(num);
document.getElementById("cap").innerHTML+="<div style='float:left;height:50;"+style[styleNum]+"'>"+charc+"</div>";
captchaString+=charc;
}
}
function check(){
if(document.getElementById("txtCap").value==captchaString)
alert("Success");
else
alert("Failure");
}
</script>
</head>
<body onload="generateCaptcha()">
<div id="cap" style="border:1px solid #000;float:left;background-color:#ccddee;margin:2px;padding:2px"></div>
<div style="clear:both"></div><br />
<form>
<input type="text" name="txtCap" id="txtCap" /><br />
<input type="button" name="btnChk" id="btnChk" value="check" onclick="check()" />
<input type="button" name="btnRef" id="btnRef" value="Refresh" onclick="generateCaptcha()" />
</form>
</body>
</html>
Making Simple Player which plays your browsed song
<html>
<head>
<script type="text/javascript" language="javascript">
var flag=1;
function play()
{
if(document.getElementById("btn").value=="Play" && document.getElementById("hid").value!=""){
document.getElementById("player").src=document.getElementById("hid").value;
document.getElementById("equ").src="EQ.gif";
document.getElementById("btn").value="Stop";
}
else
{
document.getElementById("btn").value="Play";
document.getElementById("equ").src="center.jpg";
document.getElementById("player").src="";
}
document.getElementById("song").innerHTML=document.getElementById("hid").value;
}
function playlist(a)
{
document.getElementById("hid").value=a.innerHTML;
document.getElementById("btn").value="Play";
play();
}
function add()
{
document.getElementById("list").innerHTML+="<br/>"+flag+".<a href='#' ondblclick='playlist(this)'>"+document.getElementById("fileup").value+"</a>";
flag++;
}
function addToHid()
{
document.getElementById("hid").value=document.getElementById("fileup").value;
//alert("hi");
}
function minus()
{
var cur=document.getElementById("player").volume;
var wid=document.getElementById("indicator").width;
if(cur > -5000)
{
cur-=500;
wid-=38;
}
document.getElementById("indicator").width=wid;
document.getElementById("player").volume=cur;
}
function plus()
{
var cur=document.getElementById("player").volume;
var wid=document.getElementById("indicator").width;
if(cur<0)
{
cur+=500;
wid+=38;
}
document.getElementById("indicator").width=wid;
document.getElementById("player").volume=cur;
}
function Mute()
{
if(document.getElementById("player").volume>-10000)
document.getElementById("player").volume=-10000;
else
document.getElementById("player").volume=0;
}
</script>
</head>
<body bgcolor="#778899">
<center>
<img width="400px" src="center.jpg" id="equ"></img>
<div style="width:400;background-color:#99aabb;">
<marquee id="song"></marquee>
</div>
<div style="width:400;">
<div style="float:left">
<img width="10px" src="minus.jpg" onmouseover="minus()"></img>
</div>
<div style="float:left;background-color:white;width:380px;height:10px;vertical-align:baseline;text-align:left">
<img id="indicator" width="380px" height="10px" src="green.png"></img>
</div>
<div style="float:left">
<img width="10px" src="sum.jpg" onmouseover="plus()"></img>
</div>
</div>
<img src="mute.png" onclick="Mute()" height="10px"></img>
<form action="" name="frm" method="">
<bgsound src="" id="player" volume="0"> </bgsound>
<input type="file" id="fileup" onchange="addToHid()" />
<input type="hidden" id="hid" />
<input type="button" onclick="play()" value="Play" id="btn"/>
<input type="button" onclick="add()" value="Add To List" id="add1" />
<div id="list" style="background-color:black;overflow:auto;color:white;width:400px"><center><h3 style="color:white">PlayList</h3></center></div>
</form>
</center>
</body>
</html>Save this file with .hta (HTML application).
Making Video Player which plays your browsed Video
<html>
<head>
<script language="javascript" type="text/javascript">
function play()
{
document.getElementById("video").src=document.getElementById("fileup").value;
document.getElementById("fileup").value="";
}
</script>
</head>
<body bgcolor="aqua">
<embed id="video" src=""></embed>
<form name="frm" action="" method="">
<input type="file" id="fileup" />
<input type="button" value="Play" onclick="play()"/>
</form>
</body>
</html>
Making Your own Calendar in C
#include<stdio.h>
#include<process.h>
#include<conio.h>
void main()
{
int i=0,yr,year=1984,leap,d=1,sp;
long days=0,dy,temp;
int ndays[]={31,28,31,30,31,30,31,31,30,31,30,31};
char ch;
char mnth[][10]={"Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"};
do
{
clrscr();
textcolor(WHITE);
printf("\nEnter Year(1984 onwards) to See calender\n");
scanf("%d",&yr);
if(yr<1984)
{
textcolor(WHITE +128);
cprintf("\nSORRY!!!! Can not Accept year less than 1984");
getch();
textcolor(WHITE);
}
}while(yr<1984);
leap=(!(yr%4)&&(yr%100))||(!(yr%400));
if(leap)
ndays[1]++;
while(year<yr)
{
leap=(!(year%4)&&(year%100))||(!(year%400));
if(leap)
days+=366;
else
days+=365;
year++;
}
days%=7;
temp=days;
do
{
clrscr();
textcolor(CYAN+i);
if(i==5)
{
//printf("%d",i+1);
textcolor(WHITE);
}
printf("\t%s,%d\n",mnth[i],yr);
printf(" S M T W T F S\n");
for(sp=1;sp<=days;sp++)
printf(" ");
dy=days;
while(d<=ndays[i])
{
printf("%3d",d);
dy++;
if(!(dy%7))
printf("\n");
d++;
}
printf("\n\nn.Next Month\nAny Other key will exit this program\n");
ch=getch();
switch(ch)
{
case 'n':
d=1;
days+=ndays[i];
days%=7;
i++;
if(i==12)
days=temp;
i%=12;
break;
default:
textcolor(CYAN);
exit(0);
}
}while(1);
}
$("#idOfControl") is used as i have included a jquery library.
<html>
<head>
<script>
function addRow()
{
var n=$("#elementCount").val();
var i=$('#rowid'+(n-1));
i.clone(true).attr('id','rowid'+(n)).insertAfter(i);
var p="#txtname"+(n-1);
var no="txtname"+(n);
$('#rowid'+(n)).find('.c').attr('id',no);
$('#rowid'+(n)).find('.c').attr('name',no);
$('#rowid'+(n)).find('.c').attr('value','');
$('#rowid'+(n)).find('.b').attr('id',"txtprc"+(n));
$('#rowid'+(n)).find('.b').attr('name',"txtprc"+(n));
$('#rowid'+(n)).find('.b').attr('value','');
n++;
$("#elementCount").val(n);
}
function getNewRow()
{
var id=$("#lstmenu").val();
$.ajax({
url: "index.php?option=com_hotel_manangement&task=ajax.getNewRow&format=raw",
type: "post",
data: "menuID="+id,
success: function(response){
$("#mi").html(response);
},
error: function(response){
$("#mi").html(response);
}
});
$("#btn").show();
}
function getMenu()
{
var id=$("#sel").val();
$.ajax({
url: "index.php?option=com_hotel_manangement&task=ajax.getMenu&format=raw",
type: "post",
data: "hotelID="+id,
success: function(response){
$("#mt").html(response);
},
error: function(response){
$("#mt").html(response);
}
});
}
</script>
<title></title>
</head>
<body>
<center>
<form id="addmenu" action="index.php?option=com_hotel_manangement&controller=menuadd&task=insert" method="post">//Need not to define action in form tag
<table>
<tr><td colspan="2"><h2>Add New Menu/Item</h2></td></tr>
<tr><td>Hotel Branch</td>
<td><select id="sel" name="sel" onchange="getMenu()">
<option value="0">-Select-</option>
<?php
foreach($ht as $h)
{
echo "<option value='$h->id'>$h->City</option>";//Database coding
}
?>
</select></td>
</tr>
<tr id="mt"></tr>
<tr id="mi"></tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Insert" id="btn" name="btn" style="display: none"/></td>
</tr>
</table>
<INPUT type="hidden" value="2" id="elementCount" name="elementCount" />
</form>
</center>
</body>
</html>
Generalized Ajax
Here I using Jquery, and Jquery identifies an HTML control by 3 things
1st by id : eg :- $("#idOfAnyControl")
2nd by class : eg :- $(".classOfAnyControl")
3rd by tag : eg :- $("tag")
Now Following file need to be downloaded first :-
jquery-min.js (search it on net)
Now the generalized code for AJAX is :-
<script type="text/javascript" language="javascript" src="JS/jquery.js"></script>
<script>
function ajaxTry()
{
var id=$("#txtAjax").val();
$.ajax({
url: "ajaxManual.aspx?id=1&cid="+id,
type: "post",
//data: "clientID="+id,
success: function(response){
$("#div1").html(response);
},
error: function(response){
$("#div1").html(response);
}
});
}
</script>
cid is the value on which I need to work on ajaxManual.aspx page and id= 1/2/3 will define the funtionality that is to be performed on ajaxManual.aspx...
Let's see what i did on ajaxManual.aspx :-
public partial class ajaxManual : System.Web.UI.Page
{
DBConnection dbc = new DBConnection();
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt;
Response.Write("Hello!!!<br />");
if (Request["id"].ToString() == "1")
{
dt = dbc.selectquery("select name,photo from info where id='"+int.Parse(Request["cid"].ToString())+"'");
Response.Write(dt.Rows[0]["name"].ToString()+"hi!!<br /><image src=Images/"+dt.Rows[0]["photo"]+" width=100 height=100></image>");
}
if (Request["id"].ToString() == "2")
{
Response.Write("In Second");
}
}
}
You can perform multiple tasks on single page as I did. If you are working with php / jsp /servelets or on any other platform yon need to follow syntax of that language. Ajax code will remain same.
Just try it.
thank for this coding..bcz im use code for my project...
ReplyDelete