javascript - Dynamically generated slider will not work -
i have box shadow generator.i have 4 sliders each value(x-axis,y-axis,blur,spread) have created 5th slider via javascript(i want slider enable/disable inset property) problem is not working: here code:
class="snippet-code-js lang-js prettyprint-override">$(document).ready(function() { $("#code").css({ " $( document ).ready(function() { $("#code").css({ "border": "3px solid gold", "padding": "4px", "color": "lightblue" }); $("#inset").css('width', '10%'); $(".slider").change( function() { var x = $("#x").val() + "px "; var y = $("#y").val() + "px "; var b = $("#blur").val() + "px "; var s = $("#spread").val() + "px "; var code = x + y + b + s + " dodgerblue "; $(".generator").css("box-shadow", code); $(".h-shadow").html(x); $(".v-shadow").html(y); $(".blur").html(b); $(".spread").html(s); }); $("#optimize").before( "<input type='range' id='inset' value='0' min='0' max='1' >"); $("#boxsub").click( function() { $(".slider").val(0); $('.code').html("0"); $(".blur").html("0"); $(".spread").html("0"); $('.generator').css("box-shadow", $("#boxshadowf").val()); }); $("#inset").change( function() { var ins = $("#inset").val(); if (ins === "1") { var code = x + y + b + s + " dodgerblue inset"; $(".generator").css("box-shadow", code); } else { var code = x + " " + y + " " + b + " " + s + " dodgerblue"; $(".generator").css("box-shadow", code); } }); $("#togglecode").click( function() { $('.code').toggle(789); }); $("#optimize").click(function() { /**** optimize code finding spread , blur values if of equal 0 or 0px removeit or print empty string ***/ var b = $(".blur").html(); var s = $(".spread").html(); if (b === "0" || b === "0px" && s != "0" || s != "0px") { $(".blur").html(b); } else { if (b === "0" || b === "0px") { $(".blur").html(""); } if (s === "0" || s === "0px") { $(".spread").html(""); } } }); $("#resetcode").click(function(event) { $(".slider").val(0); $('.generator').css('box-shadow', '0px 0px 0px 0px'); $('.code').html("0"); $('.v-shadow').html(" 0"); $('.blur').html("0"); }); }); border ":" 3 px solid gold "," padding ":" 4 px "," color ":" lightblue "}); $("#inset").css('width', '10%'); $(".slider").change( function() { var x = $("#x").val() + "px "; var y = $("#y").val() + "px "; var b = $("#blur").val() + "px "; var s = $("#spread").val() + "px "; var code = x + y + b + s + " dodgerblue "; $(".generator").css("box-shadow", code); $(".h-shadow").html(x); $(".v-shadow").html(y); $(".blur").html(b); $(".spread").html(s); }); $("#optimize").before( "<input type='range' id='inset' value='0' min='0' max='1' >"); $("#boxsub").click( function() { $(".slider").val(0); $('.code').html("0"); $(".blur").html("0"); $(".spread").html("0"); $('.generator').css("box-shadow", $("#boxshadowf").val()); }); $("#inset").change( function() { var ins = $("#inset").val(); if (ins === "1") { var code = x + y + b + s + " dodgerblue inset"; $(".generator").css("box-shadow", code); } else { var code = x + " " + y + " " + b + " " + s + " dodgerblue"; $(".generator").css("box-shadow", code); } }); $("#togglecode").click( function() { $('.code').toggle(789); }); $("#optimize").click(function() { /**** optimize code finding spread , blur values if of equal 0 or 0px removeit or print empty string ***/ var b = $(".blur").html(); var s = $(".spread").html(); if (b === "0" || b === "0px" && s != "0" || s != "0px") { $(".blur").html(b); } else { if (b === "0" || b === "0px") { $(".blur").html(""); } if (s === "0" || s === "0px") { $(".spread").html(""); } } }); $("#resetcode").click(function(event) { $(".slider").val(0); $('.generator').css('box-shadow', '0px 0px 0px 0px'); $('.code').html("0"); $('.v-shadow').html(" 0"); $('.blur').html("0"); }); }); class="snippet-code-css lang-css prettyprint-override">.generator{ width:10em; height:10em; background:red;} class="snippet-code-html lang-html prettyprint-override"> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <div class="container"> <div class="jumbotron landing"> <h1>box shadow generator v1.0 beta </h1> </div> <h1 class="btn btn-info center-block text-center ">an easy utilize box shadow generator</h1> can seek own values in next form: <div class="container"> <input type="text" id="boxshadowf"><div class="btn btn-success" id="boxsub">get val</div> </div> <div class="row"> <div class="col-md-3"> <input type="range" class="slider form-control" id="x" step="0.1" min="-100" max="100" value="0"> </div> <div class="col-md-3"> <input type="range" class="slider form-control" id="y" step="0.1" min="-100" max="100" value="0"> </div> <div class="col-md-3"> <input type="range" class="slider form-control" id="blur" step="0.1" min="0" max="100" value="0"> </div> <div class="col-md-3"> <input type="range" class="slider form-control" id="spread" step="0.1" min="0" max="20" value="0" > </div> <div class="generator"></div> </div> <div class="btn btn-warning" id="togglecode"> toggle code </div> <div class="btn btn-danger" id="resetcode">reset code</div> <h1>code</h1> <div class="code" id="code"> div{ <p class="text-success bg-info"><span class="standard coded"> box-shadow:<span class="h-shadow code">0</span> <span class="v-shadow code">0</span> <span class="blur">0</span> <span class="spread code">0</span><span class="color"> black</span></span> ;</p> <p class="text-success bg-info prefixed"><span class="standard coded"> -webkit-box-shadow:<span class="h-shadow code">0</span> <span class="v-shadow code">0</span> <span class="blur">0</span> <span class="spread code">0</span><span class="color"> black</span></span> ;</p> <p class="text-success bg-info prefixed"><span class="standard coded"> -moz-box-shadow:<span class="h-shadow code">0</span> <span class="v-shadow code">0</span> <span class="blur">0</span> <span class="spread code">0</span><span class="color"> black</span></span> ;</p> } <div class="btn btn-danger btn-block" id="optimize" disabled="true">optimize code</div> </div>
what want when alter lastly slider enable/disable inset property update code , apply div class.generator
use this:
class="snippet-code-js lang-js prettyprint-override">var downwards = false; function move(){ downwards = true; var value = document.getelementbyid("range").value; var value1 = document.getelementbyid("range1").value; var value2 = document.getelementbyid("range2").value; var value3 = document.getelementbyid("range3").value; document.getelementbyid("d").style.boxshadow= value + "px " + value1 + "px " + value2 + "px " + value3 + "px"; } class="snippet-code-css lang-css prettyprint-override">input{padding:10px} class="snippet-code-html lang-html prettyprint-override">left:<input id="range" type="range" max-value="100" /></br> top:<input id="range1" type="range" max-value="100" /></br> blur:<input id="range2" type="range" max-value="100" /></br> size:<input id="range3" type="range" max-value="100" value="0" onclick="move()" onmousemove="move()"/> <div id="d" style="background:red;height:50px;width:50px;"></div>
javascript jquery html css
No comments:
Post a Comment