Untitled

<!DOCTYPE html>
<html>
<head>
    <title>CSS3 Border Radius generator</title>
    <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <META NAME="author" CONTENT="kounelios13">
        <META NAME="subject" CONTENT="programming">
        <META NAME="Description" CONTENT="Create rounded corners for whatever object you want with this border radius generator">
        <META NAME="Classification" CONTENT="No javascript is needed just pure CSS3">
        <META NAME="Keywords" CONTENT="programming,web design,tools,generator">
        <META NAME="Designer" CONTENT="kounelios13">
        <META NAME="distribution" CONTENT="Global">
        <META NAME="country" CONTENT="Greece">
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/bootstrap-theme.min.css">
        <link rel="stylesheet" type="text/css" href="../../css/general.css">
        <link rel="stylesheet" type="text/css" href="../../css/navbar-head.css">
        <link rel="stylesheet" type="text/css" href="../../css/apps/borderRadius(old).css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="../../js/bootstrap.js" type="text/javascript"></script>
        <script src="../../js/prefixfree.js" type="text/javascript"></script>
        <script src="../../js/apps/borderRadius.js" type="text/javascript"></script>


</head>
<body>
<?php include '../menu.php'; ?>

        <div class="container">
            <div class="jumbotron bg-info">

            <h1 class="text-center text-info">CSS3 border radius generator v0.1 BETA</h1>

            <p>The only thing you have to do is to change each slider and get the code.So <span class="text-info">simple</span>
            Or you can enter your own values in the form bellow and see the results. <strong>Results are in px but in the form you can use whatever you want</strong>.
            To reset the shape type 0 in the form and press submit.

            </p>


            </div>
            <div>
            <input type="text" id="userSet" class="btn bg-success text-info text-center formed form-import" placeholder="Enter your own values"/><button  class="btn btn-danger formed" onclick="setForm()">Submit</button>
            </div>


            <div class="row">
            <div class="col-md-6">
            <input type="range" class="ranges form-control pull-left" id="tl" min="0" max="1000" step="1" value="0" >
            </div>
            <div class="col-md-6">
            <input type="range" class="ranges pull-right form-control" id="tr" min="0" max="1000" step="1" value="0" >  </div></div>
            <div id="codearea" class="pull-right" >
                <!--This is the basic div for transformations-->

            </div>
            <div id="output" class="pull-left bg-info">
                <!--Here starts the code from the sliders-->
                 border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"> </span>
                <div class="prefixed"> -webkit-border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"></span>
                 -moz-border-radius:<span class="topl"></span> <span class="topr"></span> <span class="botl"></span> <span class="botr"></span></div>
                 <!--Here it ends-->
                <div class='formed'>

                 Code from text input:<br>
                 border-radius:<span class="form-output"></span>;</div>
                 <div class="prefixed">
                 -webkit-border-radius:<span class="form-output"></span>;</span><br>
                 -moz-border-radius:<span class="form-output"></span>;</span><br>
                 <a onclick="$('.prefixed').toggle(893);" class="btn btn-danger ">Toggle prefixes</a>
                 <a onclick="$('.formed').toggle(893);" class="btn btn-danger ">Toggle form input</a>
                </div>


            </div>


        </div><br>
        <div class="container upside">
            <div class="row"><div class="col-md-6">
            <input type="range" class="ranges form-control pull-left" id="bl" min="0" max="1000" step="1" value="0">
            </div>
            <div class="col-md-6">
            <input type="range" class="ranges form-control pull-right" id="br" min="0" max="1000" step="1" value="0" >
            </div></div>    <br>
            <div class="btn btn-info" onclick="$('.navbar-footer').toggle(890);">Toggle footer</div>
        </div>

        <div class="navbar navbar-default navbar-static-bottom navbar-footer navbar-foot">
            <div class="container">
                <p >Site build by <a href="http://kounelios13.blogspot.gr" class="navbar-btn btn btn-primary ">kounelios13</a></p>
            </div>
        </div>
</body>
</html>

var user=function(){
        $first=$("#tl").val();
        $second=$("#tr").val();
        $third=$("#bl").val();
        $fourth=$("#br").val();

            $(".topl").html($first+"px");
            $(".topr").html($second+"px");
            $(".botl").html($third+"px");
            $(".botr").html($fourth+"px");


        };

function  setForm() {
  $(".ranges").val(0);/*Reset each slider back to 0*/
  $("#output span").html("0px");/*Erases the code generated by the sliders*/

$('#codearea').css('border-radius', $('#userSet').val());
var val=document.getElementById('userSet');
var formCode=val.value;
$('.form-output').html(formCode);
}
$(document).ready(function () {
  $radiusTrue=$("#otherWay").val();
  $("#submit").click(


    function(){


      var raded=$("#otherWay").text();
      $codearea.css(raded);


    }


    )
  $('.botr').after(';<br>');
    var $property = $(".code");
    var $codearea =  $("#codearea");


    $('.ranges').on('change',function() {
         if (raded != null){
          $codearea.css("border-radius","0px")
         }
         else{

        var newRad = $(this).val() + "px",
            corner;
        switch($(this).attr('id')) {
             case 'tl' :
                corner = "border-top-left-radius";


                break;
          case 'tr' :
               corner = "border-top-right-radius";

             break;
       case 'bl' :
               corner = "border-bottom-left-radius";

           case 'br' :
               corner = "border-bottom-right-radius";

               break;
        }
        $codearea.css(corner, newRad);
       user();

        $("#generator").css(corner, newRad);/*also change and the outter radius*/

    });}
});