Scriptaculous Hiding Post Buttons

[leefish]

I made this little setup using scriptaculous - mainly to try the code out. I know everybody uses jQuery, but this one won't conflict with core mybb.


What does it do? Well, it will hide the post buttons, and on a click will show them - then rehide them.

Here is the code for horizontal post bit:

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64

{$ignore_bit} <a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tbody> <tr> <td class="tcat"> <div class="float_left smalltext"> {$post['postdate']}, {$post['posttime']} <span id="edited_by_{$post['pid']}">{$post['editedmsg']}</span> </div> {$post['posturl']} </td> </tr> <tr> <td class="trow1 {$unapproved_shade}"> <table cellspacing="0" cellpadding="0" border="0" style="width: 100%;"> <tr> <td class="post_avatar" width="1" style="{$post['avatar_padding']}"> {$post['useravatar']} </td> <td class="post_author"> <strong><span class="largetext">{$post['profilelink']}</span></strong> {$post['onlinestatus']}<br /> <span class="smalltext"> {$post['usertitle']}<br /> {$post['userstars']} {$post['groupimage']} </span> </td> <td class="smalltext post_author_info" width="165"> {$post['user_details']} </td> </tr> </table> </td> </tr> <tr> <td class="trow2 post_content {$unapproved_shade}"> <span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span> <div class="post_body" id="pid_{$post['pid']}"> {$post['message']} </div> <br /> <fieldset>{$post['signature']}</fieldset> <br />{$post['attachments']} <div class="post_meta" id="post_meta_{$post['pid']}"> <span class="float_left">{$post['iplogged']}</span> <span class="float_right" title="Click to show post options"><a href="javascript:;" onclick="Effect.toggle('post_{$post['pid']}1', 'appear', { duration: 0.5 }); ($('post_{$post['pid']}1').visible() == true) ? $('post_{$post['pid']}2').update('Show Post Options') : $('post_{$post['pid']}2').update('Hide Post Options');" id="post_{$post['pid']}2">Show Post Options</a></span><br class="clear_both" /> </td> </tr> <tr> <td class="trow1 post_buttons {$unapproved_shade}"> <div id="post_{$post['pid']}1" style="display: none;"> <div class="postbitbuttons float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']} </div> <div class="post_management_buttons float_right"> {$post['button_edit']}{$post['button_quickdelete']}{$post['button_multiquote']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}{$post['button_newreply']}{$post['button_report']}{$post['button_warn']} </div> </div> </td> </tr> </tbody> </table>

---

and here is the code for classic postbit:

HTML Code

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50

{$ignore_bit} <table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder" style="{$post_extra_style} {$post_visibility}" id="post_{$post['pid']}"> <tr> <td class="{$altbg}" width="15%" style="white-space: nowrap; text-align: center; vertical-align: top"><a name="pid{$post['pid']}" id="pid{$post['pid']}"></a> <strong><span class="largetext">{$post['profilelink']}</span></strong><br /> <span class="smalltext"> {$post['usertitle']}{$post['onlinestatus']}<br /> {$post['useravatar']} <br /> {$post['userstars']} {$post['groupimage']}<br /> {$post['user_details']} </span> </td> <td class="{$altbg}" valign="top"> <table width="100%"> <tr><td class="trow4">{$post['posturl']}<span class="smalltext"><strong>{$post['icon']}{$post['subject']} {$post['subject_extra']}</strong></span></td></tr> <tr><td> <br /> <div id="pid_{$post['pid']}" class="post_body" style="padding: 5px 0 5px 0;"> {$post['message']} </div> <div>{$post['attachments']}</div> </td></tr> </table> </td> </tr> <tr> <td class="{$altbg}" valign="bottom"> <fieldset>{$post['signature']}</fieldset> <span class="float_right" title="Click to show post options"><a href="javascript:;" onclick="Effect.toggle('post_{$post['pid']}1', 'appear', { duration: 0.5 }); ($('post_{$post['pid']}1').visible() == true) ? $('post_{$post['pid']}2').update('Show Post Options') : $('post_{$post['pid']}2').update('Hide Post Options');" id="post_{$post['pid']}2">Show Post Options</a></span> </td> </tr> <tr> <td class="{$altbg}" style="white-space: nowrap; text-align: center; vertical-align: middle;"> <span class="smalltext">{$post['postdate']} {$post['posttime']}</span> </td> <td class="{$altbg}"> <div id="post_{$post['pid']}1" style="display: none;"> <div class="float_left"> {$post['button_email']}{$post['button_pm']}{$post['button_www']}{$post['button_find']} </div> <div class="float_right">{$post['button_edit']}{$post['button_quickdelete']}{$post['button_multiquote']}{$post['button_reply_pm']}{$post['button_replyall_pm']}{$post['button_forward_pm']}{$post['button_delete_pm']}{$post['button_report']}{$post['button_warn']} </div> </div> </td> </tr> </table>

---

You need to add this link to the Google API in the header include or in the head of showthread:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/effects.js"></script>

---

You can see it in action on my test site - its best to see it as a user - I have made a user id:

Name: testuser
Login: testuser1

http://www.leefish.nl/testfish/showthread.php?tid=5

w3c validation site was down - but I THINK it validates ok