Created
December 9, 2014 15:47
-
-
Save fmtarif/6be647f8a606b9930e1b to your computer and use it in GitHub Desktop.
#js #html real time preview in iframe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Real time preview in iframe</title> | |
| <style> | |
| * { margin: 0; } | |
| html, body { height: 100%; } .pane { height: 100%; } /*why doesn't this work '*/ | |
| .pane { | |
| float: left; | |
| width: 49%; | |
| position: relative; | |
| } | |
| .pane-src { | |
| border-right: 1px solid #ccc; | |
| } | |
| .pane-src pre, .pane-preview { | |
| padding-top: 10px; | |
| border: 0 none; | |
| padding-left: 1%; | |
| } | |
| .pane .help { | |
| position: absolute; | |
| top: 5px; | |
| right: 4px; | |
| color: #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div> | |
| <div id="panelSource" class="col-md-6 pane pane-src"> | |
| <span class="help">HTML</span> | |
| <pre contenteditable="true"></pre> | |
| </div> | |
| <iframe id="iframeForPreview" class="col-md-6 pane pane-preview"></iframe> | |
| </div> | |
| <!--<script type="text/javascript" src="/jquery.js"></script>--> | |
| <script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var $panelSource = $("#panelSource pre") | |
| ,$iframeForPreview = $("#iframeForPreview"); | |
| var extra = $panelSource.outerHeight() - $panelSource.height(); | |
| $panelSource.height($(window).outerHeight()-extra); | |
| $panelSource.on('keyup', function() { | |
| $iframeForPreview.contents().find('html').html($(this).text()); | |
| }); | |
| }); | |
| /* | |
| * TODO - comeplte | |
| window.onload = initScripts(); | |
| function initScripts() { | |
| var panelSourceObj = document.querySelector("#panelSource pre") | |
| ,iframeForPreviewObj = document.getElementById("iframeForPreview"); | |
| var extra = panelSourceObj.offsetHeight - panelSourceObj.clientHeight; | |
| panelSourceObj.offsetHeight = window.outerHeight-extra; | |
| console.log(window.outerHeight-extra) | |
| console.log(panelSourceObj.offsetHeight) | |
| panelSourceObj.addEventListener('keyup', function() { | |
| // iframeForPreviewObj.contentDocument.documentElement.innerHtml = this.innerText; //needs fix | |
| }); | |
| } | |
| */ | |
| </script> | |
| </body> | |
| </html> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment