How to create a HTML and CSS “Try it yourself” Editor [closed]


Tags: javascript,html,css

Problem :

I know there are a number of "Try It Yourself" JavaScript editors, such as W3School's Try It editor, JSBin, and JSFiddle.

I'm developing a graphical Html and CSS library that I'd like to let people try out from my own site (I want to be able to display the result on the same page like the other editors). I have looked online for help on creating one of these and I can't seem to find any information. I tried to piece something together so If someone could look over that it would be appreciated. I would really like to create a page that has a box for html and another box for css, then have a button that executes the page, then display the information on the right hand of the page. Here is the code that I have so far, and hopefully someone can help me out. Thanks in advance.

<!DOCTYPE html>
<html>
<form method="post" action="tryit.php" target="result">
<button>Try it</button>
<table>
<tr>
    <td><textarea name="html"></textarea></td>
    <td><textarea name="css"></textarea></td>
</tr>
<tr>

    <td><iframe name="result"></iframe></td>
</tr>
<head>
<style type='text/css'>
    <?php echo $_POST["html"]; ?>
    <?php echo file_get_contents('css contents')?>
</style>
</script>
 </head>
<body>
<?php echo file_get_contents('html contents')?>
</form>
</body>
</html>


Solution :

I don't have PHP on this computer so I can't test anything... this can give you the basic idea, though. And it's been about a year since I touched PHP... there are probably syntax errors. Sorry. HTML is not my best language, either.

note: i wrote this like it was submitting to itself... kind of.

<html>
   <body>
      <?php if (!isset($_POST['html']) or empty($_POST['html'])) { ?>
               <form method="post" action="tryit.php">
                  <table>
                     <tr><td><textarea name="html"></textarea></td></tr>
                  </table>
                  <input type="submit" value="Try It">
               </form>
      <?php } 
      else  { echo $_POST['html']; } ?>
   </body>
</html>

i like this better (note: it does use jquery... i can provide js only if you really want):

<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
      <style> textarea { width: 400px; } </style>
   </head>
   <body> 
      <form id='tryitform' method="post" action="tryit.php">
         <table>
            <tr><td><textarea name="html"><b>hello!</b></textarea></td></tr>

            <!-- tr><td><textarea name="html"><script>window.location = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";</script></textarea></td></tr -->

            <tr><td><textarea name="css">body { background-color: #ccc; }</textarea></td></tr>
         </table>
         <input type="submit" value="Try It">
      </form> 
      <div id='htmlcontent'></div>
   </body>
</html>

<script> 
$(document).ready(function(){ 
   $('#tryitform').submit(function(e){
      e.preventDefault(); 
      $('#htmlcontent').html( $(':input[name=html]').val() );
      $('head').append( '<style>' + $(':input[name=css]').val() + '</style>' ); 
   }); 
}); 
</script>

    CSS Howto..

    How to set a child's element 50px narrower to its parent element in css? [closed]

    How to position ionic button using CSS

    how to get image to show up to the left of panel (both in same row)

    how to set a default prompt when nothing selected for “select” using css

    how to solve IE6 box model problem without adding extra div and using Valid CSS?

    How to Change Css coding with a link [closed]

    How to detect and deliver separate CSS files for mobile devices?

    How can i Split Menu Bar in two lines

    How can I avoid a “Flash of Unstyled Content” using fixed-width cells in CSS Tables?

    How to push down absolute positioned div with CSS

    How can I use symbol fonts like marvosym in the browser?

    How to apply a CSS transition only to the transform property

    How to pivot image with CSS and Javascript

    How to center multiple inline-block elements with CSS?

    How is this menu icon created only with CSS?

    How to set a css class based on content in rails

    css: how to display prev and next links outside slider

    How to fit a button to a hover box? And the button is not displaying properly?

    How to load CSS into CodeIgniter

    How to hide and show div with button? How to add effect to the button when show the div?

    How to create a curve tail for speech bubble with CSS?

    Jquery/CSS, how to have and access multiple (left) panels, while adjusting main content container automatically

    Trying to highlight table row using JQuery but not working, can anyone tell me why and how to fix it?

    How to apply a CSS class to all instances of a control in ASP.NET

    how to change triangle to up arrow using pure css

    How to use nth-child with only direct children?

    How can I Find/Replace part of a wildcard search in Notepad++

    how do i change a div background when you hover over a button in another div?

    How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form? [duplicate]

    Scroll to next and previous div using scrollTop, how do I accomplish this?