Powered by Blogger.

Popular Posts

Bel4solutions

                                                               Bel4solutions
Desktop Applications
Web Applications
Penetration Testing
Logo and Banner Designing
E-Commerce Online Solutions
Online Social Media Marketing Servies
Mobile Application Development
Professional SEO Services

Web Design & Development


http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

http://bel4solutions.com/

Site :http://bel4solutions.com/

Marquee Tag with upward and rightside direction

Marquee Tag with Upward And Rightside Direction

Code:
 <html>
<head>
</head>
<body>

<!--Left To Right Marquee  -->
<FONT SIZE="4" FACE="courier" COLOR=Red>
<marquee behavior="scroll" direction="left">
 HEC on Thursday 23rd February announced rankings of Pakistani Universities,
  in which  University climbs up on 3rd position in category of Business Administration.
 </marquee>

<!--Left To UP word Marquee  -->
<form>
<marquee behavior="scroll" direction="up">
 HEC on Thursday 23rd February announced rankings of Pakistani Universities,
 <br> in which  University climbs up on 3rd position in category of Business
 <br> Administration.
 </marquee>
</form>
 </body>
</html>

 Screen SHot:


Javascript Picturebox Array

Javascript Picturebox Array

Code:
<html>
<head>
<title>Javascript With Pictures waqeeh ul hasan</title>
<script>

var description = new Array("Picture 1", "Picture 2", "Picture 3", "Picture 4");
var pictures = new Array(3);
var counter = 0;


function initialize(){
  // sets up the array with some startin values
  // Andy Harris
  pictures[0] = new Image(50, 50);
  pictures[0].src = "images/1.jpg";
  pictures[1] = new Image(50, 50);
  pictures[1].src = "images/2.jpg";
  pictures[2] = new Image(50, 50);
  pictures[2].src = "images/3.jpg";
  pictures[3] = new Image(50, 50);
  pictures[3].src = "images/1.jpg";
   pictures[4] = new Image(50, 50);
  pictures[4].src = "images/2.jpg";

} // end initialize

function upDate(){
  //increments the counter and shows the next description
  counter++;
  if (counter > 4){
    counter = 0;
  } // end if
  document.imgDisplay.src = pictures[counter].src;
  document.myForm.txtDescription.value = description[counter];
} // end upDate

</script>
</head>

<body onLoad = "initialize()">
<center>
<h1>Javascript With Pictures<hr></h1>
<form name = "myForm">
<img src = "images/1.jpg"
     name = "imgDisplay"
     height = 300
     width = 300>
<br>

<input type = "text"
       name = "txtDescription"
       value = " Picture 01">
<br>
<input type = "button"
       value = "Next"
       onClick = "upDate()">
     
 </form>
</center>
<hr>
</body>
</html>

 Screen Shot:


Create Signup page with Validation using JavaScript

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=="")
  {
    alert("Plese Enter Your Name");
    document.form1.name.focus();
    return false;
  }
  if(document.form1.address.value=="")
  {
    alert("Plese Enter Address");
    document.form1.address.focus();
    return false;
  }
  if(document.form1.city.value=="")
  {
    alert("Plese Enter City Name");
    document.form1.city.focus();
    return false;
  }
  if(document.form1.phone.value=="")
  {
    alert("Plese Enter Contact No");
    document.form1.phone.focus();
    return false;
  }
  if(document.form1.email.value=="")
  {
    alert("Plese Enter your Email Address");
    document.form1.email.focus();
    return false;
  }
  e=document.form1.email.value;
        f1=e.indexOf('@');
        f2=e.indexOf('@',f1+1);
        e1=e.indexOf('.');
        e2=e.indexOf('.',e1+1);
        n=e.length;

        if(!(f1>0 && f2==-1 && e1>0 && e2==-1 && f1!=e1+1 && e1!=f1+1 && f1!=n-1 && e1!=n-1))
        {
            alert("Please Enter valid Email");
            document.form1.email.focus();
            return false;
        }
  return true;
  }

