Posts

Showing posts from December, 2013

Create Signup page with Validation using JavaScript

Image
Code:
<html>
<head>

<title>Signup || Nested-code team</title>
<style type="text/css">
<!--
body {
margin-left: 150px;
margin-top: 5px;
margin-right: 190px;
background-color: #966;
}
-->
</style>
<script language="javascript">
function check()
{

 if(document.form1.lid.value=="")
  {
    alert("Plese Enter Login Id");
    document.form1.lid.focus();
    return false;
  }

 if(document.form1.pass.value=="")
  {
    alert("Plese Enter Your Password");
    document.form1.pass.focus();
    return false;
  }
  if(document.form1.cpass.value=="")
  {
    alert("Plese Enter Confirm Password");
    document.form1.cpass.focus();
    return false;
  }
  if(document.form1.pass.value!=document.form1.cpass.value)
  {
    alert("Confirm Password does not matched");
    document.form1.cpass.focus();
    return false;
  }
  if(document.form1.name.value=="")
  {

Real marksheet using HTML

Image
Real marksheet using HTML
Code:
<HTML>
<HEAD>
<STYLE>
body
{
border-radius: 20px;
border-style: double;
border-color: blue;
position: absolute;
width: 850px;
height: 705px;
top: 15px;
left: 45px;
padding: 30px 30px 50px 30px;
background-color: #CCC;
}
#tbl,#tbl2
{
border-collapse:collapse;
font-size:18;
font-family:Century Gothic;
}
.demo
{
position:absolute;
left:35px;
top:380px;
font-size:17;
font-family:Arial;
font-weight:bold;
margin-top:35px;
border-collapse:collapse;
}
#demoname
{
font-size:15px
}
.btn
{
position:absolute;
top:355px;
left:720px;
}
</STYLE>

<SCRIPT>
function myFun()
{
var a=document.form1.txtname.value;
document.getElementById("demoname").innerHTML=a;
var b=document.form1.txtfname.value;
document.getElementById("demofname").innerHTML=b;
var c=document.form1.txtins.value;
document.getElementById("demoins").innerHTML=c;
var d=document.form1.txtbatch.value;
document.getElementById("demobatch").innerHTML=d;

HTML Validation with Javascript

Image
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CoOl Javascript Validation</title>
<script type="text/javascript" src="cvalidate.js"></script>
<style type="text/css">
.heading
{
color:#0099FF;
font-weight:bolder;
font-size:20px;
}
.txt
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
</style>

</head>

<body>

<form name="frmValidate" id="myform" action="" method="post" onsubmit="return validateForm('myform',true)">
<table width="350" border="0" cellspacing="0" cellpadding="5" align="center" bgcolor=&qu…

How to make horizontal accordion using jquery

Image
How to make horizontal accordion using jquery
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){

    activeItem = $("#accordion li:first");
    $(activeItem).addClass('active');

    $("#accordion li").hover(function(){
        $(activeItem).animate({width: "50px"}, {duration:300, queue:false});
        $(this).animate({width: "450px"}, {duration:300, queue:false});
        activeItem = this;
    });

});
</script>

<style type="text/css">

#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 330px;
overflow: hidden;
background: #35a1de;}

#accordion li {
float: left;
border-left:
display: block;
height: 270px;
width: 50px;
padding: 15px 0;
overflow: hidden;
color: #fff;
text-decoration: none;
font-size: 16px;
line-height: 1.5em;
border-left: 1px so…

How to make vertical accordion using jquery

Image
How to make vertical accordion using jquery
Code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
$(document).ready(function(){
  $("#flip1").click(function(){
    $("#panel1").slideToggle("slow");
  });
});
$(document).ready(function(){
  $("#flip2").click(function(){
    $("#panel2").slideToggle("slow");
  });
});
</script>

<style type="text/css">

#panel1,#flip1,#panel2,#flip2,#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel1,#panel2,#panel
{
padding:50px;
display:none;
}

</style>
</head>
<body>

<div id="flip">CSS & Java Script</div>
<di…

How to make simple jquery accordion

Image
How to make simple jquery accordion
Code:
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>

</head>
<body bgcolor="orange">

<div id="accordion" >
  <h3>'A' HOME </h3>
  <div>
    <p>
  First Page.
    </p>
  </div>
  <h3>'B' COMPANY INFORMATION</h3>
  <div>

How to show a popup contact us page with jquery

Image
How to show a popup contact us page with jquery
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Example : a popup contact form using jQuery and ColorBox plugin </title>

        <link rel="stylesheet" href="http://www.formmail-maker.com/var/demo/jquery-popup-form/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="http://www.formmail-maker.com/var/demo/jquery-popup-form/jquery.colorbox-min.js"></script>

        <script>
            $(document).ready(function(){
                $(".iframe").colorbox({iframe:true, fastIframe:false, width:"450px", height:"480px", transition:"fade", scrolling   : false});
            });
        </script>


        <style>
            #cboxOverlay{ background:#666666; …

How to make a image submit button in html

Image
How to make a image submit button in html
Code:
<head>
<title>
http://softproweb.blogspot.com/
</title>
<script src="http://code.jquery.com/jquery-1.6.4.js">
</script>
<script>
$(document).ready(function() {
    $("button").click(function(event) {
        $('#b').animate({left:'250px',
      opacity:'0.5',

      height:'150px',

      width:'150px'});
    });
});
</script>
<style>
#a{
background-color: rgb(0,255,0);
}
.p-tag {
color: #0C9;
}
</style>
</head>

<body>
<h2 id="a"><a href="http://softproweb.blogspot.com/">http://softproweb.blogspot.com/</a></h2>
<hr color="black">
<h2 id="a">Talha Alam</h2>
<img src="http://2.bp.blogspot.com/-MH8rI3D_F4g/UcP3CpAcevI/AAAAAAAAA1g/iyK6BDWHC6E/s1600/How-to-make-thermometer-C#2.png" id="b" alt="" style="b…

How to make fancy table in html

Image
Code:
<head>
<title>
lab 7 task 1
</title>
<style>
.o{
color: #F30;
border-color: blue;
}
#a{background-color:grey;}
</style>
</head>

<body>
<table border="0" align="center" cellspacing="4" cellpadding="2" witdh="100%" height="40%">

<th class="o">ID</th>
<th class="o">NAME</th>
<th class="o">OCCUPATION</th>
<th class="o">APPROX.LOCATION</th>
<th class="o">PRICE</th>

<tr id="a">
<td>203A</td>
<td>Hasan<A HREF="http://softproweb.blogspot.com/">(bio)</A></td>
<td>Front-man</td>
<td>Los Angeles</td>
<td>$39.95</td>
</tr>

<tr>
<td>141B</td>
<td>Amir<A HREF="http://softproweb.blogspot.com/">(pic.bio)</A></td>
<td>Singe…