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.getEle mentById('sort' );
element.style.d isplay = 'inline';
}
function hideSelect() {
element = document.getEle mentById('sort' );
element.style.d isplay = 'none';
}
</script>
</HEAD>
<BODY>
<div onMouseOver="ja vascript: showSelect(); return false;"
onMouseOut="jav ascript: hideSelect(); return false;" >
<label for="sort"><a href="javascrip t: void();">Sort:</a></label>
<div id="sort" style="display: none" onMouseOver="ja vascript:
showSelect(); return false;">
<select>
<option value="/woodpics/home.jsp?sortBy =1">Reverse
Chronological</option>
<option value="/woodpics/home.jsp?sortBy =2">Chronologic al</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> 5  4576  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.getEle mentById('sort' );
element.style.d isplay = '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.getEle mentById('sort' );
element.style.d isplay = 'none';
}
</script>
</HEAD>
<BODY>
<div onMouseOver="ja vascript: showSelect(); return false;"
onMouseOut="jav ascript: hideSelect(); return false;" >
<label for="sort"><a href="javascrip t: 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 javascriptfunct ion, 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="ja vascript:
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">Chronologic al</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
Erwin Moller wrote on 12 mei 2006 in comp.lang.javas cript: <script type="text/javascript">
function showSelect() {
element = document.getEle mentById('sort' );
element.style.d isplay = '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)
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.
Evertjan. wrote: Erwin Moller wrote on 12 mei 2006 in comp.lang.javas cript:
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.getEle mentById('somed iv').style.disp lay='inline';
And a span to:
document.getEle mentById('somes pan').style.dis play='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
Erwin Moller wrote on 12 mei 2006 in comp.lang.javas cript: 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 "selfconvin ced" lawmakers.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress) This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: veganeater |
last post by:
Hi,
I'm wondering if there's a way that I can select which <div> to show based
on the user's selection from a dropdown/listbox form.
<form name="form1" method="post" action="">
<select name="internet">
<optgroup label="Network">
<option label="option1">Internet</option>
</optgroup>
|
by: mikee |
last post by:
I am developing a program using VB.net. It's a web based program that use web controls. When the system
display a checkboxlist, I immedately try to put up a popup screen. The problem is before the popup is complete
the user can or may try to select more that a single selection. Is there a way to hide and then show the cursor.
I tried disabling the list, still too slow. Tried wait nothing happened after the wait.
|
by: dje |
last post by:
In the OnClick event on a radioButtonList, I run a javascript to
show/hide the appropriate div along with a submit button, which
displays as expected. The problem is the submit no longer works on the
button. If I quit using the divs, and do a postback on the radiobutton
selection, showing/hiding tables instead, the button is ok and
continues to work. I've tried a variety of controls instead of the
button in a variety of places but it...
|
by: devine |
last post by:
Hi All,
I am VERY new to Javascript.
I have been provided with some code, which will enable me to hide/show a text area and change a submit button dependant on a check box.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
|
by: fizzyfozzy |
last post by:
Hi,
I am trying to figure out how to show or hide a selection of divs on my page depending on what is selected from a list/menu item, using css & javascript.
I have tried to use the script listed here: http://www.thescripts.com/forum/thread88791.html
but have been uable to customise it to my needs and could do with some help.
My form is asking people how many tickets they would like to an event & depending on their selection I need...
| | |
by: nubianqnn |
last post by:
Hello All,
I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related dropdown with two options. If a user selects the second option from the second dropdown, then I want to show a data field. Somehow this is not working quite right. I am using Coldfusion to dynamically populate the dropdown. Any help will be appreciated.
|
by: nubianqnn |
last post by:
I am stumped on a function to show/hide drop down elements based on a user's selection. If a user selects a second item from the first dropdown list, then I want to show a related dropdown with two options. If a user selects the second option from the second dropdown, then I want to show a data field. Somehow this is not working quite right. I am using Coldfusion to dynamically populate the dropdown. Any help will be appreciated.
|
by: rupak |
last post by:
Hi!
I have a multiple selection of checkboxes
<input type='checkbox' name='coffee' id='col1' value='Address'/>
<input type='checkbox' name='coffee' id='col2' value='Name'/>
<input type='checkbox' name='coffee' id='col3' value='ID'/>
<input type='checkbox' name='coffee' id='col4' value='UserName'/>
<input type='checkbox' name='coffee' id='col5' value='Code'/>
|
by: nithingujjar |
last post by:
Hi,
I need to to hide a field"addr_state1" based on a value in the drop down list field called "addr_country".i.e.,if addr_country.value=="in" then hide addr_state1 else , and if the value in the selection changes to something else then show the field addr_state1. Also the addr_state1 should be hidden when the page loads with value "IN", and if the page loads some other value than show the addr_state1 field.
Code used for this is :(I have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth.
The Art of Business Website Design
Your website is...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