</script>
<link href="quiz.css" rel="stylesheet" type="text/css">
<style type="text/css">
body,td,th {
color: #C30;
}
a:link {
color: #06F;
}
a:visited {
color: #06F;
}
.d {
color: #0F0;
}
.dff {
color: #00F;
}
.y {
color: #FF0;
}
.style7 {
color: #0F0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body><center></center>
<br>
<table width="100%" height="534" border="0">
   <tr>
     <td width="206" rowspan="2" valign="top">&nbsp;</td>
     <td width="651" height="57"><h1 align="left"><span class="d">New</span> <span class="dff">User</span><span class="style8"> <span class="y">Signup</span></span></h1></td>
   </tr>
   <tr>
     <td><form name="form1" method="post" action=" " onSubmit="return check();">
       <table width="532" height="341" border="0" align="left" bordercolor="#CCFF99" bordercolordark="#00CCFF" cellpadding="2" cellspacing="3" >
         <tr>
           <td><div align="left" class="style7">Login Id </div></td>
           <td><input type="text" name="lid"></td>
         </tr>
         <tr>
           <td class="style7">Password</td>
           <td><input type="password" name="pass"></td>
         </tr>
         <tr>
           <td class="style7">Confirm Password </td>
           <td><input name="cpass" type="password" id="cpass"></td>
         </tr>
         <tr>
           <td class="style7">Name</td>
           <td><input name="name" type="text" id="name"></td>
         </tr>
         <tr>
           <td valign="top" class="style7">Address</td>
           <td><textarea name="address" id="address"></textarea></td>
         </tr>
         <tr>
           <td valign="top" class="style7">City</td>
           <td><input name="city" type="text" id="city"></td>
         </tr>
         <tr>
           <td valign="top" class="style7">Phone</td>
           <td><input name="phone" type="text" id="phone"></td>
         </tr>
         <tr>
           <td valign="top" class="style7">E-mail</td>
           <td><input name="email" type="text" id="email"></td>
         </tr>
         <tr>
           <td>&nbsp;</td>
           <td><input type="submit" name="Submit" value="Signup">
           </td>
         </tr>
       </table>
     </form></td>
   </tr>
 </table>

<br><br><br><br><br>
<center></center>
</body>
</html>

Screen Shot:

Signup page with Validation

Real marksheet using HTML

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;
var e=document.form1.txtoffice.value;
document.getElementById("demooffice").innerHTML=e;
var f=document.form1.txtweb.value;
document.getElementById("demoweb").innerHTML=f;
var g=document.form1.txtit.value;
document.getElementById("demoit").innerHTML=g;
var h=document.form1.txtc.value;
document.getElementById("democ").innerHTML=h;
var txt1=eval(parseFloat(document.form1.txtoffice.value)+parseFloat(document.form1.txtweb.value)
+parseFloat(document.form1.txtit.value)+parseFloat(document.form1.txtc.value));
document.getElementById("demototal").innerHTML=txt1;
var txt2=eval(parseFloat(txt1*100)/400);
document.getElementById("demoper").innerHTML=txt2.toFixed(2)+"%";

switch(true)
{
case(txt2>=80):
document.getElementById("demograde").innerHTML="A1";
break;
case(txt2>=70):
document.getElementById("demograde").innerHTML="A";
break;
case(txt2>=60):
document.getElementById("demograde").innerHTML="B";
break;
case(txt2>=50):
document.getElementById("demograde").innerHTML="C";
break;
case(txt2>=40):
document.getElementById("demograde").innerHTML="D";
break;
case(txt2<40):
document.getElementById("demograde").innerHTML="Fail";
break;
}

}
</SCRIPT>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</HEAD>

<BODY>
<DIV class="color">
<H1 align="center"style="font-family:cambria;font-size:40";><U>STUDENT MARKSHEET</H1>
<FIELDSET>
<LEGEND> STUDENT INFORMATION </LEGEND>
<TABLE align="center" id="tbl">
<FORM name="form1">
</TR>
<TD width="140">Name:</TD> <TD><INPUT type="text" name="txtname"/></TD>
<TD> &nbsp; &nbsp;Father Name:</TD><TD> <INPUT type="text" name="txtfname"/></TD>
</TR>

