srampally@gmail.com wrote:
[color=blue]
> I need the capabilty to hide/show a selection list, just the way its
> done at
http://www.lufthansa.com (place the cursor over "Group
> Companies"). However, I am looking for a javascript that is much
> simpler. Here is what I have until now.
>
> Problems with my code:
> 1. The selection list becomes invisible when I try to select an option
> (in Firefox).
> 2. The selection list stays visible when I just place the cursor over
> selection list and move the cursor out (without clicking).
>
> Please help,
> Shashi
>[/color]
Hi,
You made a lot of mistakes in your code.
It is hard to tell what is wrong like this, but let me point out some
mistakes, maybe it helps you to find the problem.
[color=blue]
> <HTML>
> <HEAD>
> <script type="text/javascript">
> function showSelect() {
> element = document.getElementById('sort');
> element.style.display = 'inline';[/color]
That is wrong.
I must admit I was using the same code earlier untill somebody in here
pointed out that inline is bull for a div.
* A div is a BLOCK element, meaning that is rectangle with some content.
To make it visible use style.display='block';
* a SPAN is an inline element, eg a part of a sentence.
For span you should use inline.
[color=blue]
> }
> function hideSelect() {
> element = document.getElementById('sort');
> element.style.display = 'none';
> }
> </script>
> </HEAD>
> <BODY>
> <div onMouseOver="javascript
: showSelect(); return false;"
> onMouseOut="javascript
: hideSelect(); return false;" >[/color]
[color=blue]
> <label for="sort"><a href="javascript
: void();">Sort:</a></label>[/color]
What is the above line supposed to be doing?
Also, you are using a suspect/bad way to invoke a javascript function.
a href="" is not ment to invoke javascriptfunction, allthough it works in
most browsers (not all), with the speudo-protocol 'javascript
:'.
Just make a onclick-handler or something and place that in a span.
[color=blue]
> <div id="sort" style="display: none" onMouseOver="javascript
:
> showSelect(); return false;">[/color]
Now you place another div in your outer div, having the same eventhandler
(mouseover). I think that is confusing.
[color=blue]
> <select>
> <option value="/woodpics/home.jsp?sortBy=1">Reverse
> Chronological</option>
> <option value="/woodpics/home.jsp?sortBy=2">Chronological</option>
> <option value="/woodpics/home.jsp?sortBy=3">Title</option>
> <option value="/woodpics/home.jsp?sortBy=4"># of Photos</option>
> </select>
> </div>
> </div>
> </BODY>
> </HTML>[/color]
If I understand you right, what you want is:
1) A div (div_choose) that becomes visible (style.dsiplay='block') when the
mouse enters an area in another activation-dev (div_activate).
2) Area should remain visible untill the mouse leaves div_choose or
div_activate.
If you design it in such a way that mouse can easily move from the
div_activate to the div_choose, you should be fine.
If that is not possible, you'll have to add more complex logic, like timing
the milliseconds it is out, and keep the div_choose visible for a certain
time, even when the mouse is out of both divs. In that way the mousepointer
can 'walk' from the div_activate to the div_choose without the div_choose
disapearing.
Hope that helps.
Good luck.
Regards,
Erwin Moller
