Home > jquery.previewBox

jquery.previewBox

Jquery.previewBox is a project mainly written in JavaScript, it's free.

A plugin which enables you to see how something would look. Like a magic mirror.

= jquery.previewBox This is a jquery plugin to setup a 'preview box', which is a set of 2 input elements and 1 HTML div element.

The first one, is to enter the HTML, while the second one is to enter CSS.

There is a third element, which is an HTML div, which is the placeholder to view the HTML/CSS changes. This s the preview box.

As you keep typing, the preview box keeps getting updated.

== Usage

Example:

HTML:
  <div id="preview_box_me" class="content full_size">
      <div id="preview" class="previewbox_element"></div>
      <textarea rows="20" cols="50" class="html_element" id="html_element" ></textarea>
      <textarea rows="20" cols="50" class="css_element" id="css_element"></textarea>
  </div>   

jQuery:
    $("#preview_box_me").previewBox(); //function can take optional options as parameter
    or
    $("preview_box_me").previewBox({debounceSpeed: 1000});

Default Options: debounceSpeed : 400 //number of milliseconds after which preview is updated htmlElementSelector : '.html_element' // CSS selector for HTML text input cssElementSelector : '.html_element' // CSS selector for HTML text input previewBoxElementSelector : '.preview_box_element' // CSS selector for HTML text input

== License Do whatever the hell you want with it.

== Credits Special thanks to Filatov Dmitry for the jquery.debounce library.

jQuery.debouce license - Dual licensed under the MIT and GPL licenses.

Previous:lklvfs