i have a modal popup "gatepass". when i click on generate , it generates this gatepass. In this gatepass i have two buttons close and print . when i click on print button, i want the gatepass to print and not the background. please guide me , how can i do it?
<html>
<head>
<script src="js/calculateamt.js" type="text/javascript"></script>
<link href="CSS/popup.css" rel="stylesheet" type="text/css">
</head>
<body>
<fieldset id="gatepass" class="popup">
<p align="center"><span style="size: 40px; font-size: 24px; alignment-adjust:middle">CASH RECIEPT</span></p>
<table width="453" border="0" align="center" cellpadding="20px">
<tr>
<td width="188" height="51">RECIEPT NO :
<label id="recno"><%=recieptno%></label></td>
<td width="179">DATE : <label id="date"><%=date%></label></td>
</tr>
<tr>
<td height="57">NAME : <label id="name" > <%=firstname%> <%=lastname%></label></td>
<td>VILLAGE : <label id="village"> <%=vill%></label></td>
</tr>
</table>
<p> </p>
<table width="697" height="52" border="0" align="center" cellpadding="20px">
<tr>
<td width="205">AGREEMENT NO : <label id="agrno"> <%=agreno%></label> </td>
<td width="149">LOT NO : <label id="lotno"><%=agreno%>/<%=bag%></label></td>
<td width="151">BAGS : <label id="bags" ><%=bag%></label></td>
<td width="174"> VEHICLE NO : <label id="vehicle"></label></td>
</tr>
</table>
<p> </p>
<table width="200" height="47" border="0" align="center" cellpadding="20px">
<tr>
<td> TOTAL AMOUNT :
<label onloadstart="javascript:totalamt()" id="Totalamt" name ="total"></label></td>
</tr>
</table>
<p align="center">
<p align="center">
<input type="button" name="Print" id="Print" value="PRINT" onClick="window.focus();window.print();">
<input type="button" name="close" id="close" value="CLOSE" onClick = "closePopup();" />
<p> </p>
<p> </p>
<p> </p>
</fieldset>
</body>
</html>
I suggest you reseach up on print style sheets
http://www.webdesignerdepot.com/2010/01/10-tips-for-better-print-style-sheets/
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Related
I have two pages one for a user to input a bus stop id. This bus stop id parses a live API. And one page for the results of that. The pages are showing on the single page at the moment. I want the user to get redirected to the second page. I have tired linking the pages but it did not work. ANy Suggestions?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css" />
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
<div data-role="page1">
<div data-role="content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
<script type="text/javascript">
//On click of button this function get call
$('#button_get_bus').click(function(){
//Get Enter Bus Id
var bus_stop_id=document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if(bus_stop_id=="")
{
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid="+bus_stop_id+"&format=json",
dataType: 'json',
success: function(results){
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj =jQuery.parseJSON(str);
var destination=obj.results[0].destination;
document.getElementById("to").innerHTML=destination;
var origin=obj.results[0].origin;
document.getElementById("from").innerHTML=origin;
var arrivaldatetime=obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML=arrivaldatetime;
var departuredatetime=obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML=departuredatetime;
document.getElementById("resultDiv").style.display="block";
}
});
});
</script>
</body>
</html>
Please see $.mobile.pageContainer.pagecontainer("change", "#page2"); in this example below:
//On click of button this function get call
$(document).on('click', '#button_get_bus', function() {
//Get Enter Bus Id
var bus_stop_id = document.getElementById("bus_stop_id").value;
//If Id is blank then given error
if (!bus_stop_id) {
alert("Please enter bus stop number");
return false;
}
// This Function post request to API with the given bus stop id
$.ajax({
url: "https://data.smartdublin.ie/cgi-bin/rtpi/realtimebusinformation?stopid=" + bus_stop_id + "&format=json",
dataType: 'json',
success: function(results) {
// It returnes json data
console.log(results);
var str = JSON.stringify(results);
// Code for parsing json and inserting data in html
var obj = jQuery.parseJSON(str);
var destination = obj.results[0].destination;
document.getElementById("to").innerHTML = destination;
var origin = obj.results[0].origin;
document.getElementById("from").innerHTML = origin;
var arrivaldatetime = obj.results[0].arrivaldatetime;
document.getElementById("arival").innerHTML = arrivaldatetime;
var departuredatetime = obj.results[0].departuredatetime;
document.getElementById("departure").innerHTML = departuredatetime;
document.getElementById("resultDiv").style.display = "block";
$.mobile.pageContainer.pagecontainer("change", "#page2");
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Dublin Concert Listings</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/theme.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" href="css/custom.css" />
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page" id="page1">
<div class="ui-content">
<div class="content-primary">
<table cellpadding="5" cellspacing="5" align="center" width="100%">
<tr>
<td align="center"><h1>Get Next Bus Details</h1></td>
</tr>
<tr>
<td align="center">
<div class="ui-input-search ui-shadow-inset ui-input-has-clear ui-body-inherit ui-corner-all">
<input data-type="search" placeholder="Bus Stop Id" id="bus_stop_id" name="bus_stop_id">
Clear text
</div>
<input type="button" value="Get Current Update" id="button_get_bus" style="background-color: #fff;padding: 8px;"></td>
</tr>
</table>
</div>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-add-back-btn="true"></div>
<div class="ui-content">
<div class="content-primary">
<div id="resultDiv" style="display:none; padding-top:40px">
<table cellpadding="5" cellspacing="5" align="center" width="50%" style="border:solid 1px #fff; ">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><strong>From</strong> </td>
<td>: </td>
<td><span id="from"></span> </td>
</tr>
<tr>
<td><strong>To</strong> </td>
<td>: </td>
<td><span id="to"></span> </td>
</tr>
<tr>
<td><strong>Arival Date Time</strong> </td>
<td>: </td>
<td><span id="arival"></span> </td>
</tr>
<tr>
<td><strong>Departure Date Time</strong> </td>
<td>: </td>
<td><span id="departure"></span> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- end of pageone -->
<!--Loading scripts at bottom of the page-->
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span>
<h1>loading</h1>
</div>
<div class="ui-panel-dismiss"></div>
</body>
</html>
Remove your old jquery library and add the library before you start the script.You can add any of these following CDN to start it.
Google:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Microsoft
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
your above example
I have enroll.html page . The code of this page is as follows :
<HTML>
<HEAD>
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="http://10.11.201.170/data/sultan/enroll.asp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " id="buttonEnroll" name="btnEnroll">
</form>
<div id="result"></div>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<script>
$("#buttonEnroll").on('click',function(e){
e.preventDefault();
$( "#result" ).load( "http://10.11.201.170/data/2/sysinfo1.asp" );
alert("Page loading completed");
});
</script>
</center>
</BODY>
</HTML>
I want to load sysinfo1.asp page when I press Enroll button . The code in this page insert data in database . The code of this page is as follows :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="VBScript" Src="GetInfo.vbs">
</Script>
<title>Enroll Fingerprint.</title>
</HEAD>
<BODY Onload="GetLearnModel()";>
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p>Enroll</p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<Form name="scan" method="Post" action="famenroll2.asp?name=<%=Request("name")%>&check=<%=Request("check")%>&finger=<%=Request("finger")%>">
<Input type="hidden" name="LearnModel" value="">
<Input type="text" name="SlNo" value="">
</Form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><font size="5" color="#ff0000"><%=Request.Form("SlNo")%></font><font size="5"> Enroll Successfully!</font></p>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
<% Dim Conn,strSQL,objExec,NumOfRecords,se_name,finger
cust_no=Request.QueryString("name")
Set Conn = Server.Createobject("ADODB.Connection")
Conn.Open "Driver={Oracle in XE};DBQ=xe;UID=biotpl;PWD=biotpl;"
'Query for the customer entry in FP_ENROLL Table
strSQL2 = "INSERT INTO TEST values(1,'OS')"
Set objExec = Conn.Execute(strSQL2)
'Query for the no of fingers to be taken for a customer in FP_FINGER_SETUP Table
'Set objExec = Conn.Execute("select FINGURE_NO NoF from BIOTPL.FP_FINGER_SETUP where USER_TYPE=" & Request.QueryString("cust_type") )
'NumOfFingers = objExec("NoF")
'Conn.Close()
Set objExec = Nothing
Set Conn = Nothing
%>
</center>
</BODY>
</HTML>
But the data is not inserted in the database . Why ? Is there any problem ?
Remove the following line from your Form
action="http://10.11.201.170/data/sultan/enroll.asp"
then it will work I guess.
So I'm working on a very simple web app. When I do a cache clear and hard reset, or I open the page in a different browser, it won't display everything. But then every refresh after that the display is fine. Is this something wrong with my code? Here's a copy of my HTML.
<!DOCTYPE html>
<html>
<head>
<title>Small Store</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body ng-app="myApp" ng-controller="store">
<div id="wrapper">
<div class="box" id="Store">
<table>
<thead>
<tr>
<td colspan="3" style="text-align:center">Store</td>
</tr>
</thead>
<tbody>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Price</em></td>
</tr>
<tr ng-repeat="item in store">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Price|currency}}</td>
<td>
<button ng-disabled="store.money<item.Price" ng-click="buy(item)">Buy</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Stock" ng-hide="stock.length===0">
<table>
<tbody>
<tr>
<td colspan="3" style="text-align:center">Stock</td>
</tr>
<tr>
<td><em>Item</em></td>
<td> </td>
<td><em>Quantity</em></td>
</tr>
<tr ng-repeat="item in stock" ng-hide="item.Quantity<1">
<td><b>{{item.Name}}</b></td>
<td> </td>
<td>{{item.Quantity}}</td>
<td>
<button ng-click="sell(item)">Sell</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box" id="Cart" ng-hide="cart.length===0">
<!-- TO IMPLEMENT -->
</div>
</div>
<div id="Editor">
<!-- TO IMPLEMENT -->
</div>
<div id="money">
Remaining money: {{money|currency}}
<p>
<input type="checkbox" name="Edit" value="true"> Edit store
<br>
</p>
</div>
<script src="app.js"></script>
</body>
</html>
And here it is in codepen with the css and javascript. The error persists in codepen so I think the error is in my code but I'm not exactly sure..
I'm trying to add one picture to the left side of this page I know basic of HTML. Any suggestion?
Following is not woking? Do I need two container or something wrong?
<?
session_start();
$_SESSION['usertmp'];
$_SESSION['emailtmp'];
if(strlen($_SESSION['usertmp'])<1 ||is_null($_SESSION['usertmp']))
{
$_SESSION['usertmp'] = "";
}
if(strlen($_SESSION['emailtmp'])<1 ||is_null($_SESSION['emailtmp']))
{
$_SESSION['emailtmp'] = "";
}
?>
<!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=utf-8" />
<title>Show Information</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1; padding:10px;}
#
</style>
</head>
<body>
<div id="page-background"><img src="images/main.jpg" width="100%" height="100%" alt="Smile"></div>
<left>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
</left>
<center>
<div class="container" style="width:800px" id="content">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /> <!-- end .header --></div>
<center>
<div class="content" style="background-image:url(); height:427px; color: #FFF;vertical-align:middle">
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div>
</center>
</center>
</body>
</html>
There are many ways you could achieve what you are looking to do. You should try to simplify your markup if you can. If you want to keep your login credential table in the middle. Here is a way to do it using 3 main divs as 32.98% width columns. Float them left and use the first column for the pic that you want on the left. Here it is in jsbin. Of course the images aren't working bc it doesn't have access to the proper path http://jsbin.com/muxac/1/edit
<!doctype html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="styles/main.css">
<style>
.col-1, .col-2, .col-3 {
width: 32.98%;
float:left;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
</header>
<div class="row">
<div class="col-1">
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" /></div>
</div> <!-- End of COLUMN 1 -->
<div class="col-2"> <!-- Start of COLUMN 2 -->
<div class="header"><img src="images/logoo.png" width="177" height="61" longdesc="main.php" />
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form1" method="post" action="checklogin.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><strong>Member Login </strong></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername"></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Login"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
<table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="">
<tr>
<form name="form2" method="post" action="signup.php">
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="">
<tr>
<td colspan="3"><p> </p>
<p><strong> Sign Up Here</strong></p></td>
</tr>
<tr>
<td width="78">Username</td>
<td width="6">:</td>
<td width="294"><input name="myusername" type="text" id="myusername" value = "<? echo $_SESSION['usertmp'] ?>"></td>
</tr>
<tr>
<td>Enter Password</td>
<td>:</td>
<td><input name="mypassword" type="password" id="mypassword"></td>
</tr>
<tr>
<td>Confirm Password</td>
<td>:</td>
<td><input name="mypassword2" type="password" id="mypassword2"></td>
</tr>
<tr>
<td>Email id</td>
<td>:</td>
<td><input name="myemail" type="text" id="myemail" value = "<? echo $_SESSION['emailtmp'] ?>"></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="submit" name="Submit" value="Sign Up"></td>
</tr>
</table>
</td>
</form>
</tr>
</table>
</div> <!-- End of COLUMN 2 -->
<div class="col-3"> <!-- COLUMN 3 -->
<!-- You can leave this empty if you want -->
</div>
<div class="row">
<div class="footer">
</div>
</div>
</div>
</div>
</body>
</html>
To position the picture You can use CSS. Here is the code(Insert it in the style attribute of the html tag):
position:absolute;left:0px;top:0px/*Here inserte the necesary pixels to position the picture*/
If what you want is just the header image to be at the top left, put inside the <style> this: .header img {display: inline-block; float: left;}
i have a page having some contents plus a edit button So when you hit the edit button it will show the 2nd page. I want it as if both are in only one page. it will look like the last name(text area is converted into text field)Please tell me how to do it
the screen shot is
and the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 5px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
</td>
<td>
<label for="LastName">LastName</label>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
</td>
<td>
<label for="FirstName">First Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<label for="DateofBirth">Date of Birth</label>
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<label for="LastName">Qualification</label>
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
</td>
<td>
<label for="RegistrationNo">Registration No</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<label for="CountryofRegistration">Country of Registration</label>
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<label for="PracticeName">Practice Name</label>
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
</td>
<td>
<label for="Phone">Phone</label>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
</td>
<td>
<label for="Email">Email</label>
</td>
</tr>
<tr>
<td height="30">
<b></b>
</td>
<td align="right" >
<label for="Email"><input type="submit" class="button button-submit" value="Edit" /></label>
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<label for="Address">Address</label>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<label for="Street">Street</label>
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
</td>
<td>
<label for="City">City</label>
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
</td>
<td>
<label for="State">State</label>
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
</td>
<td>
<label for="Country">Country</label>
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<label for="PinCode">Pin Code</label>
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<label for="HowDoYouKnow">How Do You Know</label>
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<label for="Comments">Comments</label>
</td>
</tr>
</table><div align="center" style="padding-top: 30px">
</div>
</div>
</div>
</div>
</article>
<!-- Article 1 end -->
<!-- Article 2 start -->
<div class="line"></div>
<div class="space"></div> <div class="space"></div> <div class="space"></div> <div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div><div class="space"></div>
<article id="article2">
<h2>Change Password</h2>
<div class="line"></div>
<div class="articleBody clear">
<figure>
<img src="medical.jpg" width="620" height="440" /></a>
</figure>
<p><div align="center" style="padding-top: 30px">
<table cellspacing="10" cellpadding="10">
<tr>
<td width="200" height="30"><h5>Old Password</h5></td>
<td height="30"><input name="old" type="password"></td>
</tr>
<tr>
<td height="30"><h5>New Password</h5></td>
<td height="30"><input name="newPsw" type="password"></td>
</tr>
<tr>
<td height="30"><h5>Confirm Password</h5></td>
<td height="30"><input name="confirm" type="password"></td>
</tr>
</table>
</div>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
when you hit the edit button the this should this display
![enter image description here][2]
the source code is as follows
<!DOCTYPE html> <!-- The new doctype -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>home</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<section id="page" > <!-- Defining the #page section with the section tag -->
<header > <!-- Defining the header section of the page with the appropriate tag -->
<hgroup>
<h1>Your Logo</h1>
<h3>and a fancy slogan</h3>
</hgroup>
<nav class="clear"> <!-- The nav link semantically marks your main site navigation -->
<ul>
<li>My Profile</li>
<li>Change password</li>
<li>Navigation Menu</li>
</ul>
</nav>
</header>
<section id="articles"> <!-- A new section with the articles -->
<!-- Article 1 start -->
<div class="line"></div> <!-- Dividing line -->
<article id="article1"> <!-- The new article tag. The id is supplied so it can be scrolled into view. -->
<h2>Dr. Sukant Kumar nayak</h2>
<div class="line"></div>
<div class="articleBody clear">
<div >
<div style="float: left; padding-left: 50px; padding-top: 50px">
<table cellspacing="10" cellpadding="10" >
<tr>
<td width="200" height="30">
<b>Last Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="LastName" type="text" value="<%=lastName %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>First Name</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="FirstName" type="text" value="<%=firstName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Date of Birth</b>
</td>
<td>
<input name="DateofBirth" type="text" value="<%=DOB %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Qualification</b>
</td>
<td>
<input name="Qualification" type="text" value="<%=Qualification %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Registration. No.</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="RegistrationNo" type="text" value="<%=RegistrationNo %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Country of Registration</b>
</td>
<td>
<input name="CountryofRegistration" type="text" value="<%=CountryOfRegistration %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Practice Name</b>
</td>
<td>
<input name="PracticeName" type="text" value="<%=PracticeName %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Phone</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Phone" type="text" value="<%=Phone %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Email</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Email" type="text" value="<%=Email %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Image</b>
</td>
<td>
<input name="Image" type="file" />
</td>
</tr>
</table>
</div>
<div style="float: right;padding-right: 50px;padding-top: 50px">
<table>
<tr>
<td width="160" height="30">
<b>Address</b>
</td>
<td>
<input name="Address" type="text" value="<%=Address %>"/>
</td>
</tr>
<tr>
<td height="30">
<b>Street</b>
</td>
<td>
<input name="Street" type="text" value="<%=Street %>" />
</td>
</tr>
<tr>
<td height="30">
<b>City</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="City" type="text" value="<%=City %>" />
</td>
</tr>
<tr>
<td height="30">
<b>State</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="State" type="text" value="<%=State %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Country</b>
<p style="float:right; color: red ">* </p>
</td>
<td>
<input name="Country" type="text" value="<%=country %>" />
</td>
</tr>
<tr>
<td height="30">
<b>Pin Code</b>
</td>
<td>
<input name="PinCode" type="text" value="<%=PinCode %>" />
</td>
</tr>
<tr>
<td height="30">
<b>How do you know?</b>
</td>
<td>
<input name="HowDoYouKnow" type="text" />
</td>
</tr>
<tr>
<td height="30">
<b>Comment</b>
</td>
<td>
<textarea name="Comments" cols="15" rows="5" readonly></textarea>
</td>
</tr>
</table>
</div>
<br><br>
<div class="footer-bar" align="center" style="padding-top: 30px">
<table align="center" >
<tr >
<td width="100" align="center"><input type="submit" class="button button-submit" value="Submit" /></td>
<td width="100" align="center"><input type="reset" class="button button-submit" value="Reset" /></td>
</tr>
</table>
</div></p>
<p></p>
</div>
</article>
<!-- Article 2 end -->
<!-- Article 3 start -->
<div class="line"></div>
<!-- Article 3 end -->
</section>
<footer> <!-- Marking the footer section -->
<div class="line"></div>
<p>Copyright 2013 - mysite.com</p>
Go UP
dh
</footer>
</section> <!-- Closing the #page section -->
<!-- JavaScript Includes -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.scrollTo-1.4.2/jquery.scrollTo-min.js"></script>
<script src="script.js"></script>
</body>
</html>
As Praveen said, you don't need two different pages, but two divs in the same page, and then use some javascript to switch between the display/visibility of the two. You can do this with two different classess per element, which the classes having different properties for display (display:none and display:block) or visibility (visibilty: hidden and visibility:visible).
JQuery toggle() method is a straightforward option:
http://api.jquery.com/toggle/
But mind that it toggles display, so it will affect your layout (display:none affects your layout, while visibility:hidden does not), which is something probably you don't want. One way to avoid this (but I am not 100% sure this is the best way to do it) is to insert each div (position:absolute) within another div (position:relative)
apply a css class which you want to display.By clicking on button show those fields only.
Just Make two div.. One div with the first image contents and second div with second image content. and once u clicked edit button just hide the first div and display second div.....