SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    BlindDown, but not if already down. scriptaculous

    Hi Everyone,

    I am building a navigation menu that will have "nav tabs" across the top of the page, like Explore, Shop, About, etc. There is content beneath the tabs.

    Clicking a tab triggers BlindDown. However, what I need to be able to do is keep the effect from happening again once it has been triggered by a tab. In other words, the user needs to be able to click Tab A, the effect happens and reveals the previously undisplayed div, then the user should be able to click Tab B, Tab C, and so on with out the effect triggering on each additional click. Make sense? Obviously, clicking other tabs would present information in the div.

    Likewise, the user needs to be able to click any tab and trigger the BlindDown effect, and still be able to accomplish the above.

    Has anyone done this, or seen it done using scriptaculous? Any thoughts on the best way to go about this are much appreciated.

    Cheers -e

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Can I please clarify what you're after here.

    The hidden div is updated from each of the tabs, and if the div hasn't yet been displayed it uses the BlindDown effect to display itself.

  3. #3
    SitePoint Member
    Join Date
    May 2007
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57, you are correct. when the page is first opened, the div is hidden by

    Code:
    display: none;
    which is inline, as per scriptaculous practice.

    The user can then click on any of 5 tabs which will trigger Effect.BlindDown. Currently, I have each tab stubbed out like so:

    Code:
    <li style="display:inline; font-size:20px; font-style:bold; margin-bottom:0; border: 2px #000 solid; padding: 0 15px; cursor:pointer;" onclick="new Effect.BlindDown('slide', {duration: 1, scaleFrom: 1})"><strong>Explore</strong></li>
    (i like to work with styles inline until i'm ready to create the stylesheet; less switching).

    so, as you can see Effect.BlindDown is causing the div with the ID of slide to display using the above effect.

    What I need to have happen is when the div is displayed, the user should be able to click the other tabs and the effect not reoccur. Rather, the div needs to update what the clicked tab should display (e.g. Explore = list of pages, Shop = items to purchase, etc...).

    I'm thinking I should write some sort of function. Perhaps, two functions. One which checks if the div is open or closed, and another which causes the appropriate data to display if the div is already open.

    Would that be the best way to go about this? If so, anyone ever done something of the sort, or have ideas about how to do so?

    TIA

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is a proof of concept for the effect that also works with javascript is disabled, where all of the content is then visible and the nav links takes you down to the appropriate section.

    Code HTML4Strict:
    <div id="nav">
        <a href="#explore">Explore</a>
        <a href="#shop">Shop</a>
        <a href="#about">About Us</a>
    </div>

    Instead of having the onclick handler embedded in the code, the script does that for you instead.

    Code Javascript:
    $('nav').childElements().each(
        function(element) {
            $(element).observe('click', updateContent);
        }
    );

    The default action of the links, of taking you to the fragment identifier, has been prevented by having calling event.stop() at the event at the end of the updateContent function. This way when there's no javascript the links do their job, and when there is javascript the onclick event performs a different job.

    A nice touch is that the identifiers are obtained from the fragment id's in the href attribute, just by removing the # from the start of them.

    Code JavaScript:
    var id = event.element().readAttribute('href').sub('#', '');

    The nav links run an updateContent function that copies one of the hidden sections into a content area. If that content area is not currently displayed, being the first time, it is inserted and then revealed using the BlindDown effect.

    Code Javascript:
    if (!$('content')) {
        newContent.setStyle({'display': 'none'});
        $('sections').insert({before: newContent});
        Effect.BlindDown($('content'));
        } else {
        $('content').up().replaceChild(newContent, $('content'));
    }

    The duration and scaleFrom were removed from the BlindDown effect, as they are already the default settings.
    http://wiki.script.aculo.us/scriptac...fect.BlindDown

    When javascript is enabled, the sections are not displayed. This is done at the end of the body before other scripts like the prototype and scriptaculous are loaded, which ensures that there will be no delay in which the content can be seen.

    Code Javascript:
    document.getElementById('sections').style.display = 'none';

    There's only one issue that I noticed, relating to the BlindDown effect. After it's finished the effect the content area appeared to jump up the page at the end of the effect. It appears as if the margin of the h2 element wasn't shown until after the effect had finished, so I have explicitly defined a top margin for the h2 element in the style area to fix this problem.

    There were a couple of tricky parts in putting this together, but it's all come together very well.
    • Not using onload or onDOMLoad, instead just place the code before other scripts are loaded at the end of the document, where the DOM is guaranteed to be instantly ready for you
    • Simplifying the code - you're done when there's nothing more the be taken away
    • A previous version used the onclick attribute on the anchors, but now we have prototype doing that for us
    • Ensuring that everything was as unobtrusive as possible. For example, there used to be an empty content div, but now that is instead created by the script as a copy of one of the sections, only when required


    This all helps to keep the html as lean and mean as it should be.

    Here is the proof of concept in full.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Reveal Content with Blind-Down effect</title>
    <style type="text/css">
    #nav a {
    	font-size: 20px;
    	font-weight: bold;
    	margin-bottom: 0;
    	color: #000;
    	border: 2px #000 solid;
    	padding: 0 15px;
    	text-decoration: none;
    }
    #content h2 {
        margin-top: 0.5em;
    }
    </style>
    </head>
     
    <body>
    <div id="nav">
        <a href="#explore">Explore</a>
        <a href="#shop">Shop</a>
        <a href="#about">About Us</a>
    </div>
    <div id="sections">
        <div id="explore">
            <h2>Explore around the place</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pretium libero. Nam ultrices nisi non lectus. Morbi a nulla. Sed porta mauris. Vestibulum quis leo a metus pharetra luctus. In hac habitasse platea dictumst. Duis dui velit, tincidunt sit amet, rutrum ac, convallis vitae, nunc. Maecenas nulla. Duis eleifend. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium, elit sit amet ultricies ullamcorper, arcu massa tristique velit, auctor tincidunt nibh orci at eros. Quisque accumsan. Maecenas purus. Phasellus sit amet massa vitae sem aliquam adipiscing. Quisque eget nisi. Fusce elit nisi, pulvinar sed, tempor pharetra, imperdiet nec, massa.</p>
            <p>Duis lacinia ornare ligula. Nullam imperdiet urna et libero. Morbi scelerisque consequat diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Proin adipiscing, nibh ac ullamcorper hendrerit, nunc magna congue dui, dictum convallis neque lorem a ante. Sed sed sapien. Proin dui metus, varius ac, laoreet vitae, scelerisque sed, enim. Donec bibendum porttitor nunc. Proin non eros quis ligula auctor fermentum. Etiam ut nisi. Ut malesuada semper mauris. Fusce nisi nisi, pulvinar et, egestas id, mollis nec, quam. Nulla tempor risus. Fusce augue. Aliquam porta, massa nec consequat congue, nunc diam auctor purus, non mattis nunc mauris non magna. Curabitur dictum. Etiam sed dui. Cras dolor nunc, vulputate sit amet, varius non, euismod a, urna. Maecenas hendrerit justo quis ipsum viverra ultrices.</p>
            <p>Curabitur laoreet. Nunc pellentesque justo eget elit. Proin bibendum pede tempor tortor. Pellentesque eget odio. Mauris vitae velit ut ante posuere blandit. Suspendisse nulla neque, interdum et, placerat quis, elementum ut, turpis. Mauris a nulla eget erat gravida imperdiet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce metus enim, ultricies sed, lobortis ut, luctus non, felis. Morbi mollis diam non nibh. Praesent non nulla vitae mauris accumsan aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus./p>
        </div>
        <div id="shop">
            <h2>Shop about and buy things</h2>
            <p>Suspendisse vitae neque. Aenean scelerisque congue metus. Sed pharetra. Pellentesque rhoncus orci eu justo. Etiam sed felis in purus bibendum rhoncus. Maecenas lectus quam, pellentesque in, elementum sit amet, mollis volutpat, ligula. Maecenas tortor justo, pulvinar ut, pretium at, euismod ac, magna. Nullam egestas lorem eget lorem. Sed nisl. Maecenas volutpat, nulla sit amet nonummy bibendum, est pede ornare orci, at elementum dui tellus quis lacus. Aliquam at orci. Vestibulum lobortis libero fringilla sem. Suspendisse sagittis mattis nibh. Proin vel lorem.</p>
            <p>Nullam interdum sem id nisi. Nunc vel purus. Curabitur adipiscing, justo a sodales venenatis, augue urna bibendum mauris, ut tempor augue dui a nulla. Vivamus luctus gravida est. Cras pede. Pellentesque vel purus. Pellentesque sapien risus, rutrum auctor, pharetra a, consequat id, nibh. Phasellus bibendum magna in pede. Nulla facilisis volutpat eros. Pellentesque imperdiet. Nunc nec nulla. Aliquam vel tortor. Sed consequat tortor vitae massa. Mauris lorem libero, pellentesque a, vulputate vel, auctor vel, sapien. In hac habitasse platea dictumst. Nunc in sapien. Donec quam. Cras volutpat dignissim augue. Cras faucibus. Etiam mollis lorem non nibh.</p>
            <p>Mauris nonummy arcu non ligula. Maecenas in nisl. Curabitur vulputate ante. In neque arcu, vestibulum eu, tristique et, placerat non, massa. Vestibulum vehicula pretium sapien. Integer ut turpis. Sed justo tellus, egestas sed, tincidunt sit amet, dictum ut, leo. Nulla tincidunt, mauris ac pretium rhoncus, erat nisi dictum est, quis viverra risus purus porttitor purus. In fringilla, massa at imperdiet ultrices, ligula elit commodo ipsum, sed blandit nisi sem quis turpis. Praesent sed velit sed odio tincidunt venenatis. Mauris malesuada, magna et tincidunt sagittis, eros justo pellentesque orci, sed malesuada ligula dolor id sem. Aliquam a velit. Aenean felis magna, vestibulum in, aliquet non, posuere ac, lorem. Donec non augue viverra libero venenatis semper.</p>
        </div>
        <div id="about">
            <h2>All about us</h2>
            <p>Maecenas eleifend sapien in tortor congue nonummy. Quisque pretium odio in leo. Nulla facilisi. Donec semper purus vitae purus. Fusce massa. Vestibulum dui. Maecenas velit orci, convallis a, tincidunt et, consequat in, felis. Donec elementum consequat ipsum. Sed vitae tellus. Nunc tincidunt pede sit amet diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi dignissim nisl a tellus. Integer mattis augue a justo. Suspendisse molestie dui a elit mattis volutpat. Pellentesque hendrerit libero facilisis pede.</p>
            <p>Phasellus faucibus turpis ut leo. Etiam vel mi. Morbi lectus. Nulla sed ante nec odio commodo rutrum. Sed sit amet odio. Fusce posuere volutpat sapien. Aenean a risus. Integer ultricies, nisi et hendrerit auctor, dui lorem dignissim tortor, eu laoreet quam dolor eu nunc. Vestibulum metus odio, blandit vel, ornare sit amet, varius varius, ligula. Phasellus egestas orci non nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tristique, ligula sed commodo dictum, lectus eros vehicula purus, a semper libero justo eu quam. Donec in erat vitae nibh euismod posuere. Vestibulum venenatis bibendum libero. Mauris eget magna a felis blandit aliquet. Ut in nisl. Suspendisse tincidunt, purus ac egestas interdum, erat orci rutrum purus, vel lobortis libero arcu eget enim. Phasellus gravida nunc et mi.</p>
            <p>Morbi massa dui, sollicitudin ac, dapibus id, aliquet sed, massa. In non nunc. Maecenas porttitor libero iaculis felis. Vivamus id massa sed erat porttitor mattis. Ut iaculis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed condimentum, libero id elementum dictum, erat sem luctus tortor, in egestas nunc ante eu augue. Nulla metus neque, malesuada ac, hendrerit ac, sollicitudin sit amet, urna. Vivamus suscipit, lorem eget hendrerit eleifend, odio diam fringilla eros, et condimentum sem lectus sed mi. Donec nonummy quam ut lorem. Etiam ultrices. Pellentesque sed sem faucibus neque ullamcorper semper. Curabitur dui nulla, euismod a, aliquam vehicula, volutpat molestie, nibh. Aliquam mollis nibh quis tortor. In adipiscing suscipit ligula. Aliquam erat volutpat. Phasellus viverra volutpat metus. Integer est diam, aliquet et, convallis a, euismod accumsan, purus. Nullam in massa ut odio gravida ullamcorper.</p>
        </div>
    </div>
    <script type="text/javascript">
    // Hiding the sections here hidden before it has a chance to be shown.
    // A predefined class is not applied to them in html so that non-javascript users can still see it.
    document.getElementById('sections').style.display = 'none';
    </script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous/scriptaculous.js"></script>
    <script type="text/javascript">
    // add the updateContent event to the navigation links
    $('nav').childElements().each(
        function(element) {
            $(element).observe('click', updateContent);
        }
    );
    function updateContent(event) {
    	var id = event.element().readAttribute('href').sub('#', '');
        var newContent = $(id).cloneNode(true);
        newContent.writeAttribute('id', 'content');
        if (!$('content')) {
            newContent.setStyle({'display': 'none'});
            $('sections').insert({before: newContent});
            Effect.BlindDown($('content'));
        } else {
            $('content').up().replaceChild(newContent, $('content'));
        }
        event.stop();
    }
    </script>
    </body>
    </html>
    Last edited by paul_wilkins; Jan 10, 2008 at 22:50.


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
  •