Dynamic "New Reply" button for users with "Show Quick Reply?" checked in User CP
#1
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
Please don't PM me for support. Smile
Reply
#2
Nice work Seabody - I do exactly this on Leefish but I use Prototype.js and scriptaculous. Big Grin

PS I edited the title as it was causing the dreaded RE error Toungue
Random Fish and Sims Maniac
MY PLUGINS
Help MyBBSupport help you - remember to mark your threads as solved


Reply
#3
Thank you. Works like a charm !
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)