1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

How to Insert an Editable HTML Code Box

Discussion in 'HTML & Website Design' started by Zirkon Kalti, Jan 14, 2010.

0
  1. #1
    Hi,
    I want to know how to insert an editable HTML code box with a preview button. For example, the visitor can edit the code the box and then preview it on the website.
     
    Zirkon Kalti, Jan 14, 2010 IP
  2. harrierdh

    harrierdh Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    This what you mean? Or did you want to go to another page or have a popup window?

    
<head>
<script>
    function populateBox() {
	    document.getElementById("details").innerHTML = document.getElementById("mytextbox").value;
	}
</script>	
</head>
<body>
<div id="details">&nbsp;</div><br />
<textarea id="mytextbox" rows="10" cols="80"></textarea><br />
<input type="button" id="button" value="Preview" onClick="populateBox()" />
</body>
    Code (markup):
     
    harrierdh, Jan 14, 2010 IP
  3. Zirkon Kalti

    Zirkon Kalti Well-Known Member

    Messages:
    1,132
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    150
    #3
    The above code previews on the page. I want it to be able to preview in a small popup window and have a preview button, print button and copy button. I want the button to have color.
     
    Last edited: Jan 15, 2010
    Zirkon Kalti, Jan 15, 2010 IP
  4. harrierdh

    harrierdh Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Copying to a clipboard is easy in IE. However in FF it takes a hack with a swf object. You google it, but the information is difficult to understand. You could try posting a new thread about this. Post it in the Programming/Javscript forum.

    
<head>

<style>
#button { background-color: yellow; }
</style>
<script>
function preview() {
   var myvar = '<style>#printButton { background-color: yellow; } #closeButton { background-color: yellow; }</style>'
   myvar += '<br /><p>' + document.getElementById("mytextbox").value + '</p>';
   myvar += '<br /><input type="button" value="Print" id="printButton" onClick="window.print()" />';
   myvar += ' <input type="button" value="Close" id="closeButton" onClick="window.close()" />';
   my_window= window.open ("","mywindow1","status=1,width=450,height=350");
   my_window.document.write(myvar); 
}
</script>
</head>
<body>
<textarea rows="20" cols="80" id="mytextbox"></textarea><br />
<input type="button" id="button" value="Preview" onClick="preview()" />
</body>
    Code (markup):
     
    harrierdh, Jan 15, 2010 IP