<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() {
/* select list is dynamically created within a div with classname divOption, to fill it up with 0 to 100 using loop */
var s="<select id='pct'>";
for(i=0;i<=100;i++)
s+="<option value=" + i + ">" + i + "</option>";
s+="</select>";
$("div.divOption").html(s);
$("#pct").val("100"); // Set the current value to 100 that means fully opaque
/* Initially when loading opacity is set to 1 i.e. fully opaque */
$("h1").css({"color":"00FF00","fontSize":"36px","background-color":"rgba(0,0,255,1)"});
$("#pct").change(function() {
/* Follow the calculation in the change event, since our combo value is 0 to 100, we divide it by 100 to get the fractional value */
$("h1").css({"background-color":"rgba(0,0,255," + $(this).val()*1.0/100 + ")"});
});
});
</script>
<title>
</title>
</head>
<body>
<div class="divOption"></div>
<h1>Hello Subhroneel</h1>
</ br>
</body>
</html>
No comments:
Post a Comment