Using textareas to display live results in iframe, using jQuery, add separate textarea input into iframes head

Question

I have created two text areas. one for HTML and one for CSS input. Each have their own IDs. Using a tutorial I\'ve found online, I was able to have these textareas take a us

Answer 1

Try this

   $(document).ready(function () { //DOC Ready, start of script
      // .Grid Window Height
      $('.grid').height($(window).height());
      // Declaring the Output Window Variables
      var frame = $('iframe'), // The iFrame variable itself
          contents = frame.contents(), // Declares the variable of contents which is the iFrames content
          body = contents.find('body'), //body variable finds the  tags in the iFrame
          styleTag = contents // styleTag variable says to...
      .find('head') // ...find the HEAD of the iframe...
      .append(''); // ...then, add a  tag to it.

      var scripts = ""+"
"+
                    +""+"
"+
                    +""+"
";
            contents.find("head").append(scripts);


      // Detect textarea KeyUp during focus

  $('textarea').focus(function () {
    var $this = $(this);

    $this.keyup(function () {
      // If a user inputs data into the textarea with an ID of HTML, insert that input into the iFrame's  tags
      if ($this.attr('id') === 'html') {
        body.html($this.val()); // Inster current value into the iFrames  tags
      };
      if ($this.attr('id') === 'css') {
        // Else the ID of HTML is not found...
        styleTag.text($this.val()); // ...Insert user input into the iFrames HEAD >> SCRIPT tags, via the styleTag variable
      };

      });
    });
  });