Have something to say? Contribute New Article Reply to this Article
php pop-up link pls help
hi.!!I have been developing an online enrolment system for a client in php...ive encountered a problem during the middle situation.The client added a situation that when the student click on the first year link, the subject of that year will just pop-up under the link.example:
first year
- Filipino
- Math
- Science
When the user click first year, the filipino,math, and science will appear, and will dissapear when they click another link.
Please help i dont know how to do this.!
<html>
<head>
<style>
.year { width:25%; margin:3%; padding:3%; float:left; }
</style>
<script language="javascript" type="text/javascript">
<!--
(document.getElementById) ? dom = true : dom = false;
function hideIt(layer) {
if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie
if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla
function showIt(layer) {
if (dom) {document.getElementById(layer).style.visibility='visible';} //ie
if (document.layers) {document.layers[layer].visibility='show';} } //mozilla
onResize="window.location.href = window.location.href"
//--></script>
</head>
<body>
<noscript> This form requires Javascript to process</noscript>
<div class='year'>
<a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');" onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick-->
<div id='firstyear' style='visibility:hidden'> <!-- initially invisible -->
<input type='checkbox' value='filipino'>filipino
<input type='checkbox' value='math'>math
<input type='checkbox' value='sci'>science
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');" onblur="hideIt('secondyear');" taborder=2>second Year</a>
<div id='secondyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>2filipino
<input type='checkbox' value='math'>2math
<input type='checkbox' value='sci'>2science
</div></div>
<div class='year'>
<a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');" onblur="hideIt('thirdyear');" taborder=3>third Year</a>
<div id='thirdyear' style='visibility:hidden'>
<input type='checkbox' value='filipino'>3filipino
<input type='checkbox' value='math'>3math
<input type='checkbox' value='sci'>3science
</div></div>
</body</html> the javacript will hide or show any number of div span p textarea
Its been a long time since I coded anything new in javascript, if the script does not run, change the id='firstyear' to name='firstyear'
edit** for tabulated data as
first year .. second year .. third year
i messed up
as above attempting to select a checkbox will hide them again, should be::
<a href='#' onfocus="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" onclick="showIt('firstyear');hideIt('secondyear');hideIt('thirdyear');" tabindex=1>First Year</a>
As PHP is a server side language, PHP can't be used to modify the page once it has been sent to the browser. You need a client side language (that is executed by the viewers browser) such as Javascript to do what you are explaining. I haven't done much with javasript so I can't help you any further.
Thank you for your advise>!!i will try to search and code this maybe tommorow in javascript.!
<html> <head> <style> .year { width:25%; margin:3%; padding:3%; float:left; } </style> <script language="javascript" type="text/javascript"> <!-- (document.getElementById) ? dom = true : dom = false; function hideIt(layer) { if (dom) {document.getElementById(layer).style.visibility='hidden';} //ie if (document.layers) {document.layers[layer].visibility='hide';} } //mozilla function showIt(layer) { if (dom) {document.getElementById(layer).style.visibility='visible';} //ie if (document.layers) {document.layers[layer].visibility='show';} } //mozilla onResize="window.location.href = window.location.href" //--></script> </head> <body> <noscript> This form requires Javascript to process</noscript> <div class='year'> <a href='#' onfocus="showIt('firstyear');" onclick="showIt('firstyear');" onblur="hideIt('firstyear');" taborder=1>First Year</a> <!-- onfocus onclick allows for keyboard tab as well as mouseclick--> <div id='firstyear' style='visibility:hidden'> <!-- initially invisible --> <input type='checkbox' value='filipino'>filipino <input type='checkbox' value='math'>math <input type='checkbox' value='sci'>science </div></div> <div class='year'> <a href='#' onfocus="showIt('secondyear');" onclick="showIt('secondyear');" onblur="hideIt('secondyear');" taborder=2>second Year</a> <div id='secondyear' style='visibility:hidden'> <input type='checkbox' value='filipino'>2filipino <input type='checkbox' value='math'>2math <input type='checkbox' value='sci'>2science </div></div> <div class='year'> <a href='#' onfocus="showIt('thirdyear');" onclick="showIt('thirdyear');" onblur="hideIt('thirdyear');" taborder=3>third Year</a> <div id='thirdyear' style='visibility:hidden'> <input type='checkbox' value='filipino'>3filipino <input type='checkbox' value='math'>3math <input type='checkbox' value='sci'>3science </div></div> </body</html>the javacript will hide or show any number of div span p textarea Its been a long time since I coded anything new in javascript, if the script does not run, change the
id='firstyear'toname='firstyear'edit** for tabulated data as first year .. second year .. third year
Thank you so much.its working now..hope to see you again.!
God bless.!
This article has been dead for over three months
You
© 2012 DaniWeb® LLC
