MyBB Community Forums
[Tutorial] Read More Break bbcode - Printable Version

+- MyBB Community Forums (https://community.mybb.com)
+-- Forum: Resources (https://community.mybb.com/forum-8.html)
+--- Forum: Tutorials (https://community.mybb.com/forum-38.html)
+--- Thread: [Tutorial] Read More Break bbcode (/thread-140799.html)



[Tutorial] Read More Break bbcode - Ohnoto - 2013-06-11

After spending many hours searching for an easy way to include a bbcode break for Announcement postings on the portal, I have found one that works really well.

The utilizes jquery. I have attached the files that I modified for my website. The originals can be found, here. The original version included "..." and cut off 100 characters after the break point. I removed the "..." and set the cut off at 0 characters.

1. Download these files and place them on your server. Mine are at /jscripts.

2. Modify Template -> Portal Templates -> Portal
Add the following code underneath {$headerinclude}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="jscripts/jquery.expander.js"></script>
<script src="jscripts/jquery.expander.min.js"></script>

<script>
$(document).ready(function() {
  var opts = {collapseTimer: 4000};

  $.each(['beforeExpand', 'afterExpand', 'onCollapse'], function(i, callback) {
    opts[callback] = function(byUser) {
      var by, msg = '<div class="success">' + callback;

      if (callback == 'onCollapse') {
        msg += ' (' + (byUser ? 'user' : 'timer') + ')';
      }
      msg += '</div>';

      $(this).parent().parent().append(msg)
    }
  });

  $('dl.expander dd').eq(0).expander();
  $('dl.expander dd').slice(1).expander(opts);


  $('ul.expander li').expander({
    slicePoint: 0,
    widow: 2,
    expandSpeed: 0,
    userCollapseText: '[^]'
  });

  $('div.expander').expander();
});

</script>

3. Create bbcode
Go to Configuration -> MyCode -> Add New MyCode

Regular Expression:
\[readmore\](.*?)\[/readmore\]

Replacement Text:
<div class="expander">$1</div>

Now anything within the readmore tags will be hidden behind a readmore link on the portal page. Also, by only adding the scripts to the Portal page, your announcement thread will still look like normal.


RE: [Tutorial] Read More Break bbcode - Ohnoto - 2013-07-28

I see a few downloads of this. Have others found this tutorial useful?


RE: [Tutorial] Read More Break bbcode - New2mybb - 2013-07-29

Thanks buddy perfect working for me


RE: [Tutorial] Read More Break bbcode - heydevo - 2013-07-31

Is there a way to make this simply link to the post itself, and not expand it?

I'm trying to use this as a solution to post excerpts on the Portal's Announcements posts.

I understand that there are Announcement Cutoff plugins, but those are all set to cut off after X characters or words; looking to utilize a tag to generate the Read More link.


RE: [Tutorial] Read More Break bbcode - OfficialElex - 2013-08-01

Very awesome tutorial.


RE: [Tutorial] Read More Break bbcode - Ohnoto - 2013-08-02

(2013-07-31, 06:55 PM)heydevo Wrote: Is there a way to make this simply link to the post itself, and not expand it?

I'm trying to use this as a solution to post excerpts on the Portal's Announcements posts.

I understand that there are Announcement Cutoff plugins, but those are all set to cut off after X characters or words; looking to utilize a tag to generate the Read More link.

I was originally looking for something similar to what you are asking, and tried a couple plugins also. Plugins I tried also would mess up bbcode also. As it cut it off at certain characters, it wouldn't have the end code bracket, so it would show the first bracket on the news posting.

I spent several days trying to find what you had described, and found many requests across several different sites, and most had the same conclusion.

After not being able to find what I was looking for with those, led me to doing this.

After I figured this out, I wanted to let everyone know of a work around so that news postings could still be condensed on the home page, but still look correct in the actual thread.


RE: [Tutorial] Read More Break bbcode - Aaraon Thomas - 2017-11-10

Still usefull! Thanks!