Location: PHPKode > projects > Jerrata DoComments > jerrata-docomments/SampleWebpage.html
<html>
<head>
<title>Thank you for choosing DoComments!</title>
</head>
<body>

<!-- This is HTML code for the introductory paragraphs. -->
<h1 style="font-family:Arial;">Welcome! :-)</h1>

<p>
	<font style="font-family:Arial;font-size:14px;line-height:20px;">This sample webpage is designed to demonstrate how to include DoComments into your webpages.</font>
</p>

<p>
	<font style="font-family:Arial;font-size:14px;line-height:20px;">To get started, right-click your mouse on the page and click 'View Source' to view the HTML source code for this webpage.  The code has been heavily annotated to show you what code you must include into your webpages to get DoComments working properly.  Optionally, you can use this sample webpage as a base and copy & paste your content into this page before uploading it to your server.</font>
</p>

<p>
	<font style="font-family:Arial;font-size:14px;line-height:20px;">If you need help installing or using DoComments or have feedback to share, please don't hesitate to <a href="mailto:hide@address.com">contact support</a>.</font>
</p>

<table cellpadding="5" cellspacing="0" style="background-color:#ffbfbf;">
	<tr>
		<td>
			<font style="font-family:Arial;font-size:14px;line-height:20px;"><strong>Note:</strong> The post form, below, is live and will attempt to post comments to Jerrata Solutions' servers under your site account.  Remember to open settings.php with a text editor and change SITE_NAME and SITE_PASSWORD to the values sent to you in your welcoming email before attempting to post a comment.</font>
		</td>
	</tr>
</table>

<h3 style="font-family:Arial;">Thank you for choosing DoComments!</h3>

<hr width="100%">

<p>
	<font style="font-family:Arial;font-size:14px;line-height:20px;">The following are statistics for the current topic.  You can place these anywhere on your webpage you'd like or exclude them altogether.</font>
</p>

<!-- Here is where you can begin copying & pasting from the following HTML source code into your webpage. -->
<!-- Here is where you can begin copying & pasting from the following HTML source code into your webpage. -->
<!-- Here is where you can begin copying & pasting from the following HTML source code into your webpage. -->

<!-- Note: This <font id="docomments_topic_rating"></font> is required only if you wish to display this topic's rating. -->
<!-- You can remove it entirely from the webpage at your discretion, or place it anywhere on your webpage. -->
<p>
	Topic rating: <font id="docomments_topic_rating"></font>
</p>

<!-- Note: This <font id="docomments_num_comments_in_topic"></font> is required only if you wish to display the number of comments in this topic. -->
<!-- You can remove it entirely from the webpage at your discretion, or place it anywhere on your webpage. -->
<p>
	Number of comments in this topic: <font id="docomments_num_comments_in_topic"></font>
</p>

<hr width="100%">

<!-- This CSS code determines how DoComments' post form and the invitation text to post a comment will appear. -->
<!-- This CSS code MUST appear in your webpage before both the post a comment invitation text and the post form. -->
<style type="text/css"">
.docomments_post_form_font
{
	font-family:Arial;
	font-size:14px;
}

.docomments_post_comment_invite_font
{
	color:#0000ff;
	cursor:pointer;
	cursor:hand;
	font-family:Arial;
	font-size:14px;
	text-decoration:underline;
}
</style>

<!-- This is the invitation text that invites guests to post a comment and reveals the post form when clicked. -->
<!-- You may change the 'Click here to post a comment' text to whatever you wish, but keep the <font> tag intact. -->
<p>
	<font class="docomments_post_comment_invite_font" onclick="javascript:ShowPostCommentForm();">Click here to post a comment</font>
</p>

