Description
This plugin will enable live comments preview. To try it, just fill out the name, start typing a comment, hit Preview
and continue typing.
Requirements
jQuery 1.7 or newer.
Usage
Include <txp:etc_live_preview />
tag somewhere near (preferably before) <txp:comments_form />
in your comments_display
form, like this:
...
<txp:if_comments_allowed>
<txp:etc_live_preview />
<txp:comments_form />
<txp:else />
<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
...
It will play the role of <txp:comments_preview />
, wrapped in <div id="cpreview"></div>
, unless you set a preview jQuery selector explicitly:
<div id="my-preview">
<txp:etc_live_preview preview="#my-preview" />
</div>
Live preview updates will trigger start
and stop
jQuery events on the nodes matched by preview attribute, so you can enhance them with your own animations:
<script>
$(function () {
$("#creview").bind("start", function() {
$(this).stop(true).fadeTo("fast", 0.1);
}).bind("stop", function() {
$(this).stop(true).fadeTo("fast", 1);
});
});
</script>
Tags
<txp:etc_live_preview />
has the following attributes:
- timeout: a timeout (in ms) of user inactivity before two live previews, default 600.
- auto: whether the live preview should be automatically triggered after the user has filled all required fields. Default is
0
(no). - preview: a jQuery selector to be used instead the default
#cpreview
. - form, wraptag, class: same as
<txp:comments_preview />
.
File(s)
- File: etc_preview.txt [8.79 kB] (889 downloads, ~7 per month)