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
on
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>
