Hide/Show Selection List

Discussion in 'Javascript' started by srampally@gmail.com, May 11, 2006.

  1. Guest

    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, 2006
    #1
    1. Advertising

  2. Erwin Moller Guest

    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
    Erwin Moller, May 12, 2006
    #2
    1. Advertising

  3. Evertjan. Guest

    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)
    Evertjan., May 12, 2006
    #3
  4. Erwin Moller Guest

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

    Regards,
    Erwin Moller
    Erwin Moller, May 12, 2006
    #4
  5. Evertjan. Guest

    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)
    Evertjan., May 12, 2006
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Joanne
    Replies:
    2
    Views:
    620
    Joanne
    Jul 7, 2005
  2. curiousity

    HOWTO autopost the selection list upon selection

    curiousity, Nov 21, 2003, in forum: ASP .Net Mobile
    Replies:
    0
    Views:
    258
    curiousity
    Nov 21, 2003
  3. Steve Speirs
    Replies:
    0
    Views:
    145
    Steve Speirs
    Jun 27, 2003
  4. chris_huh
    Replies:
    3
    Views:
    135
  5. ll
    Replies:
    2
    Views:
    630
    Thomas 'PointedEars' Lahn
    May 1, 2008
Loading...

Share This Page