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 10 of 10

Thread: script.aculo.us

  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    script.aculo.us

    Hey,
    I have just made a website ( http://www.alanmonger.co.uk/keypitts ) and need a little help. I dont know much javascript, but decided to follow a tutorial on using script.aculo.us so i could improve the look of the site.

    If you notice if you click on activites then on local, the script makes the two divs expand. Is it possible so that when you click on a link and the other is open, the other closes?

    Im not too sure but would appreciate some help.

    Cheers

    Ciggy

  • #2
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Works if you put the JS in the right place in the <header>
    But Effect have a bug, if you call the same effect twice before the first is done it gets very confused and locks up.

    Code:
    <a href="#">Home</a> |
    		<a href="#" onclick="showactivities()">Activities</a> |
    		<a href="#">Cost</a> |
    		<a href="#" onclick="showlocal()">Local</a> |
    		<a href="#">Contact</a> |
    
    -- Java script --
    
    function showactivities(){
     Effect.toggle('activities','blind'); 
     Effect.BlindsUp('local'); 
    }
    
    function showlocal(){
     Effect.toggle('local','blind'); 
     Effect.BlindsUp('activities'); 
    }
    Last edited by tonyp12; 02-06-2007 at 04:50 AM.

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,858
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Can I highly recommend that you not rely only on javascript for your site's navigation? If you disable javascript on your site, your site becomes inaccessible. This is not good coding practice.

    You can still use javascript, but you need to provide an alternative also, for people who have javascript disabled (i.e., Firefox has an extension that allows users to enable javascript only on the sites that they choose)...

    Generally, javascript is good for those "cool-looking" extras, but not really for functions as crucial as site navigation...so, again, if you do use JS in this way, don;t forget to offer non-JS-allowing users a way to navigate your site as well...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #4
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You could even call the two Effect functions from the onclick.
    But calling an Effect before a first one is done, locks it up.
    a BUG that the toggle seems to handle by waiting before it allow
    it to toggle again.

    How do you wait for a Effect to be done?

    -----
    This is how Effect.toggle does it

    toggle: function(element, effect) {
    element = $(element);
    effect = (effect || 'appear').toLowerCase();
    var options = Object.extend({
    queue: { position:'end', scope: (element.id || 'global'), limit: 1 }
    }, arguments[2] || {});
    Effect[element.visible() ?
    Effect.PAIRS[effect][1] : Effect.PAIRS[effect][0]](element, options);
    }
    };
    Last edited by tonyp12; 02-06-2007 at 05:18 AM.

  • #5
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers for that, but it doesnt seem to work... as i have very little knowlege of javacript it could be bacuse i have put it in the wrong place..

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Keypitts Quads</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="javascripts/prototype.js" type="text/javascript"></script>
    <script src="javascripts/scriptaculous.js" type="text/javascript"></script>
    <!--[if lt IE 7.]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->
    <script type="text/javascript">
    <!--
    function showactivities(){
     Effect.toggle('activities','blind'); 
     Effect.BlindsUp('local'); 
     }
    
    function showlocal(){
     Effect.toggle('local','blind'); 
     Effect.BlindsUp('activities'); 
    }
     //-->
    </script>
    </head>
    <body>
    <center>
    		<div style="width:750px; height:auto; background-color:#669900; background-image:url(top.jpg); background-position:top; background-repeat:no-repeat; padding-top:20px; padding-bottom:15px;">
    		<img src="logo.png" alt="" /><br />
    		<a href="#">Home</a> |
    		<a href="#" onclick="showactivities()">Activities</a> |
    		<a href="#">Cost</a> |
    		<a href="#" onclick="showlocal()">Local</a> |
    		<a href="#">Contact</a> | 
    	</div>	
    
    
    	<div id="activities" style="display:none;">
    	<div><br />
    	<a href="#">Quads</a> |
    	<a href="#">Horse Trekking</a> |
    	<a href="#">Off Road Driving</a> |
    	<a href="#">Paintball</a><br/>
    	<div style="visibility:hidden;">
    		Made by Alan Monger
    	</div>
    	</div>
    	</div>
    	
    	<div id="local" style="display:none;"><div>
    	<br />
    	<a href="#">Pubs</a> |
    	<a href="#">Hotels</a> |
    	<a href="#">Restaurants</a>
    	<br/>
    	
    	<div style="visibility:hidden;">
    		Made by Alan Monger
    	</div>
    	</div>
    </div>	<div id="container" align="left">
    <div id="content">
    	<div style="width:320px; height:auto; padding:10px; float:right;">
    		<img src="images/thumbs/1.jpg" />
    		<img src="images/thumbs/4.jpg" />
    		<img src="images/thumbs/6.jpg" />
    		<img src="images/thumbs/7.jpg" />
    		<img src="images/thumbs/8.jpg" />
    		<img src="images/thumbs/9.jpg" />
    		<img src="images/thumbs/2.jpg" />
    	</div>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In diam nunc, lacinia vestibulum, iaculis eget, porta sit amet, felis. Vivamus pharetra. Maecenas euismod nunc eu quam. Praesent turpis massa, sollicitudin sit amet, mattis vel, feugiat id, ante. Cras congue, nisi eleifend consequat adipiscing, arcu felis consectetuer quam, vitae cursus nisl nisl vel pede. Praesent enim diam, eleifend ut, tristique id, congue eget, velit. Praesent est ipsum, vulputate vitae, sollicitudin sit amet, egestas ac, sapien. Nunc blandit. Vivamus pretium consequat dolor. Vestibulum dolor metus, porttitor vel, eleifend vel, sodales nec, metus. Duis sapien dui, consectetuer et, consectetuer in, ornare non, libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent purus ligula, adipiscing eget, porttitor in, tristique vitae, ligula.
    
    <p>
    Pellentesque eget nunc. Phasellus ac magna. Vivamus vehicula lorem sit amet metus. In congue nunc eu lorem. Aliquam blandit sagittis felis. In hac habitasse platea dictumst. Donec lacinia ornare dolor. Aliquam tempus rhoncus ante. Sed eu nulla. Duis euismod laoreet justo.
    </p>
    <p>
    
    Nam malesuada malesuada justo. Ut et nunc ut augue gravida elementum. Fusce libero. Nunc in augue ac eros tempus rhoncus. Ut feugiat blandit ligula. In vulputate eleifend sapien. Nam pulvinar euismod urna. Phasellus auctor vestibulum diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum condimentum leo. Vestibulum consequat, mi iaculis blandit luctus, turpis ligula consequat eros, vel fringilla nulla magna vel urna. Nunc purus velit, semper at, facilisis a, hendrerit et, felis. Curabitur suscipit. Sed in mauris. Nunc pulvinar orci in neque. Suspendisse potenti. Cras sapien tortor, lobortis sit amet, tristique vel, fermentum sed, sem. Vivamus at erat quis urna nonummy tempor.
    </p>
    <p>
    Phasellus eros. Vestibulum urna odio, rutrum non, fringilla eu, placerat vestibulum, libero. Ut scelerisque eleifend tellus. Pellentesque ligula magna, adipiscing a, porta et, pharetra nec, ante. Quisque feugiat, orci vel bibendum sodales, mauris est aliquet metus, ac consectetuer odio augue et eros. Nullam ullamcorper pede sollicitudin quam. Donec at neque venenatis est mollis tempor. Etiam hendrerit gravida erat. Proin sollicitudin pulvinar libero. Nullam vulputate enim. Suspendisse ornare adipiscing nisl. Phasellus pretium nulla. In porta libero ut risus. Donec nec diam. Duis sodales est sit amet urna. Nulla dapibus ipsum sit amet libero. Pellentesque felis. Sed laoreet nibh quis tellus.
    </p>
    <p>
    Duis condimentum sem ac mi. Phasellus vel augue id metus ullamcorper mollis. In eget nisi. Cras purus. Proin felis. Praesent eget justo et augue malesuada suscipit. Donec in risus at lectus feugiat euismod. Donec urna est, cursus a, tempor ut, pellentesque a, mauris. Etiam urna. Maecenas sit amet tellus eu mi rutrum posuere. Sed varius dignissim magna. Proin facilisis fringilla odio. Vestibulum vel felis. Integer tincidunt rutrum magna. Suspendisse a nisl id lacus ornare molestie.
    </p>
    <p>
    Donec vulputate urna in nisi. Aenean condimentum diam a pede. Sed nec urna. Cras est. Cras sit amet mi a lacus varius mattis. Sed vel dolor. Praesent est sapien, molestie in, iaculis quis, feugiat eget, est. Phasellus sagittis. Donec quis nisl non augue tempor aliquet. Curabitur facilisis tellus sed massa. Morbi vulputate. Ut accumsan nibh at turpis. Mauris aliquet, ipsum semper molestie congue, orci sem porta sapien, in tempor nibh pede vel neque. Praesent nisl turpis, gravida nec, semper quis, pharetra et, metus. Suspendisse gravida.
    </p>
    </div>
    	</div>
    </center>
    </body>
    </html>
    and chump2877 you will be glad to hear im not just going to do a javascript only site, its just so that I can impress the person i am showing this to if they like it i can get on and sort that out

  • #6
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem with Effect is the BUG that if the user clicks twice rather fast it could lock up the whole menu.

    I tried to 'open up' the blindup effect and insert
    {queue: { position:'end', scope: (element.id || 'global'), limit: 1 }},

    To get the same of limit1 as toggle have, but I did not get it right.

    I give up, let the people at sctipt.aculo fix it.

  • #7
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ohh.. i understand what your saying.. but i just thought would it be possible to change the code and make it so that when showactivities is true (open) and showlocal is clicked, showactivities would be false (closed) and show local would be true?

    if this makes sence...

  • #8
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,858
    Thanks
    22
    Thanked 157 Times in 148 Posts
    Here's what you want I think...it's not hard to write this Javascript yourself, and then you understand the code as well....

    One thing I noticed is that in IE 7, if under 'Internet Options', under 'Advanced', if you have 'Always use ClearType for HTML' checked, the animation effect is choppy....If you uncheck this option, the animation works fine...It has something to do with the browser redrawing a big chunk of the page during the animation (the entire bottom part of the page, text and images, is being moved when the nav bar slides up and down)...I noticed this on your site as well: http://www.alanmonger.co.uk/keypitts/....Seeing as how more and more people will be using IE 7, this may or may not be a problem for you...just thought I'd point it out...

    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" lang="en" xml:lang="en" dir="ltr">
    
    <head>
    
    <title>Nav Menu</title>
    
    <style type="text/css">
    <!--
    
    body
    {
        margin:0;
    }
    
    #top
    {
        background-color:#333;
        font:bold 26px Arial,Helvetica;
        text-align:center;
        color:#fff;
        position:absolute;
        top:5px;
        left:50%;
        width:800px;
        height:150px;
        margin-left:-400px;
    }
    
    #top p
    {
        margin:110px 0 0 0;
    }
    
    #top a, .submenu a
    {
        color:#fff;
    }
    
    #bottom
    {
        background-color:#eee;
        font:16px/22px Arial,Helvetica;
        position:absolute;
        left:50%;
        width:800px;
        margin-left:-400px;
        z-index:900;
    }
    
    #bottom p
    {
        margin:25px 20px;
    }
    
    .submenu
    {
        background-color:#aaa;
        font:22px Arial,Helvetica;
        text-align:center;
        color:#fff;
        position:absolute;
        top:155px;
        left:50%;
        width:800px;
        height:65px;
        margin-left:-400px;
    }
    
    .submenu p
    {
        margin:15px 0 0 0;
    }
    
    -->
    </style>
    
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    
    </head>
    
    <body>
    
    <div id="top">
        <p><a href="#">Home</a> | <a href="#" onclick="submenu('Activities');">Activities</a> | <a href="#">Cost</a> | <a href="#" onclick="submenu('Local');">Local</a> | <a href="#">Contact</a></p>
    </div>
    
    <div id="submenu_container">
        <div id="Activities" class="submenu" style="z-index:500">
            <p><a href="#">Quads</a> | <a href="#">Horse Trekking</a> | <a href="#">Off Road Driving</a> | <a href="#">Paintball</a></p>
        </div>
        <div id="Local" class="submenu" style="z-index:500">
        <p><a href="#">Pubs</a> | <a href="#">Hotels</a> | <a href="#">Restaurants</a></p>
        </div>
    </div>
    
    <div id="bottom" style="top:155px">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis suscipit ultricies tortor. Morbi auctor, sapien ut posuere porta, magna nisl tempus leo, ut dictum ipsum sem non odio. Pellentesque pharetra, velit quis molestie lacinia, quam sem interdum urna, vel aliquet dolor tellus eget massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus in nibh. Donec non purus. Etiam ut sem sed quam dapibus porta. Nam consequat congue dolor. Morbi id felis. Aliquam nibh. Etiam sollicitudin, augue accumsan cursus adipiscing, est justo imperdiet neque, in gravida wisi neque at ante. Nulla at tortor. Donec elementum tristique pede. Mauris in erat. Nullam posuere sem et felis. Aliquam consequat bibendum ante. Sed vel magna in urna aliquet aliquet. Sed feugiat, lectus nec fringilla dignissim, elit diam tristique arcu, eu consequat erat augue eu nibh.</p>
    </div>
    
    <script type="text/javascript">
    <!--
    
    var mainObj = document.getElementById('bottom');
    var lastSubID = "";
    var currentSubID;
    
    function submenu(id)
    {
        var navObj = document.getElementById(id);
        currentSubID = id;
    
        if (lastSubID == "")
        {
            resetZIndex();
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
            moveNavDown(id,null);
        }
        else if (lastSubID == id)
        {
            resetZIndex();
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
            moveNavUp(id,null);
        }
        else if (lastSubID != id)
        {
            moveNavUp(lastSubID,1);
        }
    }
    
    function moveNavDown(id,changeNav)
    {
        if (changeNav == 1)
        {
            resetZIndex();
            var navObj = document.getElementById(id);
            navObj.style.zIndex = parseInt(navObj.style.zIndex) + 5;
        }
    
        if (parseInt(mainObj.style.top) < 220 - 5)
        {
            mainObj.style.top = parseInt(mainObj.style.top) + 10 + "px";
            setTimeout('moveNavDown("'+id+'",'+changeNav+')',50);
        }
        else
        {
            lastSubID = id;
        }
    }
    
    function moveNavUp(id,changeNav)
    {
        if (parseInt(mainObj.style.top) > 155 + 5)
        {
            mainObj.style.top = parseInt(mainObj.style.top) - 10 + "px";
            setTimeout('moveNavUp("'+id+'",'+changeNav+')',50);
        }
        else
        {
            lastSubID = "";
            if (changeNav == 1)
                moveNavDown(currentSubID,changeNav);
        }
    }
    
    function resetZIndex()
    {
        var subArr = document.getElementById('submenu_container').getElementsByTagName('div');
    
        for (i=0; i<subArr.length; i++)
        {
            subArr[i].style.zIndex = '500';
        }
    }
    
    -->
    </script>
    
    </body>
    
    </html>
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :-)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!
    ♪♪ …Need Web Hosting For My YouTube-To-Mp3 Conversion Software? Check Here !!… ♪♪

  • #9
    New Coder
    Join Date
    Jan 2007
    Posts
    93
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Not that pretty but it's works.

    function showactivities(){
    $('local').style.display= "none"
    Effect.toggle('activities','blind');
    }

    function showlocal(){
    $('activities').style.display= "none"
    Effect.toggle('local','blind');
    }

  • #10
    New Coder
    Join Date
    Aug 2006
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the help. I have sort of got it (with this)
    Code:
    		<a href="#">Home</a> |
    		<a href="#" onclick="Effect.toggle('activities','blind'); Effect.BlindUp('local')">Activities</a> |
    		<a href="#">Cost</a> |
    		<a href="#" onclick="Effect.toggle('local','blind'); Effect.BlindUp('activities')">Local</a> |
    		<a href="#">Contact</a> |
    But there is that problem where if you click between them too quickly then the navigation breaks. But its all good, its only temporary. Im going to start learning javascript so i can understand more.

    Thanks again

    ciggy


  •  

    Posting Permissions

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