css editor in html,js

Question

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...

Click on a link, or element, with the text of header, or on the <header> element itself? — David Thomas
– David Thomas, Commented Dec 31, 2011 at 15:07
it doesn't matter, i can bind function onClick on element I want, that plugin need just to provide UI for selecting colors, padding... and then return css class — jasin_89
– jasin_89, Commented Dec 31, 2011 at 15:38

BartekR · Accepted Answer · 2011-12-31 16:00:27Z

1

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

answered Dec 31, 2011 at 16:00

BartekR

3,9973 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zac Seth Over a year ago

Wow, that's a really cool plugin. I'm not sure if it's really usable by end-users in its current state but I guess it wouldn't be too much of a stretch to modify it to use color pickers and, say, drop-down lists for font families, sizes, etc... In fact, I think I might try to do just that (need this functionality on a site I'm working on with customisable user profile pages).

Harshavardhana · Accepted Answer · 2021-01-29 03:52:46Z

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!

Collectives™ on Stack Overflow

css editor in html,js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related