Tek-Tips is the largest IT community on the Internet today!
Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!
-
Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
Listbox always on top
- Thread starter cellops
- Start date
- Thread starter
- #3
Hi,
Thanks for the response. Please bear with me as I am fairly new to this. The calendar is linked to a to a <DIV> tag already but it still displays behind the listbox.
I have included the code below and any help would be gratefully received.
The calendar I'm afraid I shamelessly stole from
and the html is :-
<html>
<head>
<title>Untitled</title>
<script src="DatePicker.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="bob">
</tr>
</td>
<tr>
<td>
<input type="text" id="benluc">
</tr>
</td>
<tr>
<td>
test listbox trial<select name="test">
<option>10000000000000</option>
<option>10000000000000</option>
</select>
</tr>
</td>
</table>
<script>
x = new DatePicker(document.getElementById("bob"
, "x"
y = new DatePicker(document.getElementById("benluc", "y"
</script>
</body>
</html>
Thanks for the response. Please bear with me as I am fairly new to this. The calendar is linked to a to a <DIV> tag already but it still displays behind the listbox.
I have included the code below and any help would be gratefully received.
The calendar I'm afraid I shamelessly stole from
and the html is :-
<html>
<head>
<title>Untitled</title>
<script src="DatePicker.js"></script>
</head>
<body>
<table>
<tr>
<td>
<input type="text" id="bob">
</tr>
</td>
<tr>
<td>
<input type="text" id="benluc">
</tr>
</td>
<tr>
<td>
test listbox trial<select name="test">
<option>10000000000000</option>
<option>10000000000000</option>
</select>
</tr>
</td>
</table>
<script>
x = new DatePicker(document.getElementById("bob"
, "x"y = new DatePicker(document.getElementById("benluc"
, "y"</script>
</body>
</html>
I have a couple of questions:
1) Why are you using this: <input type="text" id="bob">, I just did a testpage of it and when I click in the textbox the calendar appears, what is the reason for the textbox...do you just want the user to click for the calendar to appear??
2) You're problem isn't in the HTML code, I belive it's in the .js file...if you open the .js file and look at this code:
this.html.style.top = window.event.clientY+"px";
this.html.style.left = window.event.clientX+"px";
This means that whereever the user clicks the box (in your case the input box) the calendart will appear...
3) What is the purpose of the drop-down menu?? I'm only asking because it sometimes help knowing the layout of the page when debugging...
Let me see if I can re-configure the script, but in any case post this question in the Javascript forum here and maybe someone can solve the problem alot quicker...ok??
PS -- There's no shame in borrowing a script, as long as you give proper credit where due...I borrow scripts as well, in fact all programmer's borrow even the best-of-the-best... I have not failed; I merely found 100,000 different ways of not succeding...
1) Why are you using this: <input type="text" id="bob">, I just did a testpage of it and when I click in the textbox the calendar appears, what is the reason for the textbox...do you just want the user to click for the calendar to appear??
2) You're problem isn't in the HTML code, I belive it's in the .js file...if you open the .js file and look at this code:
this.html.style.top = window.event.clientY+"px";
this.html.style.left = window.event.clientX+"px";
This means that whereever the user clicks the box (in your case the input box) the calendart will appear...
3) What is the purpose of the drop-down menu?? I'm only asking because it sometimes help knowing the layout of the page when debugging...
Let me see if I can re-configure the script, but in any case post this question in the Javascript forum here and maybe someone can solve the problem alot quicker...ok??
PS -- There's no shame in borrowing a script, as long as you give proper credit where due...I borrow scripts as well, in fact all programmer's borrow even the best-of-the-best... I have not failed; I merely found 100,000 different ways of not succeding...
I had the same problem. This is a feature of the browser. See thread215-138900. What I had to do to fix this was:
Then hide all the selects when you pop up the div with code similar to:
I actually use an algorithm to determine if a select would overlap with the div, which I term a 'minimal hide'. This is done by recursing up through the offsetParent hierarchy for a select, and adding up the offsetLeft and offsetTop values to determine the vertices of the select box. I leave this as an excercise for you ;-)
Cheers, Neil
Code:
selects = document.getElementsByTagName( 'select' );
Code:
function showDiv() {
for( var s = 0; s < selects.length; s++ )
selects[s].style.visibility = "hidden";
}
div.style.visibility = "visible";
}
function hideDiv() {
for( var s = 0; s < selects.length; s++ )
selects[s].style.visibility = "visible";
}
div.style.visibility = "hidden";
}Cheers, Neil
- Thread starter
- #7
Hi,
Thanks for the responses.
I tried hiding the listbox when the calendar appears and re-displaying it when the user has selected a date and the calendar is destroyed. This works beautifully.
Thanks again to both of you for your help
Alex
Thanks for the responses.
I tried hiding the listbox when the calendar appears and re-displaying it when the user has selected a date and the calendar is destroyed. This works beautifully.
Thanks again to both of you for your help
Alex
- Status
Similar threads
- Locked
- Question