Previewing Web Content using Flip jQuery Plugin

The Flip jQuery plugin is a light weight simple extension that allows the user to write raw HTML and CSS in a textarea and allows to preview the formatted content without reloading page.
 
function onClick() {
//This is the heart of the plugin. It just toggles the visibility of the content
// and formatted code div areas.
if (_state) {
_state = false;
if (settings.animate) {
$(_cdiv).css('display', 'none');
$(settings.contentArea).fadeIn(1000, 'linear');
} else {
$(settings.contentArea).css('display', 'block');
$(_cdiv).css('display', 'none');
}
$(_btn).text(settings.flipOffText);
} else {
_state = true;
$(_cdiv).html($(settings.contentArea).val());
if (settings.animate) {
$(settings.contentArea).css('display', 'none');
$(_cdiv).fadeIn(1000, 'linear');
} else {
$(_cdiv).css('display', 'block');
$(settings.contentArea).css('display', 'none');
}
$(_btn).text(settings.flipOnText);
//If Prism syntax highlighter is present invoke it, if not ignore.
if (typeof Prism !== 'undefined') Prism.highlightAll();
}
};

Flip options are limited at this point.

Option Description Default
contentArea textarea containing the raw data null
flipOffText Text to be displayed on button when in raw mode "Flip"
flipOnText Text to be displayed on button when in formatted mode "Flip (Source)"
animate* Apply an anuimation to the transition false

 

Using Flip is pretty easy, in your HTML, add the code below:

<div id="pcon">
    <textarea name="Content1" id="content">...some text here...</textarea>
</div>


Then for the JavaScript, add the following referring to the id of the textarea:

$(function () {
    $('#pcon').flip({ contentArea: '#content' });
}); 
 
 

Ready to Reach Higher in Business?

Contact Us