SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fading multiple in and out divs on click

    This in my first Q in the Javascript forum, so sorry if its a bit dumb.
    What i would like to achieve is a single page with multiple fade in/fade out divs.
    Like this section of the Apple site, click the navigation on the left, the different content sections fade in/out, the links are all hash links to id'd divs on the page. so the whole thing doesn't fall apart without the script.
    I did a bit of a trawl and found this example that works on the mouseover, I had a look as the script and can't see how I would change it from 'hover' to 'click'.
    The other I found was this one But the 'multiple' example on there seams to have some sort of 'flicker' and the examples all use script within the href which isn't great accessibility wise.
    I also took a look at the Apple page, they are using 'scriptaculous' to do this, but they also do a bunch of other things on that page so finding the bit that just does the click fading, is a bit like a needle in a haystack.

    Can anyone point me to a good example, which I can download and have a good look at.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could play with this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="screen" />
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                #container {
                    width: 500px;
                }
                #menu {
                    width: 75px;
                    float: left;
                }
                #menu ul {
                    list-style: none;
                }
                #menu ul li {
                    line-height: 1.5em;
                    font-family: verdana, tahoma, sans-serif;
                    font-size: 66&#37;;
                    display: block;
                    border-bottom: solid 1px #666;
                }
                #content {
                    margin-left: 75px;
                    border-left: solid 1px #666;
                }
                .panel {
                    display: none;
                    width: 404px;
                    height: 200px;
                    padding: 5px;
                    background-color: #ccc;
                }
                .defaultPanel {
                    display: block;
                }
            </style>
            <script src="http://brainerror.net/media/scripts/js/blendtrans/blendtrans.js" type="text/javascript"></script>
            <script type="text/javascript">
                function showPanel(id) {
                    var panels = getElementsByClassName('panel');
                    for(var i = 0; i < panels.length; i++) {
                        if(panels[i].id != id) 
                            fadePanel(panels[i].id, true);
                    }
                    fadePanel(id, false);
                }
                function fadePanel(id, out) {
                    if(out) {
                        opacity(id, 100, 0, 500);
                        document.getElementById(id).style.display = 'none';
                    }
                    else {
                        document.getElementById(id).style.display = 'block';
                        changeOpac(0, id);
                        opacity(id, 0, 100, 500);
                    }
                }
                function getElementsByClassName(className, tag, elm){
                    var testClass = new RegExp("(^|\\s)" + className + "(\\s|$)");
                    var tag = tag || "*";
                    var elm = elm || document;
                    var elements = (tag == "*" && elm.all)? elm.all : elm.getElementsByTagName(tag);
                    var returnElements = [];
                    var current;
                    var length = elements.length;
                    for(var i=0; i<length; i++){
                        current = elements[i];
                        if(testClass.test(current.className)){
                            returnElements.push(current);
                        }
                    }
                    return returnElements;
                }
            </script>
        </head>
        <body>
            
            <div id="container">
            
                <div id="menu">
    
                    <ul>
    
                        <li onclick="showPanel('panel1');">Item 1</li>
                        <li onclick="showPanel('panel2');">Item 2</li>
                        <li onclick="showPanel('panel3');">Item 3</li>
                        <li onclick="showPanel('panel4');">Item 4</li>
    
                    </ul>
                
                </div>
    
                <div id="content">
    
                    <div class="panel defaultPanel" id="panel1">Panel 1</div>
                    <div class="panel" id="panel2">Panel 2</div>
                    <div class="panel" id="panel3">Panel 3</div>
                    <div class="panel" id="panel4">Panel 4</div>
            
                </div>
    
            </div>
    
        </body>
    </html>


  3. #3
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    UK
    Posts
    245
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That seams like a tremendous example! thanks.


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
  •