1997
Библиотека JAVASCRIPT SE@RCHER
Библиотека JAVASCRIPT SE@RCHER
Библиотека JAVASCRIPT SE@RCHER
Javascript + CSS
::
• блок
• текст
• линк
• меню
• фото
• окно
• кнопка
• фон
• видео
• таблица
ИЗБРАННЫЕ ПРИМЕРЫ 2013 г. МАЙ >>>
HTML ↴
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Встраивание кода HTML и CSS во фрейм на лету</title> <style> * { margin: 0; padding: 0; } body { font-family: sans-serif; } .grid { width: 50%; float: left; padding: 30px 50px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .container { background: #e3e3e3; border-right: 1px solid white; } .output { border-left: 1px solid #e3e3e3; } textarea { width: 100%; height: 200px; margin-top: 20px; margin-bottom: 50px; } iframe { border: none; width: 100%; } </style> </head> <body> <div class="container grid"> <form> <h2>HTML</h2> <textarea id="html"></textarea> <h2>CSS</h2> <textarea id="css"></textarea> </form> </div> <div class="output grid"> <iframe></iframe> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script> (function() { $('.grid').height( $(window).height() ); var contents = $('iframe').contents(), body = contents.find('body'), styleTag = $('<style></style>').appendTo(contents.find('head')); $('textarea').keyup(function() { var $this = $(this); if ( $this.attr('id') === 'html') { body.html( $this.val() ); } else { styleTag.text( $this.val() ); } }); })(); </script> </body> </html>
размер
Kb
ПРИМЕР ↴
✔ пример в полном окне
Библиотека JAVASCRIPT 1997- Дизайн и сопровождение © SE@RCHER