Hi all,
Sorry if I post same thread. I cannot find any similar post to handle my problem.
I manage to show/hide tables(which I put on DIV tag) by using 2 radio button which is Kes and Lot.
But I'm having problem by starting click on either Kes and Lot.The page suddenly moved. The first table seem resize. Its also happen if i double click any radio button.
Anyone know why it happen? I stuck for 2 days already.:'(
Really appreciate opinion and response.:)
Thanks sooo much
Below is the page
<? session_start();?>
<?
include "dbconnector.php";
include "class_all.php";
$msg_call = new error_message();
?>
<!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>Sistem Fail Teknikal</title>
<style type="text/css">
<!--
@import url("*");
.style1 { color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.style2 {
color: #74653D;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FF0000;
}
.style6 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #74653D;}
-->
</style>
</script>
<script type="text/JavaScript">
<!--
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
//-->
</script>
<!-- calendar start -->
<link rel="stylesheet" type="text/css" media="all" href="Kalendar/calendar-black.css" title="win2k-cold-1" />
<script type="text/javascript" src="Kalendar/calendar.js"></script>
<script type="text/javascript" src="Kalendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="Kalendar/calendar-setup.js"></script>
<!-- calendar end -->
<script type="text/javascript">
function addRowLotNo()
{
var tbl = document.getElementById('tbl_lot_no');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// tarikh nilaian cell
/* var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'tarikh_nilaian1' + iteration;
el.id = 'tarikh_nilaian1' + iteration;
el.size = 10;
cellRight.appendChild(el);*/
//lot no
var cellLot_no = row.insertCell(0);
var el_lot_no = document.createElement('input');
el_lot_no.type = 'text';
el_lot_no.name = 'kod_lot_no' + iteration;
el_lot_no.id = 'kod_lot_no' + iteration;
el_lot_no.size = 20;
cellLot_no.appendChild(el_lot_no);
//luas n kod luas
var cellLuas = row.insertCell(1);
var el_luas = document.createElement('input');
el_luas.type = 'text';
el_luas.name = 'luas_tanah' + iteration;
el_luas.id = 'luas_tanah' + iteration;
el_luas.size = 5;
var el_k_luas = document.createElement('select');
el_k_luas.name = 'kod_luas_tanah' + iteration;
el_k_luas.id = 'kod_luas_tanah' + iteration;
el_k_luas.options[0] = new Option('--Pilih Luas--', ' ');
el_k_luas.options[1] = new Option('Depa', '1');
el_k_luas.options[2] = new Option('Ekar(Acre)', '2');
el_k_luas.options[3] = new Option('Hektar(Hectar)', '3');
el_k_luas.options[4] = new Option('Jemba', '4');
el_k_luas.options[5] = new Option('Kaki Persegi(Square Feet)', '5');
el_k_luas.options[6] = new Option('Meter Persegi(Square Meter)', '6');
el_k_luas.options[7] = new Option('Pole', '7');
el_k_luas.options[8] = new Option('Relong', '8');
el_k_luas.options[9] = new Option('Rood', '9');
cellLuas.appendChild(el_luas);
cellLuas.appendChild(el_k_luas);
//nilaian jabatan
var cellnilaian_jabatan = row.insertCell(2);
var el_nilaian_jabatan = document.createElement('input');
el_nilaian_jabatan.type = 'text';
el_nilaian_jabatan.name = 'nilaian_jabatan' + iteration;
el_nilaian_jabatan.id = 'nilaian_jabatan' + iteration;
el_nilaian_jabatan.size = 20;
cellnilaian_jabatan.appendChild(el_nilaian_jabatan);
//analisa
var cellAnalisa = row.insertCell(3);
var el_Analisa = document.createElement('textarea');
el_Analisa.name = 'analisa' + iteration;
el_Analisa.id = 'analisa' + iteration;
el_Analisa.cols = 20;
el_Analisa.rows = 3;
cellAnalisa.appendChild(el_Analisa);
}
function removeRowLotNo()
{
var tbl = document.getElementById('tbl_lot_no');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
</head>
<body>
<table width="70%" border="0" align="center">
<tr>
<td bordercolor="#74653D" bgcolor="#74653D"><div align="center"><span class="style1">Maklumat Fail Baru </span></div></td>
</tr>
</table>
<form id="form1" name="form1" method="post" action="">
<table width="70%" border="1" align="center">
<tr>
<td colspan="2"><span class="style2">Maklumat Asas </span></td>
</tr>
<tr>
<td width="197" height="31" class="style2">Jenis Fail </td>
<td width="836"><label>
<select name="kod_jenis_fail" id="kod_jenis_fail">
<option>--Sila pilih--</option>
<option value="1">Sulit</option>
<option value="2">Rahsia</option>
</select>
</label></td>
</tr>
<tr>
<td class="style2">Kod Jabatan </td>
<td class="style6">175</td>
</tr>
<tr>
<td><span class="style2">Jenis Maksud Nilaian</span></td>
<td><span class="forCenterTexts">
<select name="kod_maksud_nilaian" id="kod_maksud_nilaian" >
<option value="" selected="selected">--Pilih Maksud Nilaian--</option>
<?
$resultmn = mysql_query("select kod_maksud_nilaian,maksud_nilaian from maksud_nilaian order by maksud_nilaian ");
if(mysql_num_rows($resultmn))
{ $biljawatan = 1;
while ($myrowpaparmn=mysql_fetch_array($resultmn))
{
if ($maksud_nilaian == $myrowpaparmn[0])
$sel = "SELECTED";
else
$sel ="";
if ($biljawatan ==1)
print ("<option value=\"$myrowpaparmn[0]\" $sel >$myrowpaparmn[1]</option> ");
else
print ("<option value=\"$myrowpaparmn[0]\" $sel >$myrowpaparmn[1]</option> ");
$myrowpaparmn++;
}
}
?>
</select>
</span></td>
</tr>
<tr>
<td class="style2"> Kementerian </td>
<td><label>
<select name="kod_kementerian" id="kod_kementerian">
</select>
</label></td>
</tr>
<tr>
<td class="style2">Jabatan</td>
<td><label>
<select name="kod_jabatan" id="kod_jabatan">
</select>
</label></td>
</tr>
<tr>
<td class="style2"> Cawangan </td>
<td><span class="forForms">
<select name="kod_cawangan" id="kod_cawangan" >
<?
if ($nama_cawangan != "")
{
$hantar = $kod_cawangan
?>
<option value="<? echo $kod_cawangan ?>"><? echo $nama_cawangan?></option>
<?
}
?>
<?
$query = "SELECT * FROM viscawangan where kod_cawangan != 'ZZ' order by sort_caw asc ";
$result = mysql_query($query);
while ($r1 = mysql_fetch_array($result))
{
?>
<option value="<? echo $r1["kod_cawangan"] ?>"><? echo $r1["nama_cawangan"] ?></option>
<? }
?>
</select>
</span> </td>
</tr>
<tr>
<td colspan="2" class="style2">Maklumat Terperinci </td>
</tr>
<tr>
<td class="style2">Jenis Keterangan </td>
<td><label class="style6">
<span class="style6">
<input name="kod_jenis" type="radio" value="1" onclick="
if(document.getElementById('mydiv1').style.display == 'none')
{ document.getElementById('mydiv1').style.display = 'block'; document.getElementById('mydiv2').style.display = 'none';
} else{ document.getElementById('mydiv1').style.display = 'none'; }"/>
Kes
<input name="kod_jenis" type="radio" value="2" onclick="
if(document.getElementById('mydiv2').style.display == 'none')
{ document.getElementById('mydiv1').style.display = 'none';document.getElementById('mydiv2').style.display = 'block'; }
else{ document.getElementById('mydiv2').style.display = 'none'; } "/>
Lot
</label> </td>
</tr>
</table>
<br />
<br />
<div id="mydiv1" style="display:block; display:none;">
<table width="70%" border="1" align="center">
<tr>
<td colspan="2" class="style2"><div align="center">Keterangan Kes </div></td>
</tr>
<tr>
<td width="144" class="style2">Tarikh Mesyuarat </td>
<td width="340" class="style2"><label>
<input name="tarikh_mesyuarat" type="text" id="tarikh_mesyuarat" size="10"/><img src="Kalendar/img.gif" name="f_trigger_a" width="20" height="20" align="absmiddle" id="f_trigger_a" style="cursor: pointer; border: 1px solid red;" title="Klik di sini untuk pengisian tarikh mesyuarat"
onmouseover="this.style.background='red';" onMouseOut="this.style.background=''" />
<script type="text/javascript">
Calendar.setup({
inputField : "tarikh_mesyuarat", // id of the input field
ifFormat : "dd/mm/y", // format of the input field
button : "f_trigger_a", // trigger for the calendar (button ID)
align : "Bl", // alignment (defaults to "Bl")
singleClick : true
});
</script>
</label></td>
</tr>
<tr>
<td class="style2">Kehadiran</td>
<td class="style2"><label>
<textarea name="col_1" cols="50" rows="10" id="col_1"></textarea>
</label></td>
</tr>
<tr>
<td class="style2">Catatan</td>
<td class="style2"><label>
<textarea name="cacatan_kes" cols="50" rows="10" id="cacatan_kes"></textarea>
</label></td>
</tr>
</table>
</div>
<d
Sorry, I don't have a server which can run PHP installed in this computer... Also, the file is huge (16kb)!
Anyway, from what you said, the automatically adjusted size of display area tends to be from incorrectly nested div elements. Also, if you do not assign an absolute size of the 'div', it may be automatically adjusted by client's browser as you are experiencing. You may try assigning an absolute width value (using CSS or style), which is in pixel (px) not in percentage, to the display div elements you are using.
Sorry, I don't have a server which can run PHP installed in this computer... Also, the file is huge (16kb)!
Anyway, from what you said, the automatically adjusted size of display area tends to be from incorrectly nested div elements. Also, if you do not assign an absolute size of the 'div', it may be automatically adjusted by client's browser as you are experiencing. You may try assigning an absolute width value (using CSS or style), which is in pixel (px) not in percentage, to the display div elements you are using.
Hi,
Thanks for reply...i try to fix according to your suggestion by putting size on DIV tag
before
style="display:block; display:none"after
style="display:block; display:none;position:absolute; left: 18px; top: 280px; width: 850px; height: 390px;"My bad, i'm poor with css.I even test to save the same file with .html extension. Weird, with .html is working fine but with .php the problem still hit.
Thanks in advance
Sorry, I don't have a server which can run PHP installed in this computer... Also, the file is huge (16kb)!
Anyway, from what you said, the automatically adjusted size of display area tends to be from incorrectly nested div elements. Also, if you do not assign an absolute size of the 'div', it may be automatically adjusted by client's browser as you are experiencing. You may try assigning an absolute width value (using CSS or style), which is in pixel (px) not in percentage, to the display div elements you are using.
u can change the extension to .html...
i manage to do it. tq tq tq tq
thanks a lot for idea
<? session_start();?>
<?
include "dbconnector.php";
include "class_all.php";
$msg_call = new error_message();
?>
<!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>Sistem Fail Teknikal</title>
<style type="text/css">
<!--
@import url("*");
.style1 { color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
.style2 {
color: #74653D;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style3 {font-family: Verdana, Arial, Helvetica, sans-serif}
.style5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #FF0000;
}
.style6 {font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; color: #74653D;}
-->
</style>
</script>
<script type="text/JavaScript">
<!--
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
//-->
</script>
<!-- calendar start -->
<link rel="stylesheet" type="text/css" media="all" href="Kalendar/calendar-black.css" title="win2k-cold-1" />
<script type="text/javascript" src="Kalendar/calendar.js"></script>
<script type="text/javascript" src="Kalendar/lang/calendar-en.js"></script>
<script type="text/javascript" src="Kalendar/calendar-setup.js"></script>
<!-- calendar end -->
<script type="text/javascript">
function addRowLotNo()
{
var tbl = document.getElementById('tbl_lot_no');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
// tarikh nilaian cell
/* var cellRight = row.insertCell(0);
var el = document.createElement('input');
el.type = 'text';
el.name = 'tarikh_nilaian1' + iteration;
el.id = 'tarikh_nilaian1' + iteration;
el.size = 10;
cellRight.appendChild(el);*/
//lot no
var cellLot_no = row.insertCell(0);
var el_lot_no = document.createElement('input');
el_lot_no.type = 'text';
el_lot_no.name = 'kod_lot_no' + iteration;
el_lot_no.id = 'kod_lot_no' + iteration;
el_lot_no.size = 20;
cellLot_no.appendChild(el_lot_no);
//luas n kod luas
var cellLuas = row.insertCell(1);
var el_luas = document.createElement('input');
el_luas.type = 'text';
el_luas.name = 'luas_tanah' + iteration;
el_luas.id = 'luas_tanah' + iteration;
el_luas.size = 5;
var el_k_luas = document.createElement('select');
el_k_luas.name = 'kod_luas_tanah' + iteration;
el_k_luas.id = 'kod_luas_tanah' + iteration;
el_k_luas.options[0] = new Option('--Pilih Luas--', ' ');
el_k_luas.options[1] = new Option('Depa', '1');
el_k_luas.options[2] = new Option('Ekar(Acre)', '2');
el_k_luas.options[3] = new Option('Hektar(Hectar)', '3');
el_k_luas.options[4] = new Option('Jemba', '4');
el_k_luas.options[5] = new Option('Kaki Persegi(Square Feet)', '5');
el_k_luas.options[6] = new Option('Meter Persegi(Square Meter)', '6');
el_k_luas.options[7] = new Option('Pole', '7');
el_k_luas.options[8] = new Option('Relong', '8');
el_k_luas.options[9] = new Option('Rood', '9');
cellLuas.appendChild(el_luas);
cellLuas.appendChild(el_k_luas);
//nilaian jabatan
var cellnilaian_jabatan = row.insertCell(2);
var el_nilaian_jabatan = document.createElement('input');
el_nilaian_jabatan.type = 'text';
el_nilaian_jabatan.name = 'nilaian_jabatan' + iteration;
el_nilaian_jabatan.id = 'nilaian_jabatan' + iteration;
el_nilaian_jabatan.size = 20;
cellnilaian_jabatan.appendChild(el_nilaian_jabatan);
//analisa
var cellAnalisa = row.insertCell(3);
var el_Analisa = document.createElement('textarea');
el_Analisa.name = 'analisa' + iteration;
el_Analisa.id = 'analisa' + iteration;
el_Analisa.cols = 20;
el_Analisa.rows = 3;
cellAnalisa.appendChild(el_Analisa);
}
function removeRowLotNo()
{
var tbl = document.getElementById('tbl_lot_no');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
function reload1()
{
var kod_jenis_fail=document.form1.kod_jenis_fail.value;
var kod_maksud_nilaian=document.form1.kod_maksud_nilaian.value;
var kod_kementerian=document.form1.kod_kementerian.value;
self.location='new_file.php?kod_jenis_fail='+kod_jenis_fail+'&kod_maksud_nilaian='+kod_maksud_nilaian+'&kod_kementerian='+kod_kementerian;
}
function reload2()
{
var kod_jenis_fail=document.form1.kod_jenis_fail.value;
var kod_maksud_nilaian=document.form1.kod_maksud_nilaian.value;
var kod_kementerian=document.form1.kod_kementerian.value;
var kod_jabatan=document.form1.kod_jabatan.value;
var kod_cawangan=document.form1.kod_cawangan.value;
var kod_jenis=document.form1.kod_jenis.value;
self.location='new_file.php?kod_jenis_fail='+kod_jenis_fail+'&kod_maksud_nilaian='+kod_maksud_nilaian+'&kod_kementerian='+kod_kementerian+'&kod_jabatan='+kod_jabatan+'&kod_cawangan='+kod_cawangan+'&kod_jenis='+kod_jenis;
}
</script>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-right: 0px;
}
-->
</style></head>
<body>
<div style="position:obsolute;top:0;bottom:0;width:850px;">
<table width="850" border="0" align="left">
<tr>
<td bordercolor="#74653D" bgcolor="#74653D"><div align="center"><span class="style1">Maklumat Fail Baru </span></div></td>
</tr>
</table>
</div>
<form id="form1" name="form1" method="post" action="">
<?
$kod_jenis_fail=$HTTP_GET_VARS['kod_jenis_fail'];
$kod_maksud_nilaian=$HTTP_GET_VARS['kod_maksud_nilaian'];
$kod_kementerian=$HTTP_GET_VARS['kod_kementerian'];
$kod_jabatan=$HTTP_GET_VARS['kod_jabatan'];
$kod_cawangan=$HTTP_GET_VARS['kod_cawangan'];
$kod_jenis=$HTTP_GET_VARS['kod_jenis'];
?>
<div style="position:obsolute;top:0;bottom:0;width:850px;">
<table width="850" border="1" align="center">
<tr>
<td colspan="2"><span class="style2">Maklumat Asas </span></td>
</tr>
<tr>
<td width="197" height="31" class="style2">Jenis Fail </td>
<td width="836"><label>
<?
if ($kod_jenis_fail !="")
{
if($kod_jenis_fail == "S")
$sel00="SELECTED";
if($kod_jenis_fail == "R")
$sel11="SELECTED";
}
?>
<select name="kod_jenis_fail" id="kod_jenis_fail">
<option>--Sila pilih--</option>
<option value="S" <? echo $sel00;?>>Sulit</option>
<option value="R" <? echo $sel11;?>>Rahsia</option>
</select>
</label></td>
</tr>
<tr>
<td class="style2">Kod Jabatan </td>
<td class="style6">175</td>
</tr>
<tr>
<td><span class="style2">Jenis Maksud Nilaian</span></td>
<td><span class="forCenterTexts">
<select name="kod_maksud_nilaian" id="kod_maksud_nilaian" >
<option value="">--Sila Pilih--</option>
<?
$resultmn = mysql_query("select kod_maksud_nilaian,maksud_nilaian from maksud_nilaian order by maksud_nilaian ");
if(mysql_num_rows($resultmn))
{ $bilmn = 1;
while ($myrowpaparmn=mysql_fetch_array($resultmn))
{
if ($kod_maksud_nilaian == $myrowpaparmn[0])
$sel = "SELECTED";
else
$sel ="";
if ($bilmn ==1)
print ("<option value=\"$myrowpaparmn[0]\" $sel >$myrowpaparmn[1]</option> ");
else
print ("<option value=\"$myrowpaparmn[0]\" $sel >$myrowpaparmn[1]</option> ");
$myrowpaparmn++;
}
}
?>
</select>
</span></td>
</tr>
<tr>
<td class="style2"> Kementerian </td>
<td><label>
<select name="kod_kementerian" id="kod_kementerian" onchange="reload1()">
<option>--Sila Pilih--</option>
<?
$resultMenteri = mysql_query("select kodKem,kementerian from kementerian order by id ");
if(mysql_num_rows($resultMenteri))
{ $bilMenteri = 1;
while ($myrowpaparMenteri=mysql_fetch_array($resultMenteri))
{
if ($kod_kementerian == $myrowpaparMenteri[0])
$sel = "SELECTED";
else
$sel ="";
if ($bilMenteri ==1)
print ("<option value=\"$myrowpaparMenteri[0]\" $sel >$myrowpaparMenteri[1]</option> ");
else
print ("<option value=\"$myrowpaparMenteri[0]\" $sel >$myrowpaparMenteri[1]</option> ");
$myrowpaparMenteri++;
}
}
?>
</select>
</label></td>
</tr>
<tr>
<td class="style2">Jabatan</td>
<td><label>
<select name="kod_jabatan" id="kod_jabatan" onchange="reload2()">
<option>--Sila Pilih--</option>
<?
$resultJabatan = mysql_query("select kodJab,jabatan from jabatan where kodKem = '$kod_kementerian' order by jabatan ");
if(mysql_num_rows($resultJabatan))
{ $bilJabatan = 1;
while ($myrowpaparJabatan=mysql_fetch_array($resultJabatan))
{
if ($kod_jabatan == $myrowpaparJabatan[0])
$sel = "SELECTED";
else
$sel ="";
if ($bilJabatan ==1)
print ("<option value=\"$myrowpaparJabatan[0]\" $sel >$myrowpaparJabatan[1]</option> ");We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.