Slider CSS control

Slider CSS control

by programmierer

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="wrap">
        <label for="amount">Amount:</label>
    <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"></p>
    
    <div id="slider"></div>
    <div id="iframediv">
        <iframe src="www.jsfiddle.net" id="testiframe" onload='javascript:resizeIframe(this);' target="_parent" />
    </div>
</div>

CSS

body {
    font-family:"Trebuchet MS", "Helvetica", "Arial", "Verdana", "sans-serif";
    font-size: 62.5%;
    width: 100%;
}
#wrap {
    width: 1000px;
    height: 600px;
}
#slider {width:70%}
#iframediv {
    height: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid black;
}
#testiframe {
    width: 100%;
    height: 800px;
    border: 1px solid black;
    display:inline-block;
    vertical-align:top;
}

JavaScript

$(function () {
      $("#slider").slider({
          /*orientation: "vertical",*/
          value: 0.8,
          min: 0.6,
          max: 1.01,
          step: 0.1,
          slide: function (event, ui) {
             $("#amount").val(ui.value);
             $('iframe#testiframe').contents().find('body').css({
            "margin" : 0,
            "zoom": ui.value,
            "-moz-transform": "scale(" + ui.value + ")",
            "-webkit-transform": "scale(" + ui.value + ")",
            "-o-transform": "scale(" + ui.value + ")",
            "-o-transform-origin": "0 0",
            "-moz-transform-origin": "0 0",
            "-webkit-transform-origin": "0 0"
    }); 
          }
      });

      $("#amount").val($("#slider").slider("value"));

  });