By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,919 Members | 1,587 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,919 IT Pros & Developers. It's quick & easy.

Hide/Show Selection List

P: n/a
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>

May 11 '06 #1
Share this Question
Share on Google+
5 Replies


P: n/a
sr*******@gmail.com wrote:
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

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';
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;" > <label for="sort"><a href="javascript: void();">Sort:</a></label>
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;">
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>


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
May 12 '06 #2

P: n/a
Erwin Moller wrote on 12 mei 2006 in comp.lang.javascript:
<script type="text/javascript">
function showSelect() {
element = document.getElementById('sort');
element.style.display = 'inline';
That is wrong.


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';
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.


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>

?

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 12 '06 #3

P: n/a
Evertjan. wrote:
The word "element" is reserved, and should not be used naming a variable.


Where does anything say that "element" is reserved? It is a perfectly
acceptable variable name. The OP should however have used the 'var' keyword
to declare it as a local variable in each of the functions.
May 12 '06 #4

P: n/a
Evertjan. wrote:
Erwin Moller wrote on 12 mei 2006 in comp.lang.javascript:
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';
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.


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>

?


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, Situation:
A (rather long) page that contains a lot of divs.
Some are visible (display:inline) at a certain time, other not.
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?


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.
For complete thread:
Google for: erwin moller div span inline block
the second hit

Regards,
Erwin Moller
May 12 '06 #5

P: n/a
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,
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.


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.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
May 12 '06 #6

This discussion thread is closed

Replies have been disabled for this discussion.