flowerpoop.com

Jun 20

Apple Iphone slider bar recreated in jquery

admin | icon2

technical | icon4

06 20th, 2008| icon3

No Comments »

You ever wonder how to re-create those cool looking slider techniques in the apple iphone?
well you too can create them on your website using simple tools like jQuery and jQuery Ui

off

first thing is throw in your header the 2 files needed,

<script src="/js/jquery.js" type="text/javascript"><script>
<script src="/js/ui-jquery.js" type="text/javascript"><script>

grab the images.

and this code, throw the script and style in the head of your page.

<script>
//
// required jquery , and jquery ui
// created by flowerpoop
// share with all your friends.
// questions? leave a comment below.
//
//
$(document).ready(function(){
    $("#block").draggable(
        { // drag along the x-axis and stay in the parent
        axis: "x",
        containment: "parent",
        snap: $("#bar"),
        snapMode: 'inner',
        snapTolerance: 20,
        stop: function() {
            position = $("#block").position();
            if (position.left > 100) { //changes the postion of the arrow
                $("#bk").attr("src","/images/s_bar_left.png");
                $("#ss").attr("class","shaded");
                $("#uns").attr("class", "solid");
            };
            if (position.left < 10) {  //changes the postion of the arrow
                $("#bk").attr("src","/images/s_bar_right.png");
                $("#ss").attr("class","solid");
                $("#uns").attr("class","shaded");
            };
        }
        }
    );
    //makes clicking on the text as well
    $("#uns").click(function(){
        $("#block").animate(
        {left: 0},
        500,
        null,
        function(){
            $("#ss").attr("class","solid");
            $("#uns").attr("class","shaded");
            $("#bk").attr("src","/images/s_bar_right.png");
        });
    });
    //makes clicking on the text as well
    $("#ss").click(function(){
        $("#block").animate(
        {left: 111},
        500,
        null,
        function(){
            $("#ss").attr("class","shaded");
            $("#uns").attr("class","solid");
            $("#bk").attr("src","/images/s_bar_left.png");
        });
    });
});
</script>
<style>
.shaded {
    cursor:pointer;
    font-size:8pt;
    margin:0 3px;
    color:#FFFFFF;
    opacity: 0.1;
    margin-top:5px;
    filter: alpha(opacity=10)
}
.solid {
    cursor:pointer;
    font-size:8pt;
    margin:0 3px;
    margin-top:5px;
}
#bar {
    position:relative;
    margin:0 2px;
    background:transparent url('/images/s_bar.png') no-repeat scroll center top;
    width:145px;
    height:23px;
}
#block {
    cursor:pointer;
    position:absolute;
    margin-top:2px;
    z-index:1
}
</style>

<div id="bar">
    <div id="block">
        <img id="bk" src="/images/s_bar_right.png" />
    </div>
    <div id="uns" class="shaded" style="float:left;">off</div>
    <div id="ss" class="solid" style="float:right;">on</div>
</div>