<!-- The following HTML defines DoComments' post form and a division into which DoComments reads in comments from Jerrata Solutions' servers. -->
<!-- You may place this anywhere you like on your webpage, but this code MUST appear before the Javascript code that you'll see further down. -->
<div id="docomments">
	<a name="docomments_post_form">
	<div id="docomments_post" style="height:1px;overflow:hidden;visibility:hidden;">
		<table cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td valign="middle">
								<input checked id="docomments_post_contents_method_anonymously" name="docomments_post_contents_method" onclick="javascript:ChangePostMethod('anonymous');" type="radio" value="anonymously">
							</td>
							<td valign="middle">
								<font class="docomments_post_form_font" onclick="javascript:document.getElementById('docomments_post_contents_method_anonymously').click();" style="cursor:pointer;cursor:hand;">&nbsp;Post anonymously</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:10px;"></td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td valign="middle">
								<input id="docomments_post_contents_method_with_my_details" name="docomments_post_contents_method" onclick="javascript:ChangePostMethod('with_my_details');" type="radio" value="with_my_details">
							</td>
							<td valign="middle">
								<font class="docomments_post_form_font" onclick="javascript:document.getElementById('docomments_post_contents_method_with_my_details').click();" style="cursor:pointer;cursor:hand;">&nbsp;Post with my details:</font>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:10px;"></td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td style="width:40px;"></td>
							<td>
								<table cellpadding="0" cellspacing="0">
									<tr>
										<td style="text-align:right;" valign="middle">
											<font class="docomments_post_form_font">My name:&nbsp;</font>
										</td>
										<td valign="middle">
											<input disabled id="docomments_post_contents_author_name" maxlength="32" type="text" value="Anonymous">
										</td>
									</tr>
									<tr>
										<td style="height:10px;"></td>
									</tr>
									<tr>
										<td valign="middle">
											<font class="docomments_post_form_font">My email address:&nbsp;</font>
										</td>
										<td valign="middle">
											<nobr>
												<input disabled id="docomments_post_contents_author_email_addr" maxlength="64" type="text">
												<font class="docomments_post_form_font">(Optional; won't be displayed)</font>
											</nobr>
										</td>
									</tr>
									<tr>
										<td style="height:1px;"></td>
									</tr>
									<tr>
										<td></td>
										<td>
											<table cellpadding="0" cellspacing="0">
												<tr>
													<td valign="middle">
														<input disabled id="docomments_post_contents_author_email_on_reply" type="checkbox">
													</td>
													<td valign="middle">
														<font class="docomments_post_form_font" onclick="javascript:document.getElementById('docomments_post_contents_author_email_on_reply').click();" style="cursor:pointer;cursor:hand;">&nbsp;Email me when someone replies to my comment</font>
													</td>
												</tr>
											</table>
										</td>
									</tr>
									<tr>
										<td style="height:10px;"></td>
									</tr>
									<tr>
										<td valign="middle">
											<font class="docomments_post_form_font">My Web address:&nbsp;</font>
										</td>
										<td valign="middle">
											<nobr>
												<input disabled id="docomments_post_contents_author_url" maxlength="128" type="text">
												<font class="docomments_post_form_font">(Optional)</font>
											</nobr>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:20px;"></td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td valign="middle">
								<font class="docomments_post_form_font">I give this a rating of:&nbsp;</font>
							</td>
							<td valign="middle">
								<select id="docomments_post_contents_rating">
									<option value="none">No rating</option>
									<option value="1">1 - Poor</option>
									<option value="2">2 - Below average</option>
									<option value="3">3 - OK</option>
									<option value="4">4 - Above average</option>
									<option value="5">5 - Excellent!</option>
								</select>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:20px;"></td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0" style="width:100%;">
						<tr>
							<td>
								<font class="docomments_post_form_font" id="docomments_post_contents_comment_title"></font>
							</td>
						</tr>
						<tr>
							<td id="docomments_post_contents_is_reply_container"></td>
						</tr>
						<tr>
							<td style="width:100%;">
								<textarea id="docomments_post_contents_comment" onkeydown="javascript:UpdateNumCharsRemaining('docomments_post_contents_comment','docomments_post_contents_comment_title');" onkeyup="javascript:UpdateNumCharsRemaining('docomments_post_contents_comment','docomments_post_contents_comment_title');" rows="7" style="width:100%;"></textarea>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:10px;"></td>
			</tr>
			<tr>
				<td>
					<table cellpadding="0" cellspacing="0">
						<tr>
							<td valign="middle">
								<nobr>
									<font class="docomments_post_form_font">Please solve: <font id="docomments_post_contents_captcha_q"></font>&nbsp;=&nbsp;</font>
								</nobr>
							</td>
							<td valign="middle">
								<input id="docomments_post_contents_captcha_entered" type="text">
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td style="height:10px;"></td>
			</tr>
			<tr>
				<td>
					<nobr>
						<input id="docomments_post_contents_post_comment_button" onclick="javascript:PostComment();" type="button" value="Post Comment">
						&nbsp;
						<input id="docomments_post_contents_cancel_button" onclick="javascript:HidePostCommentForm();" type="button" value="Cancel">
					</nobr>
				</td>
			</tr>
		</table>
	</div>
	</a>
	<br>
	<div id="docomments_read">
		<div id="docomments_comments_container"></div>
		<div id="docomments_page_selector_container" style="visibility:hidden;">
			<table cellpadding="0" cellspacing="0">
				<tr>
					<td valign="middle">
						<input id="docomments_read_contents_prev_page_button" onclick="javascript:LoadPrevPage();" type="button" value="Previous Page">
					</td>
					<td style="width:20px;"></td>
					<td valign="middle">
						<font class="docomments_post_form_font">Jump to page:&nbsp;</font>
					</td>
					<td valign="middle">
						<select id="docomments_page_selector" onchange="javascript:ChangePage(this.value);"></select>
					</td>
					<td style="width:20px;"></td>
					<td valign="middle">
						<input id="docomments_read_contents_next_page_button" onclick="javascript:LoadNextPage();" type="button" value="Next Page">
					</td>
				</tr>
			</table>
		</div>
	</div>
</div>

<!-- This is the Javascript code that includes DoComments and tells the software which topic to post new comments under and to read comments from. -->
<!-- Change "Default" to any topic of your choosing; multiple webpages can have the same topic, or you can have one topic per webpage. -->
<script language="javascript">var docomments_topic = "change_me";</script>
<!-- Remember to change src="DoComments.js" if DoComments.js is not located in the same directory as your webpage.				-->
<!-- For example, if your webpage is docs/my_page.html and DoComments.js is docs/DoComments/DoComments.js,						-->
<!-- then the src attribute, below, becomes src="DoComments/DoComments.js".  You can also specify an absolute URL if you wish	-->
<!-- (for example, http://mysite.com/DoComments/DoComments.js)																	-->
<script language="javascript" src="DoComments.js"></script>

<hr width="100%">

<font style="font-family:Arial;font-size:14px;line-height:20px;">Need help?  Contact <a href="mailto:hide@address.com">hide@address.com</a> for assistance.</font>

<br>

<font style="font-family:Arial;font-size:14px;line-height:20px;">DoComments version 2.0</font>

<br>

<font style="font-family:Arial;font-size:14px;line-height:20px;">DoComments &copy;2009 Jerrata Solutions, all rights reserved.

</body>
</html>
Return current item: Jerrata DoComments