CODEWITHSUNDEEP
javascriptjqueryhtmlcsseditor
jasin_89
jasin_89

Reputation: 2001

css editor in html,js

I want to implement option for end users to enable them to change (css)style on page. For example when they are on styling page, they can click on header and popup will appear and in it friendly user interface to select background color, color of the text, borders, padding... just by clicking.

Is something like this available, in from of jquery plugin or...

Upvotes: 3

Views: 225

Answers (2)

Harshavardhana
Harshavardhana

Reputation: 1

You can do it in some code: Demo: https://cdpn.io/harshavardhana-holla-gmail-com/debug/yLVLYeQ/RBrOJRNNRooM

<!DOCTYPE HTML>
<html>
    <head>
       <style> textarea, iframe
       {
border:2px solid #400040;
height:600px;
width:100%;
}
</style>
     </head>
     <body><table border="2" width="100%" height="100%"> <tr bgcolor="#efdfff"><th>
     <table width="100%" height="100%" border="0" cellspacing="5" cellpadding="5">
     <tr>
<td width="50%" scope="col">  </td> 
<td width="50%" scope="col" align="left"> 
   <center><input onclick="runCode();" type="button" value= "Run Code!"></center>
</td>
</tr>
<td>
<form>
<center><b>Paste Your Code here!</b></center>
<textarea name="sourceCode" id="sourceCode">
<html>
<head> <title>My Codes</title> </head>
<body>
<h1> Welcome Coders!</h1>
<p> Write HTML, Javascript or CSS here & click run code!</p>
</body> 
</html>
</textarea>
</form>
</td>

<td><b><center>Output</b></center>
<iframe name="targetCode"  id="targetCode"> </iframe> </td>
</table>
<script>
function runCode() {
var content = document.getElementById('sourceCode').value;
var iframe = document.getElementById('targetCode');
iframe = (iframe.contentWindow)?iframe.contentWindow:(iframe.contentDocument)? iframe.contentDocument.document: 
iframe.contentDocument;

iframe.document.open();
iframe.document.write(content);
iframe.document.close();
return false;
}
runCode();
</script>
</tr>
</th>
</table>
</body>
</html>

I created some iframes which shows the results!

Upvotes: 0

BartekR
BartekR

Reputation: 3977

Look at this: http://usejquery.com/posts/brosho-design-in-the-browser-jquery-plugin

Upvotes: 1

Related Questions