<TR>
<TD width="140" > Institute Name:</TD><TD> <INPUT type="text" name="txtins"/></TD>
<TD style="text-indent:16px">Batch:</TD><TD> <INPUT type="text" name="txtbatch"/></TD>
</TR>
</TABLE>
</FIELDSET></BR>
<FIELDSET>
<LEGEND> SUBJECTS MARKS </LEGEND>
<TABLE id="tbl2">
<TR>
<TD> Office Automation:</TD><TD> <INPUT type="text" name="txtoffice" maxlength="2" size="10"/> Out of 100 </TD>

</TR>
<TR>
<TD> Web Designing:</TD><TD>  <INPUT type="text" name="txtweb" maxlength="2" size="10"/> Out of 100</TD>
</TR>
<TR>
<TD> IT:</TD><TD> <INPUT type="text" name="txtit" maxlength="2" size="10"/> Out of 100</TD>
</TR>
<TR>
<TD> C# Programing:</TD><TD> <INPUT type="text" name="txtc" maxlength="2" size="10" /> Out of 100</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
</TR>
</TABLE>
</FIELDSET>
<DIV class="btn">
<button style="font-size:17" type="button" onclick='myFun()'>Submit</button>
<button style="font-size:17" type="Reset">Reset</button>
</DIV>
<DIV class="demo">
  <TABLE border="1">
<TR>
<TH colspan="8" width="240"> Student Information </TH>
</TR>
<TR>
<TD width="135">Name:</TD><TD><FONT face="arial" id="demoname"></FONT></TD>
</TR>
<TR>
<TD width="135">Father Name:</TD><TD><FONT face="arial" id="demofname"></FONT></TD>
</TR>
<TR>
<TD width="135">Institute Name:</TD><TD><FONT face="arial" id="demoins"></FONT></TD>
</TR>
<TD width="135">Batch:</TD> <TD><FONT face="arial" id="demobatch"></FONT></TD>
</TR>
<TR>
<TH colspan="8" width="240"> Subjects Marks </TH>
</TR>
<TR>
<TD width="135">Office Automation:</TD> <TD><FONT face="arial" id="demooffice"></FONT></TD>
</TR>
<TR>
<TD width="135">Web Designing:</TD><TD><FONT face="arial" id="demoweb"></FONT></TD>
</TR>
<TD width="135">IT:</TD><TD><FONT face="arial" id="demoit"></FONT></TD>
</TR>
<TR>
<TD width="135">C# Programing:</TD><TD><FONT face="arial" id="democ"></FONT></TD>
</TR>
<TR>
<TH colspan="8" width="240"> Marks Result </TH>
</TR>
<TR>
<TD width="135">TOTAL:</TD><TD> <FONT face="arial" id="demototal"></FONT></TT></TD>
</TR>
<TR>
<TD width="135">Percentage:</TD><TD><FONT face="arial" id="demoper"></FONT></TD>
</TR>
<TR>
<TD width="135">Grade:</TD><TD><FONT face="arial" id="demograde"></FONT></TD>
</TR>
</TABLE>
</DIV>
</DIV>

</BODY>
</HTML>

Screen Shot:

How to make marksheet in HTML

HTML Validation with Javascript


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="#F4FAFF" style="border:1px solid #0099FF;">
  <tr>
    <td colspan="2" class="heading" align="center" style="border-bottom:1px solid #0099FF;"><a href="http://softproweb.blogspot.com/">Submit Form</a></td>
  </tr>
  <tr>
    <td colspan="2" class="heading" align="center" height="10"></td>
  </tr>

  <tr>
  <td align="left" class="txt">Username *</td>
<td align="right"><input type="text" name="username" id="username" size="28" title="Username" class="required alpha" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Password *</td>
<td align="right"><input type="password" name="password" id="password" size="28" title="Password" class="required alpha min 6 max 20 match cpassword" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Confirm Password *</td>
<td align="right"><input type="password" name="cpassword" id="cpassword" size="28" title="Confirm Password" class="required alpha" /></td>
  </tr>

  <tr>
  <td align="left" class="txt">First Name *</td>
