Live Textile-formatted Comment Preview

candyman · 2007-03-25 15:38:25

How can I get a running Live Textile-formatted Comment Preview on TXP 4.0.4?
I know a couple of plugins but they seem incompatible with the latest release of TXP.

Thanks in advance.

candyman · 2007-03-30 20:27:58

Look at this

The live-preview runs but, in the comment area appears this code:

<textarea id="message" name="message" cols="25" rows="5" class="txpCommentInputMessage">

how can I remove it?

By the way, my comments_form looks like this:

<h3>Anteprima del commento:</h3> <div id="previewcomment"></div> <txp:comments_error wraptag="ul" break="li" /> <table cellpadding="4" cellspacing="0" border="0"> <tr> <td align="right"> <label for="name"><txp:text item="comment_name" /></label> </td> <td> <txp:comment_name_input /> </td> <td> <txp:comment_remember /> </td> </tr> <tr> <td align="right"> <label for="email"><txp:text item="comment_email" /></label> </td> <td colspan="2"> <txp:comment_email_input /> </td> </tr> <tr> <td align="right"> <label for="web"><txp:text item="comment_web" /></label> </td> <td colspan="2"> <txp:comment_web_input /> </td> </tr> <tr> <td align="right"> <label for="message"><txp:text item="comment_message" /></label> </td> <td colspan="2"><textarea id="message" name="message" cols="1" rows="1" tabindex="4" style="width:300px; height:250px" onkeyup="reloadPreviewDiv()"> <txp:comment_message_input /> </td> </tr> <tr> <td align="right"> </td> <td> <txp:comments_help /> </td> <td align="right"> <txp:comment_preview /> <txp:comment_submit /> </td> </tr> </table>

I use the textile.js, of course.

jm · 2007-03-30 21:00:38

Yo’ve got an unclosed textarea and <txp:comment_message_input />, which is why it’s not working right. Remove the <textarea> that was manually added, and use javascript to set the onkeyup event. Try this for your comment form:

<script type="text/javascript">
	//---
	function addLoadEvent(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') { window.onload = func; }
		else {
			window.onload = function() {
				if (oldonload) { oldonload(); }
				func();
			}	
		}
	}

	//---
	function prep_textarea() {
		var textarea = document.getElementById('message');
		textarea.onkeyup = function() {
			reloadPreviewDiv();
		}	
	}

	//---Load it
	addLoadEvent(prep_textarea);
</script>
<h3>Anteprima del commento:</h3>
<div id="previewcomment"></div>
<txp:comments_error wraptag="ul" break="li" />
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td align="right">
<label for="name"><txp:text item="comment_name" /></label>
</td>
<td>
<txp:comment_name_input />
</td>
<td>
<txp:comment_remember />
</td> 
</tr>
<tr>
<td align="right">
<label for="email"><txp:text item="comment_email" /></label>
</td>
<td colspan="2">
<txp:comment_email_input />
</td>
</tr>
<tr> 
<td align="right">
<label for="web"><txp:text item="comment_web" /></label>
</td>
<td colspan="2">
<txp:comment_web_input />
</td>
</tr>
<tr>
<td align="right">
<label for="message"><txp:text item="comment_message" /></label>
</td>
<td colspan="2">
<!-- the following outputs the textarea -->
<txp:comment_message_input />
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<txp:comments_help />
</td>
<td align="right">
<txp:comment_preview />
<txp:comment_submit />
</td>
</tr>
</table>

candyman · 2007-03-30 21:26:21

Thank you very much jm, but there’s something wrong.
The error message in the text area now is gone but the Live Preview doesn’t work at all.
The script is loaded in the homepage with this:

<script type="text/javascript" src="http://www.maidireblog.it/livecomments/textile.js"></script>

Hope this might help you.

jm · 2007-03-31 01:18:23

Looking through your source, you have <body onload="TJK_ToggleDL()"> in the <head> (ie. 2 instances of body). Remove that and see if it works. Invalid HTML always breaks something ;).

Edit: Fixing your HTML might fix the rendering differences between Safari and Firefox too.

Last edited by jm (2007-03-31 01:23:42)

candyman · 2007-03-31 07:07:32

I removed the TJK_ToggleDL script (that, I don’t know why, works in FireFox but not in IE, look at this) and the Live Comment Preview works!

So, the two scripts can’t work together or are they called in a wrong way? I don’t understand what you mean with “2 instances of body”.

Thank you very much for your precious help.

p.s.: I kwow that fixing HTML to WC specs is VERY important but I’m a newbie with poor experience: now I’m going to define the blog accorgind to my needs then I’ll try to clean out all the code (or call someone who can do this for me in a professional way).

