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"));

  });