www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] How do they do it?

  1. #1
    Join Date
    May 2011
    Posts
    5

    resolved [RESOLVED] How do they do it?

    Hi there,

    I've been looking at the code on the Walker Art Center's website, but I can't seem to figure out how they do this. Can anyone explain me how do they manage to change the achronyms in the left side menu, to the full words kind of boxes when we hover them. Are they even using javascript to make this change?

    Thank you.

  2. #2
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    Accordian Collapsible div ?

    You might want to look at this
    http://www.dynamicdrive.com/dynamici...edcollapse.htm
    Animated Collapsible DIV v2.4
    Author: Dynamic Drive

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Lightbulb

    You could also modify something like this.
    No JS involved, just some CSS settings.
    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <style type="text/css">
    #leftPanel { width:150px; }
    #leftPanel ul { list-style-type:none; }
    #leftPanel li:hover { border:1px solid orange; }
    </style>
    
    </head>
    <body>
    <div id="leftPanel">
     <ul id="leftPanelList">
      <li onmouseover="this.innerHTML='Web Developer'" onmouseout="this.innerHTML='WD'"
          onclick="window.location.href='http://www.webdeveloper.com'">WD</li>
      <li onmouseover="this.innerHTML='Coding Forums'" onmouseout="this.innerHTML='CF'"
          onclick="window.location.href='http://www.codingforums.com'">CF</li>
      <li onmouseover="this.innerHTML='Dream In Code'" onmouseout="this.innerHTML='DC'"
          onclick="window.location.href='http://www.dreamincode.net'">DC</li>
     </ul>
    </div>
    </body>
    </html>

  4. #4
    Join Date
    May 2011
    Posts
    5
    Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway.

  5. #5
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Question

    Quote Originally Posted by mindwashed View Post
    Thanks JMRKER! that's exactly what I was looking for. It works like a charm. Well the border thing does not but I don't need it anyway.
    You're most welcome.
    Happy to help.

    What is the problem with the "border thing"?
    Which browser is giving you the problem?

    Good Luck!

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    Quote Originally Posted by JMRKER View Post
    ...
    Which browser is giving you the problem?
    ...
    i bet he's talking about IE ))

    for IE and the same crap (if exists lol) the code will be:

    Code:
    <html>
    <head>
    <title> Untitled </title>
    
    <style type="text/css">
    #leftPanel { width:150px; }
    #leftPanel ul { list-style-type:none; }
    #leftPanel li.norm{border:none;}
    #leftPanel li.hov{border:1px solid Orange;}
    </style>
    
    </head>
    <body>
    <div id="leftPanel">
     <ul id="leftPanelList">
      <li onmouseover="this.innerHTML='Web Developer';this.className='hov'" onmouseout="this.innerHTML='WD';this.className='norm'"
          onclick="window.location.href='http://www.webdeveloper.com'">WD</li>
      <li onmouseover="this.innerHTML='Coding Forums';this.className='hov'" onmouseout="this.innerHTML='CF';this.className='norm'"
          onclick="window.location.href='http://www.codingforums.com'">CF</li>
      <li onmouseover="this.innerHTML='Dream In Code';this.className='hov'" onmouseout="this.innerHTML='DC';this.className='norm'"
          onclick="window.location.href='http://www.dreamincode.net'">DC</li>
     </ul>
    </div>
    </body>
    </html>
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,377

    Thumbs up

    Quote Originally Posted by Padonak View Post
    i bet he's talking about IE ))

    for IE and the same crap (if exists lol) the code will be:

    Code:
    ...
    
    <style type="text/css">
    #leftPanel { width:150px; }
    #leftPanel ul { list-style-type:none; }
    #leftPanel li.norm{border:none;}
    #leftPanel li.hov{border:1px solid Orange;}
    </style>
    
    ...
    Thanks, I was unaware the CSS needed to be different for the 'special' MSIE.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles