MyBB Community Forums

MyBB Community Forums > Resources > Tutorials > [Tutorial]Simple onclick show/hide quick reply box
Full Version: [Tutorial]Simple onclick show/hide quick reply box
You're currently viewing a stripped down version of our content. View the full version with proper formatting.

Lunty

2009-03-04, 08:20 PM
This is just a simple way to hide your quick reply box so it's not as cluttered at the bottom. You will need to make a fast reply image that matches your theme and upload it to your theme's image folder.

First headover to your admin CP >> Templates >> your themes templates >> headerinclude and replace it with this.

<link rel="alternate" type="application/rss+xml" title="{$lang->latest_threads} (RSS 2.0)" href="{$mybb->settings['bburl']}/syndication.php" />
<link rel="alternate" type="application/atom+xml" title="{$lang->latest_threads} (Atom 1.0)" href="{$mybb->settings['bburl']}/syndication.php?type=atom1.0" />
<meta http-equiv="Content-Type" content="text/html; charset={$charset}" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/prototype.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/general.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/menu.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/mybb.js?ver=1400"></script>
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1400"></script>

<script type="text/javascript">

function ShowHide(elementId)
{
	var element = document.getElementById(elementId);
	if(element.style.display != "block")
	{
		element.style.display = "block";
	}
	else
	{
		element.style.display = "none";
	}
}
function UpdateText(element)
{
	if(element.innerHTML.indexOf("Show") != -1)
	{
		element.innerHTML = "<img src='images/YOUR THEME /fastreply.gif'>";
	}
	else
	{
		element.innerHTML = "<img src='images/YOUR THEME/fastreply.gif'>";
	}
}

</script>

{$stylesheets}
<script type="text/javascript">
<!--
	var cookieDomain = "{$mybb->settings['cookiedomain']}";
	var cookiePath = "{$mybb->settings['cookiepath']}";
	var cookiePrefix = "{$mybb->settings['cookieprefix']}";
	var deleteevent_confirm = "{$lang->deleteevent_confirm}";
	var removeattach_confirm = "{$lang->removeattach_confirm}";
	var loading_text = '{$lang->ajax_loading}';
	var saving_changes = '{$lang->saving_changes}';
	var use_xmlhttprequest = "{$mybb->settings['use_xmlhttprequest']}";
	var my_post_key = "{$mybb->post_code}";
	var imagepath = "{$theme['imgdir']}";
// -->
</script>
{$newpmmsg}

Make sure you change the image location on these two bits
element.innerHTML = "<img src='images/YOUR THEME/fastreply.gif'>";


Then navigate to your Templates >> your themes templates >> Show Thread Templates >> Showthread and replace it with this.

<html>
<head>
<title>{$thread['subject']}</title>
{$headerinclude}
<script type="text/javascript">
<!--
	var quickdelete_confirm = "{$lang->quickdelete_confirm}";
// -->
</script>
<script type="text/javascript" src="jscripts/thread.js?ver=1400"></script>
</head>
<body>
	{$header}
	{$pollbox}
	<div class="float_left">
		{$multipage}
	</div>
	<div class="float_right">
	<a href="javascript:void(0);"
onclick="ShowHide('divDetails');UpdateText(this);"><img src="images/YOUR THEME/fastreply.gif"></a>  {$newreply} 
	</div>
	{$ratethread}
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="clear: both; border-bottom-width: 0;">
		<tr>
			<td class="thead" colspan="2">
				<div style="float: right;">
					<span class="smalltext"><strong><a href="showthread.php?mode=threaded&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->threaded}</a> | <a href="showthread.php?mode=linear&amp;tid={$tid}&amp;pid={$pid}#pid{$pid}">{$lang->linear}</a></strong></span>
				</div>
				<div>
					<strong>{$thread['subject']}</strong>
				</div>
			</td>
		</tr>
		{$classic_header}
	</table>
	<div id="posts">
		{$posts}
	</div>
	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="border-top-width: 0;">
		<tr>
			<td colspan="2" class="tfoot">
				{$search_thread}
				<div>
					<strong>&laquo; <a href="{$next_oldest_link}">{$lang->next_oldest}</a> | <a href="{$next_newest_link}">{$lang->next_newest}</a> &raquo;</strong>
				</div>
			</td>
		</tr>
	</table>
	<div class="float_left">
		{$multipage}
	</div>
	<div style="padding-top: 4px;" class="float_right">
	 
<a href="javascript:void(0);"
onclick="ShowHide('divDetails');UpdateText(this);"><img src="images/YOUR THEME/fastreply.gif"></a>  {$newreply}	</div>
	<br style="clear: both;" />
	{$quickreply}
	{$threadexbox}
	{$similarthreads}
	<br />
	<div class="float_left">
		<ul class="thread_tools">
			<li class="printable"><a href="printthread.php?tid={$tid}">{$lang->view_printable}</a></li>
			<li class="sendthread"><a href="sendthread.php?tid={$tid}">{$lang->send_thread}</a></li>
			<li class="subscription_{$add_remove_subscription}"><a href="usercp2.php?action={$add_remove_subscription}subscription&amp;tid={$tid}">{$add_remove_subscription_text}</a></li>
		</ul>
	</div>

	<div class="float_right" style="text-align: right;">
		{$moderationoptions}
		{$forumjump}
	</div>
	<br style="clear: both;" />
	{$footer}
</body>
</html>

Again make sure you change the image location of the images
<a href="javascript:void(0);"
onclick="ShowHide('divDetails');UpdateText(this);"><img src="images/YOUR THEME/fastreply.gif"></a>

Finally go to Templates >> your themes templates >> Show Thread Templates >> showthread_quickreply and replace it with this.

<div id="divDetails" style="display:none;"><br />
<form method="post" action="newreply.php?tid={$tid}&amp;processed=1" name="quick_reply_form" id="quick_reply_form">
	<input type="hidden" name="my_post_key" value="{$mybb->post_code}" />
	<input type="hidden" name="subject" value="RE: {$thread['subject']}" />
	<input type="hidden" name="action" value="do_newreply" />
	<input type="hidden" name="posthash" value="{$posthash}" id="posthash" />
	<input type="hidden" name="quoted_ids" value="" id="quoted_ids" />
	<input type="hidden" name="lastpid" id="lastpid" value="{$last_pid}" />
	<input type="hidden" name="from_page" value="{$page}" />
	<input type="hidden" name="tid" value="{$tid}" />
	<input type="hidden" name="method" value="quickreply" />

	<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
		<thead>
			<tr>
				<td class="thead" colspan="2">
					<div class="expcolimage"><img src="{$theme['imgdir']}/collapse{$collapsedimg['quickreply']}.gif" id="quickreply_img" class="expander" alt="[-]" title="[-]" /></div>
					<div><strong>{$lang->quick_reply}</strong></div>
				</td>
			</tr>
		</thead>
		<tbody style="{$collapsed['quickreply_e']}" id="quickreply_e">
			<tr>
				<td class="trow1" valign="top" width="22%">
					<strong>{$lang->message}</strong><br />
					<span class="smalltext">{$lang->message_note}<br /><br />
					<label><input type="checkbox" class="checkbox" name="postoptions[signature]" value="1" {$postoptionschecked['signature']} />&nbsp;<strong>{$lang->signature}</strong></label><br />
					<label><input type="checkbox" class="checkbox" name="postoptions[disablesmilies]" value="1" />&nbsp;<strong>{$lang->disable_smilies}</strong></label>{$closeoption}</span>
				</td>
				<td class="trow1">
					<div style="width: 95%">
						<textarea style="width: 100%; padding: 4px; margin: 0;" rows="8" cols="80" name="message" id="message" tabindex="1"></textarea>
					</div>
					<div class="editor_control_bar" style="width: 95%; padding: 4px; margin-top: 3px; display: none;" id="quickreply_multiquote">
						<span class="smalltext">
							{$lang->quickreply_multiquote_selected} <a href="./newreply.php?tid={$tid}&amp;load_all_quotes=1" onclick="return Thread.loadMultiQuoted();">{$lang->quickreply_multiquote_now}</a> {$lang->or} <a href="java script:Thread.clearMultiQuoted();">{$lang->quickreply_multiquote_deselect}</a>.
						</span>
					</div>
				</td>
			</tr>
			{$captcha}
			<tr>
				<td colspan="2" align="center" class="tfoot"><input type="submit" class="button" value="{$lang->post_reply}" tabindex="2" accesskey="s" id="quick_reply_submit" /> <input type="submit" class="button" name="previewpost" value="{$lang->preview_post}" tabindex="3" /></td>
			</tr>
		</tbody>
	</table>
</form></div>

So now were ended up with this as default
http://img124.imageshack.us/img124/374/h...kreply.png

And then the quick reply executed with the fast reply image.
http://img124.imageshack.us/img124/7599/...kreply.png

x_Stricken_x

2009-03-04, 08:22 PM
Nice tutorial, but make sure to change /Evolution/ in your links, to /YOUR_THEME/, as not everyone is using that theme.

Rafael

2009-06-19, 02:24 PM
Have a question, this make my forum more "light" well, I will increase the forum performance with this?

Thanks!

AndrewPH

2009-08-10, 06:31 AM
can this be add on postbit right, is it possible?? not just on showthread.. Smile

Rafael

2009-08-10, 02:30 PM
(2009-08-10, 06:31 AM)AndrewPH Wrote: [ -> ]can this be add on postbit right, is it possible?? not just on showthread.. Smile

Include the button on the postbit template.

Lennart Sauter

2009-08-11, 08:58 PM
Why the hell would you implement so many scripts like prototype?
That's a killer for the performance.

Something like that should work out nicely:
<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("form");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}
//-->
</script>


<a href="javascript:ShowHide('quick_reply_form')">Show/Hide Quickreply</a>

Lunty

2009-08-11, 09:57 PM
(2009-08-11, 08:58 PM)Lennart Sauter Wrote: [ -> ]Why the hell would you implement so many scripts like prototype?
That's a killer for the performance.

Something like that should work out nicely:
<script type="text/javascript">
<!--
function ShowHide(id) {
    obj = document.getElementsByTagName("form");
    if (obj[id].style.display == 'block'){
    obj[id].style.display = 'none';
    }
    else {
    obj[id].style.display = 'block';
    }
}
//-->
</script>


<a href="javascript:ShowHide('quick_reply_form')">Show/Hide Quickreply</a>

How is this a killer on performance? This is all the script the rest is default MyBB coding.

<script type="text/javascript">

function ShowHide(elementId)
{
    var element = document.getElementById(elementId);
    if(element.style.display != "block")
    {
        element.style.display = "block";
    }
    else
    {
        element.style.display = "none";
    }
}
function UpdateText(element)
{
    if(element.innerHTML.indexOf("Show") != -1)
    {
        element.innerHTML = "<img src='images/YOUR THEME /fastreply.gif'>";
    }
    else
    {
        element.innerHTML = "<img src='images/YOUR THEME/fastreply.gif'>";
    }
}

</script>

Lennart Sauter

2009-08-12, 02:58 PM
Oh sorry. I see that you didn't add the whole of it.
Allright in this case Smile

Scoutie44

2009-08-13, 05:13 PM
You know, the easy way to do this is to remove the <thead> tags from the quickreply template, move the thead class td into the tbody, and just use an Quick Reply button as the expand/collapse thing. Requires no extra JS whatsoever.

Lunty

2009-08-13, 08:39 PM
True, but either way it doesn't really do anything performance wise but yea it is actually easier your way.
MyBB Community Forums > Resources > Tutorials > [Tutorial]Simple onclick show/hide quick reply box