Saturday, August 24, 2013

How to Make Smiley Slider

How to Make Smiley Slider


This slider requite jQuery and jQuery UI. The face is made from elements made into circles with border-radius. The mouth, indicating happiness level, is another circle just cropped down to size with a parent element with hidden overflow.

HTML Code:
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<div id="slider"></div>

<div id="face">
<div id="mouth-box">
<div id="mouth" class="straight"></div>
</div>
</div>


CSS Code:

    body { padding: 30px; }

#face { width: 100px; height: 100px; position: relative;
border: 2px solid black; border-radius: 50px; margin: 20px auto; }

#face:before, #face:after {
position: absolute;
content: "";
width: 10px;
height: 10px;
top: 30px;
border-radius: 10px;
background: black;
}
#face:before {
left: 30px;
}
#face:after {
left: 60px;
}

#mouth-box {
width: 60px; height: 20px; left: 20px; top: 60px; overflow: hidden; background: white;
position: relative;
}

#mouth { width: 60px; height: 60px; border-radius: 30px;
border: 2px solid black; position: absolute; top: 0; left: 0; }

#mouth.straight {
height: 0px !important;
top: 7px !important;
border-width: 1px;
bottom: auto !important;
}

Javascript Code:

var newWidth,
mouth = $("#mouth");

$( "#slider" ).slider({
slide: function(event, ui) {

if (ui.value > 51 ) {

mouth.css({ bottom: 0, top: "auto" });

newWidth = 160 - ui.value;

mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -25 + ((ui.value-50) / 2)
})
.removeClass("straight");

} else if ((ui.value > 48) && (ui.value < 52)) {

mouth.addClass("straight");

} else {

mouth.css({ top: 0, bottom: "auto" });

newWidth = ui.value + 60;

mouth.css({
width : newWidth,
height : newWidth,
"border-radius" : newWidth / 2,
left : -ui.value / 2
})
.removeClass("straight");

}

},
value: 50
});
Check demo here
Disqus Comments