Last edited by candyman (2007-03-31 07:13:53)

jm · 2007-03-31 19:59:00

The two scripts should work fine together. Having the <body onload="TJK_ToggleDL()"> in the <head> is just invalid, but it wasn’t causing the problems entirely. The onload="TJK_ToggleDL()" would load the TJK script, but the TJK script needs a definition list with the an id of TJK_DL. So when you have a script that requires a specific element to be there, and it doesn’t find it, it’ll usually stop other scripts from rendering, depending on their load order.

To make them both work together:

Create <dl id="TJK_DL"></dl> somewhere between the <body> and </body> tags. See the instructions at TJK Design
Use this for the head of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
<head>
	<title><txp:page_title /></title>
	<txp:css format="link" media="screen, projection" />
	<script type="text/javascript"  src="http://www.maidireblog.it/?file=livearchive&amp;loading=Loading+Article+Archives..."></script>
	<script type="text/javascript" src="http://www.maidireblog.it/?file=livesearch"></script>
	<script type="text/javascript" src="http://www.maidireblog.it/diagonalbanner/righthandtopbanner.js"></script>
	<script type="text/javascript" src="http://www.maidireblog.it/sweettitles/addEvent.js"></script>
	<script type="text/javascript" src="http://www.maidireblog.it/sweettitles/sweetTitles.js"></script>
	<script type="text/javascript" src="http://www.maidireblog.it/livecomments/textile.js"></script>
	<script type="text/javascript" src="http://www.maidireblog.it/TJK_ToggleDL/TJK_ToggleDL.js"></script>
	<script src="/mint/?js" type="text/javascript"></script>
	<script type="text/javascript">	
		//---
		function prep_textarea(id) {
			if (!document.getElementById(id)) {
				//---if the element isn't found, quit
				return;
			}
			else {
				var textarea = document.getElementById(id);
				textarea.onkeyup = function() {
					reloadPreviewDiv();
				}
			}
		};

		//---
		function TJK_test() {
			if (!document.getElementById('TJK_DL')) {
				return;
			}
			else {
				TJK_ToggleDL();
			}
		};

		//---Load preppers
		addEvent(window,'load', function() {
			prep_textarea('message');
		});
		addEvent(window, 'load', TJK_test);
	</script>
</head>

For the comments form

I moved the js I wrote to the head, so use this for your comments form:

<h3>Anteprima del commento:</h3>
<div id="previewcomment"></div>
<txp:comments_error wraptag="ul" break="li" />
<table cellpadding="4" cellspacing="0" border="0">
<tr>
<td align="right">
<label for="name"><txp:text item="comment_name" /></label>
</td>
<td>
<txp:comment_name_input />
</td>
<td>
<txp:comment_remember />
</td> 
</tr>
<tr>
<td align="right">
<label for="email"><txp:text item="comment_email" /></label>
</td>
<td colspan="2">
<txp:comment_email_input />
</td>
</tr>
<tr> 
<td align="right">
<label for="web"><txp:text item="comment_web" /></label>
</td>
<td colspan="2">
<txp:comment_web_input />
</td>
</tr>
<tr>
<td align="right">
<label for="message"><txp:text item="comment_message" /></label>
</td>
<td colspan="2">
<!-- the following outputs the textarea -->
<txp:comment_message_input />
</td>
</tr>
<tr>
<td align="right"> </td>
<td>
<txp:comments_help />
</td>
<td align="right">
<txp:comment_preview />
<txp:comment_submit />
</td>
</tr>
</table>

Last edited by jm (2007-03-31 20:01:48)

candyman · 2007-04-01 17:44:56

I have no words to thank you… You’ve solved a big problem for me.
Now the only thinks that doesn’t works is the TJK in IE: but this is due to a conflict with some of the plugins ‘cause this script, alone, works fine in IE.
I think that I’ll leave this in the FAQ (Informazioni) page turning off the one that stops that for this page only.

Thanks again.

Textpattern CMS

Textpattern CMS support forum

#1 2007-03-25 15:38:25

Live Textile-formatted Comment Preview

#2 2007-03-30 20:27:58

Re: Live Textile-formatted Comment Preview

#3 2007-03-30 21:00:38

Re: Live Textile-formatted Comment Preview

#4 2007-03-30 21:26:21

Re: Live Textile-formatted Comment Preview

#5 2007-03-31 01:18:23

Re: Live Textile-formatted Comment Preview

#6 2007-03-31 07:07:32

Re: Live Textile-formatted Comment Preview

#7 2007-03-31 19:59:00

Re: Live Textile-formatted Comment Preview

For the comments form

#8 2007-04-01 17:44:56

Re: Live Textile-formatted Comment Preview

Board footer