how to place a <div> over <select>

how to place a <div> over <select>

Page 1 of 1

3 Replies - 8263 Views - Last Post: 25 February 2009 - 09:08 AM

#1 sutr_kam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

how to place a <div> over <select>

Posted 25 February 2009 - 06:16 AM

I had a <Div> and <select> element in my page

The <div> element is overlapping on other elements (like normal text, button, textbox)
But the <select> tag has high priority than the Div

I have googled and saw some solution which includes
test 1 i)
z-index but it not worked for <select> element
test 2 ii)
use <iframe> tag and then place my <div> tag over <iframe>
giving somuch mis alignment


Is there any solution for this without using <iframe> tag

I have attached an image

Attached image(s)

  • Attached Image


Is This A Good Question/Topic? 0
  • +

Replies To: how to place a <div> over <select>

#2 thehat   User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: how to place a <div> over <select>

Posted 25 February 2009 - 06:40 AM

Could you post the relevant code or a link please?
Was This Post Helpful? 0
  • +
  • -

#3 sutr_kam   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 15-February 09

Re: how to place a <div> over <select>

Posted 25 February 2009 - 07:05 AM

<html>
	<head>
		<title>Multiple Select Box Demo</title>
		
		<script language="javascript">
		
			function onImageClick(){

				if(document.all.show.value == "0"){
					document.all.outerDIV.style.visibility = "visible";
					document.all.show.value = 1;
				} else{
					document.all.outerDIV.style.visibility = "hidden";
					document.all.show.value = 0;
				}
				var s = '';
				var temp = 0;
				var j = 0;
				for(var i = 1;i<7;i++){
					s = 'checkbox_' +i;
					if(document.all.item(s).checked == true){
						temp++;
						j = i;
					}
				}
				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();
				}*/
			}
			
			// Change the colors of the dropdown onmousemove, onmouseover
			function change(obj, flag){
				if(flag == 1){
					//obj.style.background = "#0174DF";
					obj.style.background = "#2A6BC9";
					obj.style.color = "#FFFFFF";
					obj.style.cursor = "arrow";
				} else {
					obj.style.background = "#FFFFFF";
					obj.style.color = "#000000";
				}
			}
			
			// onclick on a TR  or  CHECKBOX
			function onclick(id){
				var s = 'checkbox_'+id;
				var tr = 'tr_' + id;
				if(document.all.item(s).checked){
					document.all.item(s).checked = false;
				} else{
					document.all.item(s).checked = true;
				}
			}
			
			//
			function addNewAddress(){
				alert("Add New Address");
			}
		</script>
	</head>
	<body>
		<input type="hidden" name="show" value="0">
		<div>
			<table border="0" cellpadding="0" cellspacing="0">
				<tr>
					<td>	
						<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="outerDIV" style="visibility:hidden;">
			<div id="multiDropDown" style="border: 1px solid;overflow: auto;position: absolute; 
						height: 100px; width: 200px;color: SteelBlue; background: #FFFFFF none repeat scroll 0% 0%;">
				<table border="0" cellpadding="0" cellspacing="0" id="multiDropDown_dropListTable" 
						style="border-top: none; color: black; font-size: 11pt; width: 100%;">
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'>
						<td width="100%">Multiple Addresses</td>
					</tr>
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'>
						<td width="100%">--------------------</td>
					</tr>
					<tr id='tr_1' name='tr_1' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(1)'>
						<td width="100%" id="td_1" name="td_1"><input type="checkbox" name="checkbox_1" onclick='onclick(1)'>Checkbox1</td>
					</tr>
					<tr id='tr_2' name='tr_2' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(2)'>
						<td width="100%" id="td_2" name="td_2"><input type="checkbox" name="checkbox_2" onclick='onclick(2)'>Checkbox2</td>
					</tr>
					<tr id='tr_3' name='tr_3' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(3)'>
						<td width="100%" id="td_3" name="td_3"><input type="checkbox" name="checkbox_3" onclick='onclick(3)'>Checkbox3</td>
					</tr>
					<tr id='tr_4' name='tr_4' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(4)'>
						<td width="100%" id="td_4" name="td_4"><input type="checkbox" name="checkbox_4" onclick='onclick(4)'>Checkbox4</td>
					</tr>
					<tr id='tr_5' name='tr_5' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(5)'>
						<td width="100%" id="td_5" name="td_5"><input type="checkbox" name="checkbox_5" onclick='onclick(5)'>Checkbox5</td>
					</tr>
					<tr id='tr_6' name='tr_6' onmouseover='change(this,1);' onmouseout='change(this,0)' onclick='onclick(6)'>
						<td width="100%" id="td_6" name="td_6"><input type="checkbox" name="checkbox_6" onclick='onclick(6)'>Checkbox6</td>
					</tr>
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)'>
						<td width="100%">--------------------</td>
					</tr>
					<tr onmouseover='change(this,1);' onmouseout='change(this,0)' onclick="addNewAddress();">
						<td width="100%">Add an address...</td>
					</tr>
				</table>
			</div>
			<div id="okcancel" style="position: relative;height: 27px;width: 200px;top:100px; border: 1px solid; 
					color: SteelBlue;border-top: none;background: #FFFFFF none repeat scroll 0% 0%;">
				<table border="0" cellpadding="0" cellspacing="0" style="border-top: none;color: black; font-size: 11pt; width: 100%;" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="100%" id="td_10" name="td_10" align="right">
							<font face="times new roman">
							<input type="button" name="ok" value="OK" style="height:20px;width:30px" onclick="onImageClick();">
							<input type="button" name="Cancel" value="Cancel" style="font-face:verdana;height:20px;width:50px" onclick="onImageClick();">
							</font>
						</td>
					</tr>
				</table>
			</div>
		</div>
		<br>
			<select name="temp" id="temp">
				<option name="aa">aa</option
				<option name="bb">bb</option
				<option name="cc">cc</option
			</select>
			Selected Values: 
			<br>
			<input name="btnSubmit" value="Submit Form" id="btnSubmit" type="submit">
			<br>
			<hr size="1" width="50%" color="#ff8600" align="left">
			<br>
			Multiple Select
	</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 gregwhitworth   User is offline

  • Tired.
  • member icon

Reputation: 221
  • View blog
  • Posts: 1,613
  • Joined: 20-January 09

Re: how to place a <div> over <select>

Posted 25 February 2009 - 09:08 AM

Here you go:
http://www.hedgerwow...elect-free.html

Hope that solves your problem.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1