CSS positioning - make a small frame

Question

I have a code editor online and would like to have the HTML which is typed be executed as a mini web page in a frame in the corner.

It currently looks like a word processor on the left of the screen with a white square (background is black) on the right. I want what the user enters into the editor to be displayed in the white box as if a whole page were being loaded there.

Currently, this is done in javascript by setting the innerHTML of the frame to be the code as the user types, but if the user uses fixed positioning on an element, that element can be moved outside the frame. How can I make everything stay within the frame as if it were the whole web page scaled down into a smaller size?

Better yet, post your code here and give us a demo in a http://www.jsfiddle.com — Deryck, Nov 30 '13 at 16:11

score 0 · Accepted Answer · edited May 23 '17 at 12:28

Try to use an Iframe - I tested the following regarding your problem and it worked.

<iframe name="myIframe" id="myIframe" style="width: 1000px; height: 100px; margin: 20px auto 0 auto;">

</iframe>
<a onclick="put()">Test</a>
<script>
    function put(){
        var LocalS = "<div style='position: fixed; width: 100px; height: 100px; background-color: black; top:0; left: 0;'></div>" // Your content to display goes  here
        document.getElementById("myIframe").src = "data:text/html;charset=utf-8," + escape(LocalS);
    }
</script>

Hope this helps

read this: Set content of iframe for further information on putting the content into the iframe

CSS positioning - make a small frame

1 Answers1