Archive for the ‘script.aculo.us’ Category

Script of the week

13

Oct
04

It’s been a while since I last posted a script of the week, however, as soon as I found this script I knew I had to put it on my site.  Well this week it is a script called LightWindow that claims the prize.  Before you all moan at yet another light-’whatever’ as it is so well put on the LightWindow site please read on as this one is really worth a look.

Now I have seen a lot of LightBox esq effects out there but this one wins the prize. Not for aesthetics as on that front it is just the same as the others, however, if you look at the media types that LightWindow is compatible with you gain an understanding as to why exactly it is that this script is so impressive (In fact LightWindow claims to support every media type). Couple this with superior Browser compatibility and the sheer versatility and flexibility and you have a winning package.

The code is slightly heavy at 63KB and when taking in to account that it also uses Prototype and Script.aculo.us you can gather that it is a big bit of kit, however, the scalability of this code leads me to believe it is totally worth it.

Finally the list of features that LightWindow offers is phenomenal and well worth a browse. Have a look for your self at the LightWindow feature list.

Fancy Sliding Tab Menu V2

94

Sep
12

The Fancy Sliding Tab Menu is back and better than ever in Version 2 and this time I’ve included an idle state listener to bring all the tabs back to their normal state after a desired amount of time without mouse movement on the window.

The menu is developed in script.aculo.us and as I have mentioned above has some extra features as requested in comments after the last version of the Fancy Sliding Tab Menu. I have some more ideas for the menu and once I have implemented those I will post on here again with full documentation.  I have really put it up here for now to hear peoples comments.

demo

Have a look for yourself at the new Fancy Sliding Tab Menu demo.

code

Feel free to download the Fancy Sliding Menu Code.

Sliding Menu Revisited

27

Jul
19

A need to start off by thanking Heather who very kindly reworked the Sexy Sliding Menu to work from the left hand side and here it is.

code

html

There arent many changes here from the original in fact the only change within the HTML was to move the tab after the tab content region so as to align the tab on the right hand side of the content.

<div id="sideBar">
        
    <div id="sideBarContents" style="display:none;">
        <div id="sideBarContentsInner">
            <h2>side<span>bar</span></h2>
           
            <ul>
                <li><a href="#">Link One</a></li>
                <li><a href="#">Link Two</a></li>
                <li><a href="#">Link Three</a></li>
                <li><a href="#">Link Four</a></li>
                <li><a href="#">Link Five</a></li>
            </ul>
           
        </div>
    </div>
   
    <a href="#" id="sideBarTab"><img src="images/slide-button-left.gif" alt="sideBar" title="sideBar" /></a>
   
</div>

css

The CSS again also did not require a great deal of modification. The main changes were to absolutely position the tab and its contents to the left hand side and repositioning the contents background image.

Simple image amends were made and can be found in the download at the bottom of this article.

<style>

body{
    font-size:75%;
}

a{
    outline: none;
}

a:active{
    outline: none;
}

#sideBar{
text-align:left;
}

#sideBar h2{
    color:#FFFFFF;
    font-size:110%;
    font-family:arial;
    margin:10px 10px 10px 10px;
    font-weight:bold !important;
}

#sideBar h2 span{
    font-size:125%;
    font-weight:normal !important;
}

#sideBar ul{
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}

#sideBar li{
    margin:0px 10px 3px 10px;
    padding:2px;
    list-style-type:none;
    display:block;
    background-color:#DA1074;
    width:177px;
    color:#FFFFFF;
}

#sideBar li a{
    width:100%;
}

#sideBar li a:link,
#sideBar li a:visited{
    color:#FFFFFF;
    font-family:verdana;
    font-size:100%;
    text-decoration:none;
    display:block;
    margin:0px 0px 0px 0px;
    padding:0px;
    width:100%;
}

#sideBar li a:hover{
    color:#FFFFFF;
    text-decoration:underline;
}

#sideBar{
    position: absolute;
    width: auto;
    height: auto;
    top: 140px;
    left:0px;
    background-image:url(images/background-left.gif);
    background-position:top right;
    background-repeat:repeat-y;
}

#sideBarTab{
    float:left;
    height:137px;
    width:28px;
}

#sideBarTab img{
    border:0px solid #FFFFFF;
}

#sideBarContents{
    float:left;
    overflow:hidden !important;
    width:200px;
    height:320px;
}

#sideBarContentsInner{
    width:200px;
}
</style>

demo

Please have a look at the Sliding Menu Revisited demo.

download

Please have a look at the Sliding Menu Revisited code.

Hope this helps enjoy!

Fancy Sliding Tab Menu using script.aculo.us

35

Jul
18

Well I’ve been at it again looking at new ways in which I can make good use script.aculo.us effects. I started by looking at the accordion this time and ways in which it can be developed to produce different results. The most common example that I knew of was the Rico accordion, so that’s where I decided to start.

As you can see below it looks quite cool and can add some nice interaction to any site. At this stage, however, I’m not going to write too much about the code behind it as I am still working on it but I thought it may be interesting for people to have a look at.

Sliding Tab Menu

browser list

Currently the tab slide has been tested in Fixefox 2.0, Internet Explorer 7 – 6, Opera 9 and Safari 3. I am planning to test this more rigorously, however, as I stated above there is still more work required before I prepared to say it is complete.

demo

Please use the Fancy Sliding Tab Menu using scipt.aculo.us demo, have a play and let me know what you think.

code

Please download Fancy Sliding Tab Menu using scipt.aculo.us code and use it to your hearts desire.

todo

  • Check accessibility
  • Degrade without JavaScript
  • Further browser tests

Script of the week

1

Jul
13

This week I thought I would post a script for those "Web 2.0" lovers out there.  It’s a simple script that produces reflections for predefined images.  Simple yet effective.

Have a look for your self at the at the script.aculo.us reflector and the script.aculo.us reflector demo.

« Previous Entries