<td align="right"><input type="text" name="fname" id="fname" size="28" title="First Name" class="required text" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Last Name</td>
<td align="right"><input type="text" name="lname" id="lname" size="28" title="Last Name" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Age *</td>
<td align="right"><input type="text" name="age" id="age" size="28" title="Age" class="required number min 10 max 100 " /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Email *</td>
<td align="right"><input type="text" name="email" id="email" size="28" title="Email" class="required email" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Phone *</td>
<td align="right"><input type="text" name="phone" id="phone" size="28" title="Phone" class="required regex ^\-?\d+$" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Fax</td>
<td align="right"><input type="text" name="fax" id="fax" size="28" title="Fax" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Date Of Birth *</td>
<td align="right"><input type="text" name="dob" id="dob" size="28" title="Date Of Birth" class="required date" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Website *</td>
<td align="right"><input type="text" name="website" id="website" size="28" title="Website" class="required web" /></td>
  </tr>
  <tr>
  <td align="left" class="txt">Country *</td>
<td align="left">&nbsp;
<select name="country" id="country" title="Country" class="required">
<option value="">--- Select ---</option>
<option value="Canada">Canada</option>
<option value="UK">UK</option>
<option value="USA">USA</option>
<option value="Pakistan">Pakistan</option>
<option value="Other">Other</option>
</select>
</td>
  </tr>
<tr>
  <td align="left" class="txt">Gender *</td>
<td align="left">
<input type="radio" name="gender" value="m" title="Gender" class="required" />Male
<input type="radio" name="gender" value="f" title="Gender" class="required" />Female
</td>
  </tr>

    <tr>
  <td align="left" class="txt">Disclaimer *</td>
<td align="left">
<input type="checkbox" name="disclaimer" value="1" title="Disclaimer" class="required" />
</td>
  </tr>
  <tr>
<td align="right" colspan="2">
<input type="submit" name="btnSubmit" value="Submit Form" />
</td>
  </tr>

</table>
</form>
<br /><br />

Screen Shot:
HTML Validation with Javascript

HTML Validation with Javascript



How to make horizontal accordion using jquery

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 solid #fff;}

#accordion li img {
border: none;
border-right: 1px solid #fff;
float: left;
margin: -15px 15px 0 0;
}

#accordion li.active {
width: 450px;
}

</style>
</head>
<body>

<ul id="accordion">
      <li>
       
        <strong>Speed Programming Task </strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
     
        <strong>Data base sql server </strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
       
        <strong>Computer Networking</strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
      </li>
      <li>
     
        <strong>Backtrack Learning Exercise </strong><br/>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque.
    </li>
  </ul>
</body>
</html>

Screen Shot:

How to make horizontal accordion using jquery

How to make vertical accordion using jquery

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>
<div id="panel">Attendance:   assessment</div>

<div id="flip1">C# , C++ , PHP </div>
<div id="panel1">Student

  position.</div>

<div id="flip2">Be Happy</div>
<div id="panel2">Hello world!</div>

</body>
</html>

Screen Shot:
How to make simple jquery accordion vertical

How to make simple jquery accordion

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>
    <p>
    OUR MISSION
    </p>
  </div>
  <h3>"C"ABOUT US</h3>
  <div>
    <p>
    BRANCHES
    </p>
    <ul>
      <li>celeb one</li>
      <li>celeb two</li>
      <li>celeb three</li>
    </ul>
  </div>
  <h3>"D"CONTUCT US</h3>
  <div>
    <p>
    This is the fourth paragraph.
    </p>
    <p>
    This is the fifth paragraph.
    </p>
  </div>
</div>

Screen Shot:


How to show a popup contact us page with jquery

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; }
        .f {
color: #0F0;
}
        .f {
font-family: Arial, Helvetica, sans-serif;
color: #900;
}
        body,td,th {
color: #000;
}
        body {
background-color: #0F9;
}
        </style>
         </head>
   <body>
   <h4 align="center" class="f">A Popup Email Form Demonstration</h4>
   <p align="center">&nbsp;</p>
        To make a popup form is easy. All you need is to make a form at <a href="http://www.formmail-maker.com">formmail-maker.com</a>, then use jQuery and ColorBox plugin to make it pop.
    <p /><p />
        <p><h3>Click here for the popup form demo : <a class='iframe' href="http://www.formmail-maker.com/var/demo/jquery-popup-form/form.php">Contact Us</a></h3></p>

</body>
</html>

Screen Shot:


                                      





- Copyright © Mesh Software - bel4solutions - Powered by Blogger - Designed by Waqeeh Ul Hasan -