Hide/Show Selection List

S

srampally

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

<HTML>
<HEAD>
<script type="text/javascript">
function showSelect() {
element = document.getElementById('sort');
element.style.display = 'inline';
}
function hideSelect() {
element = document.getElementById('sort');
element.style.display = 'none';
}
</script>
</HEAD>
<BODY>
<div onMouseOver="javascript: showSelect(); return false;"
onMouseOut="javascript: hideSelect(); return false;" >
<label for="sort"><a href="javascript: void();">Sort:</a></label>
<div id="sort" style="display: none" onMouseOver="javascript:
showSelect(); return false;">
<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>
 
E

Erwin Moller

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
Click to expand...

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.
<HTML>
<HEAD>
<script type="text/javascript">
function showSelect() {
element = document.getElementById('sort');
element.style.display = 'inline';
Click to expand...

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.


}
function hideSelect() {
element = document.getElementById('sort');
element.style.display = 'none';
}
</script>
</HEAD>
<BODY>
<div onMouseOver="javascript: showSelect(); return false;"
onMouseOut="javascript: hideSelect(); return false;" >
Click to expand...
<label for="sort"><a href="javascript: void();">Sort:</a></label>
Click to expand...

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.
<div id="sort" style="display: none" onMouseOver="javascript:
showSelect(); return false;">
Click to expand...

Now you place another div in your outer div, having the same eventhandler
(mouseover). I think that is confusing.

<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>
Click to expand...

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
 
E

Evertjan.

Erwin Moller wrote on 12 mei 2006 in comp.lang.javascript:
That is wrong.
Click to expand...

Yes it is.
The word "element" is reserved, and should not be used naming a variable.
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';
Click to expand...

No, the default display style of a DIV is 'block', but there is no reason
why you should not change it to inline, but for the confusion it could
bring to the human code reader.
* a SPAN is an inline element, eg a part of a sentence.
For span you should use inline.
Click to expand...

Same. Only the default is 'inline'.

Having both set to display:none; would harbour the same objection,
because a non-displayed element has no block or inline display.

===========

Would you for the same reason object to:

<b style='font-weight:500;'>...</b>

?
 
E

Erwin Moller

Evertjan. said:
Erwin Moller wrote on 12 mei 2006 in comp.lang.javascript:


No, the default display style of a DIV is 'block', but there is no reason
why you should not change it to inline, but for the confusion it could
bring to the human code reader.


Same. Only the default is 'inline'.

Having both set to display:none; would harbour the same objection,
because a non-displayed element has no block or inline display.

===========

Would you for the same reason object to:

<b style='font-weight:500;'>...</b>

?
Click to expand...

Hi Evertjan,

Are you claiming that setting a div to inline is allright?
document.getElementById('somediv').style.display='inline';

And a span to:
document.getElementById('somespan').style.display='block';

Is that ok?

I am not claiming I am a CSS expert, but this is what I heard in here:
Hi all,
Click to expand...
Situation:
A (rather long) page that contains a lot of divs.
Some are visible (display:inline) at a certain time, other not.
Click to expand...

That's an abuse. <div> is meant to be a block element (display: block),
and if you want a generic inline, use <span>. Theoretically there's
nothing wrong with that, and if you want it's legal to create <textarea
style="display:table-header-group"> but that's asking for trouble.
If the browser is displaying some divs, and the user gives a printcommand
for the page, can I be sure only the visible parts are printed?
Click to expand...

If not, be sure to report a bug to the browser developers.
AFAIK there should be no problems. I never tried with inline DIVs
though.
Click to expand...

For complete thread:
Google for: erwin moller div span inline block
the second hit

Regards,
Erwin Moller
 
E

Evertjan.

Erwin Moller wrote on 12 mei 2006 in comp.lang.javascript:
That's an abuse. <div> is meant to be a block element (display: block),
and if you want a generic inline, use <span>. Theoretically there's
nothing wrong with that,
Click to expand...

It is not an abuse.

It is, like disregarding nice line indenting, good practice not to do
that as a rule, because you will confuse other human code readers now,
and yourself in the future, if you want to change the code to your new
liking.

Using thing in a way they "were not ment to be", is more a joy than an
abuse and can be very instructive in your personal learning curve.

Using a bike as your pillow is not an abuse, but I would not recommend
it,
but even that can be useful in extreme circumstances.

Changing a span to a block object dynamicly could be used to accentuate a
word as part of a sentence in a dynamic way.

Sometimes I wish for an element that internally acts like a block, with
automatic warp, and externally like an inline. Never tried that out,
since such things useally come up while in bed. Could we do that?
and if you want it's legal to create <textarea
style="display:table-header-group"> but that's asking for trouble.
Click to expand...

That would be a "bug",
trying to do something that cannot be done that way.

'table-header-group' is only defined in tables, so the actions could be
cross browser diverse outside tables.

I thought the question of "legality", while linked to "abuse", is
certainly not the same. Legal things can get you into trouble, abuse is
annoying others, You can be illegal without the abuse, and you can abuse
without being illegal. Annoying yourself is never an abuse and is only
illegal in the eyes of extreme "selfconvinced" lawmakers.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Survey details won't go through using php, ajax, Mysql 0
Set value after clicking in field 11
Limit selection in list Box 4
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
How can I hide a div using an event listener on multiple checkboxes? 6
Jquery not triggering / acting as expected. 0
Canvas drawing HTML Javascript on elementor 1
select list show/hide elements: problems in IE 2

Members online

Total: 19 (members: 1, guests: 18)
Robots: 426

Forum statistics

Threads
473,769
Messages
2,569,577
Members
45,054
Latest member
LucyCarper

Latest Threads

Top