Archive for the ‘script.aculo.us’ Category

Sexy Sliding Menu for script.aculo.us

46

Jun
14

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

Simple JavaScript Slide Show Using script.aculo.us

59

Apr
17

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.

Prototype & script.aculo.us Image Cropper

3

Feb
26

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:

Next Entries »