Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Div visibility...

    Hello, I have a div menu that I want to show and hide when a link is pressed... I came up with this:
    Code:
    function test(what) {
     var obj=document.getElementById(what).style;
      if (obj.visibility=='visible') { 
       obj.visibility='hidden';
      } else 
       obj.visibility='visible'
    }
    Only problem with it is that it takes two clicks to start working...
    So then tryed doing this:
    Code:
    var start_trigger=null;
    function test(what) {
     var obj=document.getElementById(what).style;
     if (start_trigger==null) {  obj.visibility='visible'; start_trigger='1'; }
     else 
     if (obj.visibility=='visible') { obj.visibility='hidden'; }
     else { obj.visibility='visible'; }
    }
    It works fine but I would prefer to not use a var to store the first thing...

    Any insight to why the first code dosen't work and a resolution to not using a var as a trigger in the second would be appreciated.

    Thanks

  • #2
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    How about changing the logical test in your if slightly?

    Something like:

    Code:
    function test(what)
    {
      var obj = document.getElementById(what).style;
    
      if (obj.visibility != 'hidden') {
       obj.visibility = 'hidden';
      } else {
       obj.visibility = 'visible';
      }
    }
    I haven't tried it so it might not work ... I think it should though!
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #3
    Regular Coder mlse's Avatar
    Join Date
    Mar 2005
    Posts
    624
    Thanks
    20
    Thanked 19 Times in 18 Posts
    Yes, it does work:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>Flip-Flop</title>
    
        <style type="text/css">
          body {
          text-align:center
          }
    
          div {
          margin: 100px;
          font-size:20px;
          font-family:sans-serif
          }
        </style>
    
        <script language="javascript" type="text/javascript">
          function test(what)
          {
            var obj = document.getElementById(what).style;
          
            if (obj.visibility != 'hidden') {
              obj.visibility = 'hidden';
            } else {
              obj.visibility = 'visible';
            }
          }
        </script>
    
      </head>
    
      <body>
        <div onclick="test('flip-flop');">&gt;&gt; Click Me &lt;&lt;</div>
    
        <div id="flip-flop">
          This should appear and disappear
        </div>
    
      </body>
    </html>
    Die Welt ist ein Irrenhaus und hier ist die Zentrale!

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    the explanation is quite simple

    the codition
    if(obj.style.visibility=='visible')

    woun't work unless there is a local written style within your tag
    <div id="flip-flop" style="visibility:visible">
    or you have previousely set the style visibility using dynamic on-the-fly DHTML methods.

    attributes' values are not implicit in javascript. If an object is visible that not means by default that it has style visibility:visible...
    Last edited by Kor; 08-16-2005 at 10:32 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    in fact the condition should be

    if(!obj.style.visibility||obj.style.visibility=='visible')
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    New to the CF scene
    Join Date
    Jul 2004
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mlse
    How about changing the logical test in your if slightly?

    Something like:

    Code:
      if (obj.visibility != 'visible') {
    I haven't tried it so it might not work ... I think it should though!
    Hmm.. this seemed to work... but I feel like I've tried it before with no success... thankyou..

    And I liked your explination Kor but the visibility is still set in a style sheet and not in the tag its self... If it were true mlse's example wouldent have worked for me...?

    Thanks again for the help...

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    And I liked your explination Kor but the visibility is still set in a style sheet and not in the tag its self...
    No. It is not the same thing. If the CSS attribute is set in an embeded/external code, it is to be retreived in another way:

    see also:
    http://www.quirksmode.org/dom/getstyles.html
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •