sher_amf
10-27-2009, 06:00 AM
i am trying to do this effect in my page
click here (http://flowplayer.org/tools/demos/expose/form.html)
here is my code..i can't seem to figure out why it is not working
<!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>Welcome to PNRC!</title>
<style type="text/css">
@import url(style.css);
.style2 {
color: #FFFFFF;
font-size: 36px;
font-weight: bold;
}
.style6 {font-size: 16; font-weight: bold; }
#mask {
background:#678 url(/tools/img/expose/mask_gradient_1000.png) no-repeat;
background-position:13% 160px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topbar"></div>
<div id="header">
<div id="logo">
<table width="788" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="147"> </td>
<td width="631"><span class="style2">Philippine National Red Cross</span></td>
</tr>
</table>
</div>
<ul id="navigation">
<li><a href="index.jsp">Home</a></li>
<li><a href="services.jsp">Services</a></li>
<li><a href="porfolio.jsp">Portfolio</a></li>
<li><a href="contact.jsp">Contact</a></li>
</ul>
</div>
<div id="body">
<div id="leftmenu">
<div class="seperator"></div>
<div class="form">
<table width="200" border="0">
<form class="expose" id="form1" name="form1" method="post" action="vms_checkuser.jsp">
<tr>
<td><div align="center"><span class="style6">Login</span></div></td>
</tr>
<tr>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center"><span class="style6">Username</span></div></td>
</tr>
<tr>
<td>
<div align="center">
<input name="username" type="text" id="textfield" />
</div></td>
</tr>
<tr>
<td><div align="center"><span class="style6">Password</span></div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="password" name="password" id="textfield2" />
</div></td>
</tr>
<tr>
<td><label>
<label>
<div align="center">
<input type="submit" name="button" id="button" value="Submit" />
</div>
</label>
</form>
<script type="text/javascript">
$(function() {
// expose the form when it's clicked or cursor is focused
$("form.expose").bind("click keydown", function() {
$(this).expose({
// custom mask settings with CSS
maskId: 'mask',
// when exposing is done, change form's background color
onLoad: function() {
this.getExposed().css({backgroundColor: '#c7f8ff'});
},
// when "unexposed", return to original background color
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
<div align="center">
</label>
</div></td>
</tr>
</table>
<p> </p>
<p><a href="vms_mainpage.jsp"><img src="Images/icons-volunteer2.gif" width="181" height="51" border="0" /></a></p>
</div>
</div>
<div id="content">
<blockquote><img src="images/about pnrc.png" width="562" height="165" /></blockquote>
<br/>
<table width="555" border="0">
<tr>
<td colspan="2"><div>Born officially in 1947, but with roots that traces back to the revolutionary days, the Philippine National Red Cross has truly become the premier humanitarian organization in the country, committed to provide quality life-saving services that protect the life and dignity especially of indigent Filipinos in vulnerable situations.</div>
<div>*</div>
<div>The story of the Philippine National Red Cross is the story of men and women from all walks of life who have dedicated themselves to the service of humanity. It is the tale of hundreds of thousands of ordinary people who devoted their time and resources to help the poorest of the poor. Professionally trained and truly compassionate, these men and women are ready to lend a helping hand to those in need – whoever, whenever and wherever they may be.</div>
<div>*</div>
<div>In all its 60 years of reputable existence, the PNRC has lived through many changes that were intended to help more people. Where it used to be involved only in providing blood and in disaster-related activities, the PNRC now focuses on a holistic approach to uplift the condition of the most vulnerable. Where it used to offer short-term palliatives, it now offers a wider array of humanitarian services ranging from preventive medicine to therapeutic counseling to youth leadership.****</div>
<div>*</div>
<div>At present, the PNRC provides six major services: Blood Services, Disaster Management, Safety Services, Community Health and Nursing, Social Services and the Volunteer Service. All of them embody the fundamental principles of the International Red Cross and Red Crescent Movement – humanity, impartiality, neutrality, independence, voluntary service, unity and universality. These values guide and inspire all Red Cross staff and volunteers, to whom being a Red Crosser is more than just a philosophy but a way of life. </div></td>
</tr>
<tr>
<td width="54"> </td>
<td width="491"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<blockquote> </blockquote>
<h2> </h2>
</div>
<div class="clear"></div>
<div id="footer">
<!-- END ZYMIC.COM COPYRIGHT -->
</div>
</div>
</div>
</body>
</html>
click here (http://flowplayer.org/tools/demos/expose/form.html)
here is my code..i can't seem to figure out why it is not working
<!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>Welcome to PNRC!</title>
<style type="text/css">
@import url(style.css);
.style2 {
color: #FFFFFF;
font-size: 36px;
font-weight: bold;
}
.style6 {font-size: 16; font-weight: bold; }
#mask {
background:#678 url(/tools/img/expose/mask_gradient_1000.png) no-repeat;
background-position:13% 160px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="topbar"></div>
<div id="header">
<div id="logo">
<table width="788" border="0">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="147"> </td>
<td width="631"><span class="style2">Philippine National Red Cross</span></td>
</tr>
</table>
</div>
<ul id="navigation">
<li><a href="index.jsp">Home</a></li>
<li><a href="services.jsp">Services</a></li>
<li><a href="porfolio.jsp">Portfolio</a></li>
<li><a href="contact.jsp">Contact</a></li>
</ul>
</div>
<div id="body">
<div id="leftmenu">
<div class="seperator"></div>
<div class="form">
<table width="200" border="0">
<form class="expose" id="form1" name="form1" method="post" action="vms_checkuser.jsp">
<tr>
<td><div align="center"><span class="style6">Login</span></div></td>
</tr>
<tr>
<td><div align="center"></div></td>
</tr>
<tr>
<td><div align="center"><span class="style6">Username</span></div></td>
</tr>
<tr>
<td>
<div align="center">
<input name="username" type="text" id="textfield" />
</div></td>
</tr>
<tr>
<td><div align="center"><span class="style6">Password</span></div></td>
</tr>
<tr>
<td>
<div align="center">
<input type="password" name="password" id="textfield2" />
</div></td>
</tr>
<tr>
<td><label>
<label>
<div align="center">
<input type="submit" name="button" id="button" value="Submit" />
</div>
</label>
</form>
<script type="text/javascript">
$(function() {
// expose the form when it's clicked or cursor is focused
$("form.expose").bind("click keydown", function() {
$(this).expose({
// custom mask settings with CSS
maskId: 'mask',
// when exposing is done, change form's background color
onLoad: function() {
this.getExposed().css({backgroundColor: '#c7f8ff'});
},
// when "unexposed", return to original background color
onClose: function() {
this.getExposed().css({backgroundColor: null});
},
api: true
}).load();
});
});
</script>
<div align="center">
</label>
</div></td>
</tr>
</table>
<p> </p>
<p><a href="vms_mainpage.jsp"><img src="Images/icons-volunteer2.gif" width="181" height="51" border="0" /></a></p>
</div>
</div>
<div id="content">
<blockquote><img src="images/about pnrc.png" width="562" height="165" /></blockquote>
<br/>
<table width="555" border="0">
<tr>
<td colspan="2"><div>Born officially in 1947, but with roots that traces back to the revolutionary days, the Philippine National Red Cross has truly become the premier humanitarian organization in the country, committed to provide quality life-saving services that protect the life and dignity especially of indigent Filipinos in vulnerable situations.</div>
<div>*</div>
<div>The story of the Philippine National Red Cross is the story of men and women from all walks of life who have dedicated themselves to the service of humanity. It is the tale of hundreds of thousands of ordinary people who devoted their time and resources to help the poorest of the poor. Professionally trained and truly compassionate, these men and women are ready to lend a helping hand to those in need – whoever, whenever and wherever they may be.</div>
<div>*</div>
<div>In all its 60 years of reputable existence, the PNRC has lived through many changes that were intended to help more people. Where it used to be involved only in providing blood and in disaster-related activities, the PNRC now focuses on a holistic approach to uplift the condition of the most vulnerable. Where it used to offer short-term palliatives, it now offers a wider array of humanitarian services ranging from preventive medicine to therapeutic counseling to youth leadership.****</div>
<div>*</div>
<div>At present, the PNRC provides six major services: Blood Services, Disaster Management, Safety Services, Community Health and Nursing, Social Services and the Volunteer Service. All of them embody the fundamental principles of the International Red Cross and Red Crescent Movement – humanity, impartiality, neutrality, independence, voluntary service, unity and universality. These values guide and inspire all Red Cross staff and volunteers, to whom being a Red Crosser is more than just a philosophy but a way of life. </div></td>
</tr>
<tr>
<td width="54"> </td>
<td width="491"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<blockquote> </blockquote>
<h2> </h2>
</div>
<div class="clear"></div>
<div id="footer">
<!-- END ZYMIC.COM COPYRIGHT -->
</div>
</div>
</div>
</body>
</html>