MyBB Community Forums

Introduction

In this tutorial, I will be showing you how to implement a dynamic, jQuery powered, New Reply button, for users who have "Show Quick Reply?" checked in their User CP.

Requirements
Template Conditionals or PHP in Templates.

Template Changes
First, open up the headerinclude template. Add this code to the bottom:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
jQuery.noConflict();
      function Scrolling(id){
              jQuery('html,body').animate({scrollTop: jQuery("#"+id).offset().top},'slow');
      }
</script>

This includes jQuery from the Google CDN, and powers the scroll. You can also use this code as a framework to scroll to any other id on the page, but I'll go into that later. Save the template.

Open up your showthread_newreply template. By default, it should resemble this:

<a href="newreply.php?tid={$tid}"><img src="{$theme['imglangdir']}/newreply.gif" alt="{$lang->post_reply_img}" title="{$lang->post_reply_img}" /></a>&nbsp;

Change it to this:

<if $mybb->user['showquickreply'] != '0' && $mybb->user['usergroup'] != '1' then>
<a onclick="Scrolling('quick_reply_form');document.quick_reply_form.message.focus();" href="javascript:void(0)"><img src="{$theme['imglangdir']}/newreply.gif" alt="{$lang->post_reply_img}" title="{$lang->post_reply_img}" /></a>&nbsp;
<else>
<a href="newreply.php?tid={$tid}"><img src="{$theme['imglangdir']}/newreply.gif" alt="{$lang->post_reply_img}" title="{$lang->post_reply_img}" /></a>&nbsp;
</if>

Save that template. Test it. When you have "Show Quick Reply?" ticked in your User CP, it should scroll to the Quick Reply form, and focus automatically. With it unchecked, it should behave as normal. When you're logged out, it should redirect to the No Permissions Page.

Using as a framework
I mentioned earlier that you could use this as a framework for scrolling to other elements. How does this work? Simple. When you want to implement it, simply add this code to an existing element, replacing ID with the id of another element:

onclick="Scrolling('ID')"

So, if I wanted to make a return to top button, I could make it look like this:

<a onclick="Scrolling('top')">{$lang->bottomlinks_returntop}</a>

Conclusion
In this tutorial, we have learnt a very basic way to implement a very powerful and versatile framework, and fashion it into a beautiful scrolling mechanism for those users who have ticked "Show Quick Reply?" in their User CP.

Thanks to Cafetin from AdvertiseHotspot for the original code

Nice work Seabody - I do exactly this on Leefish but I use Prototype.js and scriptaculous.

PS I edited the title as it was causing the dreaded RE error

Thank you. Works like a charm !