Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1250"> <link rel="stylesheet" href="https://www.msluzenice.cz/tmp/bootstrap.css"> <link rel="stylesheet" href="https://www.msluzenice.cz/tmp/slider.css"> <script src="https://www.msluzenice.cz/tmp/jquery-2.1.0.js"></script> <script src="https://www.msluzenice.cz/tmp/bootstrap.min.js"></script> <script src="https://www.msluzenice.cz/tmp/bootstrap-slider.js"></script> <script> // Nacteni slideru @ http://www.eyecon.ro/bootstrap-slider $(function(){ $('#test').slider({ tooltip: 'always', formater: function(value) { return 'Current value: ' + value; } }); $("#test").on("slide", function (event){ var blurValue = 'blur(' + event.value + 'px)'; $('#blur').css({ '-webkit-filter': blurValue, '-moz-filter': blurValue, '-ms-filter': blurValue, '-o-filter': blurValue, 'filter': blurValue, }); $("#number").text(event.value + 'px'); }); }); </script> <style> #blur { -webkit-filter: blur(0px); -moz-filter: blur(0px); -o-filter: blur(0px); -ms-filter: blur(0px); filter: blur(0px); } </style> </head> <body> <div style="margin: 0 auto; width: 900px;"> <h1>Input</h1> <input id='test' data-slider-id='testSlider' type='text' data-slider-min='0' data-slider-max='15' data-slider-step='1' data-slider-value='0'> <hr> <h1>Value</h1> <span id='number'>0</span> <hr> <h1>Obrazek</h1> <img src='https://www.msluzenice.cz/plugins/templates/msluzenice/images/layout/bg.jpg' alt='' id='blur' width="400"> </div> </body> </html>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#obal { margin: 0 auto; width: 600px; } #levy { width: 450px; height: 300px; background-color: #76A4B2; float: left; } #pravy { width: 150px; height: 300px; background-color: #F8374D; float: left; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>