Andrew Sellick » script.aculo.us http://www.andrewsellick.com andrewsellick.com Sat, 23 Aug 2008 18:11:34 +0000 http://wordpress.org/?v=2.5.1 en Script of the week http://www.andrewsellick.com/69/script-of-the-week-5 http://www.andrewsellick.com/69/script-of-the-week-5#comments Thu, 04 Oct 2007 23:06:24 +0000 andy http://www.andrewsellick.com/69/script-of-the-week-5 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.

]]> http://www.andrewsellick.com/69/script-of-the-week-5/feed Fancy Sliding Tab Menu V2 http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2 http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2#comments Wed, 12 Sep 2007 15:00:02 +0000 andy http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2

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.

]]> http://www.andrewsellick.com/64/fancy-sliding-tab-menu-v2/feed Sliding Menu Revisited http://www.andrewsellick.com/53/sliding-menu-revisited http://www.andrewsellick.com/53/sliding-menu-revisited#comments Thu, 19 Jul 2007 13:22:54 +0000 andy http://www.andrewsellick.com/53/sliding-menu-revisited 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!

]]> http://www.andrewsellick.com/53/sliding-menu-revisited/feed Fancy Sliding Tab Menu using script.aculo.us http://www.andrewsellick.com/52/fancy-sliding-tab-menu-using-scriptaculous http://www.andrewsellick.com/52/fancy-sliding-tab-menu-using-scriptaculous#comments Wed, 18 Jul 2007 13:15:59 +0000 andy http://www.andrewsellick.com/52/fancy-sliding-tab-menu-using-scriptaculous 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
]]> http://www.andrewsellick.com/52/fancy-sliding-tab-menu-using-scriptaculous/feed Script of the week http://www.andrewsellick.com/49/script-of-the-week-2 http://www.andrewsellick.com/49/script-of-the-week-2#comments Fri, 13 Jul 2007 09:55:32 +0000 andy http://www.andrewsellick.com/49/script-of-the-week-2 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.

]]> http://www.andrewsellick.com/49/script-of-the-week-2/feed Sexy Sliding Menu for script.aculo.us http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous#comments Thu, 14 Jun 2007 12:42:24 +0000 andy http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous It’s been a while since the original post Sexy sliding JavaScript side bar menu using mootools so I decided it was about time I pulled my finger out and developed a sliding menu using script.aculo.us. Well here goes…

code

css

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;
    right:0px;
    background-image:url(images/background.gif);
    background-position:top left;
    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;
}

html

<div id="sideBar">
   
    <a href="#" id="sideBarTab">
        <img src="images/slide-button.gif" alt="sideBar" title="sideBar" />
    </a>
   
    <div id="sideBarContents" style="width:0px;">
        <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>
   
</div>

As shown the code is not overly complex. The HTML comprises a containing DIV (with an ID of sideBar), then within this we have a linked tab image (with an ID of sideBarTab) followed by the contents of the side bar contained in a DIV (with an ID of sideBarContents) and sub contained within another DIV (with an ID of sideBarContentsInner).

The sideBarContents DIV has an inline style applied setting the width to zero. This is to allow the JavaScript to resize the region using script.aculo.us (Some browsers are a bit buggy when trying to change styles that are set in an external stylesheet). This DIV is also set to have an overflow hidden producing the effect that the content is sliding in.

Points to note within the CSS include the width set on the sideBarContentsInner DIV. This width should be adjusted as required to meet your deign requirements (It is set to 200px for the purpose of the demonstration).

Also to reposition the bar simply adjust the postioning styles applied on the sideBar DIV (i.e. right and top).

Finally you will need to include effects.js and side-bar.js to the head of the document in the order shown for this to work. Have a play with the demo below and download the code.

demo

Try the Sexy Sliding Menu for script.aculo.us demo

Download

Download the Sexy Sliding Menu for script.aculo.us

]]> http://www.andrewsellick.com/44/sexy-sliding-menu-for-scriptaculous/feed Simple JavaScript Slide Show Using script.aculo.us http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous#comments Tue, 17 Apr 2007 20:10:26 +0000 andy http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous Simple JavaScript slide shows are a very useful way of slickly displaying images on any site. I recently found my way on to DZone Snippets which provided a nice little article on creating a slide show, so, I thought it would be nice to take that script and add to it slightly making it easier for anyone to add it to their site.

the code

The code is very simple, requiring the inclusion of the following JavaScript files prototype.js, scriptaculous.js, effects.js and simple-slide-show.js. These provide the foundation of the slide show with very little HTML and CSS needed to complete the example.

HTML

The HTML consists of a div containing an unordered list (ul) of the required images. Both the containing div and ul have an id assigned to allow for easy styling without clashes.

<div id="slide-show">

    <ul id="slide-images">
        <li><img src="images/one.jpg" alt="One" title="One" /></li>
        <li><img src="images/two.jpg" alt="Two" title="Two" /></li>
        <li><img src="images/three.jpg" alt="Three" title="Three" /></li>
        <li><img src="images/four.jpg" alt="Four" title="Four" /></li>
    </ul>

</div>

CSS

The CSS is also very simple. The ul is given a width and a height defining the size of the slide show area and finally the li tags are absolutely positioned one on top of the other and that’s it. The rest is all done with JavaScript magic.

#slide-images{
    position:relative;
    display:block;
    margin:0px;
    padding:0px;
    width:400px;
    height:300px;
    overflow:hidden;
}

#slide-images li{
    position:absolute;
    display:block;
    list-style-type:none;
    margin:0px;
    padding:0px;
    background-color:#FFFFFF;
}

#slide-images li img{
    display:block;
    background-color:#FFFFFF;
}

example

Please click to see the Simple JavaScript Slide Show example.

download

Please feel free to download the Simple JavaScript Slide Show code.

]]> http://www.andrewsellick.com/30/simple-javascript-slide-show-using-scriptaculous/feed Prototype & script.aculo.us Image Cropper http://www.andrewsellick.com/5/prototype-scriptaculous-image-cropper http://www.andrewsellick.com/5/prototype-scriptaculous-image-cropper#comments Mon, 26 Feb 2007 10:39:59 +0000 andy http://www.andrewsellick.com/?p=5 Another short article just to document an amazing example of a JavaScript image cropper tool. Based on Prototype and script.aculo.us this example stylishly demonstrates a range of features including minimum image widths and heights, fixed ratios, a crop with preview and the ability to nudge the selected image region by use of the keyword arrow keys. This tool could be integrated into any CMS providing the wow factor for all end users.

Links:

]]> http://www.andrewsellick.com/5/prototype-scriptaculous-image-cropper/feed