SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot jooles's Avatar
    Join Date
    Jun 2006
    Posts
    144
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    One Link: Drop Down, Pull Up

    I'm messing around with javascript and one of the most common uses for javascript is to make a drop down menu like the one found at the top of my js test page:

    http://www.mndaily.com/ddtest2/test.php#

    here is my code for this particular drop down thing

    Code:
    <head>
    <script type="text/javascript">
    
    function down(){
    document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=up()>compress</u> <p><li>asdf<li>fsdajlealasdf<li>i like to eat subway<li>pita pit is good but expensive</p>"
    }
    
    function up(){
    document.getElementById('outer').innerHTML="<u href=# style=\"color: blue; cursor:pointer;\" onclick=down()>expand</u>"
    }
    
    </script>
    </head>
    
    <h2>// TESTS A DROP DOWN PULL UP MENU</h2>
    <div id="outer"><u href=# style="color: blue; cursor:pointer;" onclick=down()>expand</u> </div>
    Is there a cleaner or better way to do this?

  2. #2
    SitePoint Addict ALL's Avatar
    Join Date
    Oct 2005
    Location
    South Dakota
    Posts
    215
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    what i like to do is to make a div that is position:absolute and visibility:hidden then put all the info you need into that div. then set an id to that div, and have javascript copy all the innerHTML from it to the div that you want to display the info.

    for example i recently created this page which does exactly what i am talking about:

    http://www.therealestategroupinc.com/idx

    (look at the source)
    Did I help you?
    You can repay me, support one of my projects (no money needed):
    JavaScript Wiki, Another Web Forum, Paranormal Site

  3. #3
    SitePoint Addict Mirek Komárek's Avatar
    Join Date
    Dec 2006
    Location
    Prague
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is a lot of way to do this, I can just recomend you rather change classname and keep content readable without javascript. You can try

    <style type="text/css">
    .expand .e{display:block}
    .expand .c{display:none}
    .compress .c{display:block}
    .compress .e{display:none}
    </style>
    <script type="text/javascript">
    function switcher(){
    what=document.getElementById('outer')
    what.onclick=function(){
    this.className=this.className=='expand'?'compress':'expand';
    }
    }
    if(document.childNodes){window.onload=switcher}
    </script>
    <h2>// TESTS A DROP DOWN PULL UP MENU</h2>
    <div id="outer" class="compress">
    <div class="e">
    <p>expand</p>
    </div>
    <div class="c">
    <p>compress</p>
    <ul>
    <li>asdf</li>
    <li>fsdajlealasdf</li>
    <li>i like to eat subway</li>
    <li>pita pit is good but expensive</li>
    </ul>
    </div>
    </div>

    And style it as you want, this way it is all separated e.g. it the same as to use this

    <div onclick="this.className=this.className=='expand'?'compress':'expand';" class="compress">
    just less obtrusive


Bookmarks

Posting Permissions

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