New Topic/Question
Reply
<html>
<head>
<title>Multiple Select Box Demo</title>
<style type="text/css">
div.tableContainer {
width: 200px; /* table width will be 99% of this */
height: 90px; /* this div is for scrolling */
margin: 0 auto;
}
</style>
<script language="javascript">
function onImageClick(){
if(document.all.show.value == "0"){
document.all.multiDropDown.style.visibility = "visible";
document.all.okcancel.style.visibility = "visible";
document.all.show.value = 1;
} else{
document.all.multiDropDown.style.visibility = "hidden";
document.all.okcancel.style.visibility = "hidden";
document.all.show.value = 0;
}
var s = '';
var result = "";
var temp = 0;
var j = 0;
for(var i = 1;i<7;i++){
s = 'checkbox_' +i;
if(document.all.item(s).checked == true){
result+= i+",";
temp++;
j = i;
}
}
//if(result != "")
// alert(" The checkboxes checked are " + result);
if(temp > 1){
document.all.abc.value = "Multiple Addresses";
} else if(temp == 0){
document.all.abc.value = "";
} else if(temp == 1){
s = "td_" + j;
document.all.abc.value = document.all.item(s).innerText;
}
if(document.all.show.value == "0"){
document.all.abc.focus();
document.all.abc.select();
}
}
function change(obj, flag){
// var check = 'checkbox_' + flag;
// if(!document.all.item(check).checked){
if(flag == 1){
//obj.style.background = "#0174DF";
obj.style.background = "#2A6BC9";
obj.style.color = "#FFFFFF";
} else {
obj.style.background = "#FFFFFF";
obj.style.color = "#000000";
}
// }
}
function onTRClick(id){
var s = 'checkbox_'+id;
var tr = 'tr_' + id;
if(document.all.item(s).checked){
document.all.item(s).checked = false;
document.all.item(tr).style.background = "#FFFFFF";
document.all.item(tr).style.color = "#000000";
} else{
document.all.item(s).checked = true;
document.all.item(tr).style.background = "#2A6BC9";
document.all.item(tr).style.color = "#FFFFFF";
}
}
</script
</head>
<body>
<input type="hidden" name="show" value="0">
<div>
<table border="0" cellpadding="0" cellspacing="0">
<tr valign="bottom">
<td valign="bottom">
<input type="text" name="abc" id="abc" size="10" value="" style="width:182px" onclick="onImageClick();" readonly>
</td>
<td valign="bottom">
<img src="arrowButton.png" border="1" onclick="onImageClick();" height="15">
</td>
</tr>
</table>
</div>
<div id="multiDropDown"
style="visibility:hidden;
border: 1px solid;
overflow: auto;
position: absolute;
text-align:;
cursor: default;
height: 100px;
width: 200px;
color: SteelBlue;
background: #FFFFFF none repeat scroll 0% 0%;">
<table style="border-top: none;
color: black;
font-size: 11pt;
width: 100%;"
id="multiDropDown_dropListTable"
border="0"
cellpadding="0"
cellspacing="0">
<tbody onblur="onImageClick();">
<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>Multiple Addresses</span></td></tr>
<tr onmouseover='change(this,1);' onmouseout='change(this,0)'><td width="100%"><span>--------------------</span</td></tr>
<tr id='tr_1' name='tr_1' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(1)' onblur="onImageClick();"><td width="100%" id="td_1" name="td_1"><input type="checkbox" name="checkbox_1" onclick='onTRClick(1)'>Checkbox1</td></tr>
<tr id='tr_2' name='tr_2' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(2)' onblur="onImageClick();"><td width="100%" id="td_2" name="td_2"><input type="checkbox" name="checkbox_2" onclick='onTRClick(2)'>Checkbox2</td></tr>
<tr id='tr_3' name='tr_3' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(3)'><td width="100%" id="td_3" name="td_3"><input type="checkbox" name="checkbox_3" onclick='onTRClick(3)'>Checkbox3</td></tr>
<tr id='tr_4' name='tr_4' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(4)'><td width="100%" id="td_4" name="td_4"><input type="checkbox" name="checkbox_4" onclick='onTRClick(4)'>Checkbox4</td></tr>
<tr id='tr_5' name='tr_5' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(5)'><td width="100%" id="td_5" name="td_5"><input type="checkbox" name="checkbox_5" onclick='onTRClick(5)'>Checkbox5</td></tr>
<tr id='tr_6' name='tr_6' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onTRClick(6)'><td width="100%" id="td_6" name="td_6"><input type="checkbox" name="checkbox_6" onclick='onTRClick(6)'>Checkbox6</td></tr>
</tbody>
</table>
</div>
<div id="okcancel"
style="visibility:hidden;
position: relative;
height: 27px;
width: 200px;" >
<table style="border-top: none;color: black; font-size: 11pt; width: 100%;" id="multiDropDown_okCancelTable" class="" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr id='tr_10' name='tr_10'>
<td width="100%" id="td_10" name="td_10" align="right">
<input type="button" name="ok" value="OK" onclick="java script:alert('hai ok button clicked');">
<input type="button" name="Cancel" value="Cancel" >
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
here is the code what i have written
can u suggest me anything so that the second and third div tags should not overlap.
Here iam attaching an image the ok and cancel buttons are overlapped on the first div tag
advanced thanks,
regards
sutr kam.
Attached image(s)
This post has been edited by sutr_kam: 24 February 2009 - 03:42 AM
MultiQuote
| 