What do you think of this?

If you're intrigued keep reading.  If not;

 move along

 Move along folks. Nothing to see here.

Fork to a New Topic

We have the cool feature that let us fork a post to a new topic.

and the post then gets a tag like this.

The Problem

But people will often reply to the post anyway - and that just makes things difficult.

I just did this.

When you click the Read More button it returns to

To make this happen.

Edit the forked post

Edit the post Source Code

Click Source Code

Add the highlighted text


<div class="fade-box">
<p>ST I just did the update for 7.1.5 the other day and had to go through the Bose Connect app vs a computer. Since it is wireless, it took a long time to download the update. But when done the actual update of the S1 went quickly.&nbsp;</p>
<p>I donโ€™t suppose the app caches or stores that update on the appโ€™s device so when you update another S1 it wouldnโ€™t have to download the whole thing again?</p>
<p>If so, this might be a new feature to suggest&nbsp;to the updater process to allow&nbsp;the update to be kept around to allow you to update multiple S1s with one download.&nbsp;</p>
<p class="read-more"><a class="button" href="#">Read More. Don't reply to this post.</a></p>
</div>


 

How do I add this feature?

You have to add some Custom CSS and End of Page HTML. It's not as tricky as it looks. You can copy/paste the code below.

I adapted this from an article Text Fade Out/Read More

Custom CSS

Go to Control Panel | Display Settings | Custom CSS

Add the text below.


/* fade out adapted from https://css-tricks.com/text-fade-read-more
 Add the following above and below the content of a post that has been forked to a new topic
 <div class="fade-box">
 [ original content here]
 <p class="read-more"><a class="button" href="#">Read More. Don't reply to this post.</a></p>
</div>
*/

.fade-box {
  max-height: 120px;
  position: relative;
  overflow: hidden;
}
.fade-box .read-more {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0; padding: 30px 0;
    
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to bottom, transparent, black);
}


End of Page HTML

Go to Control Panel | Display Settings | End or Page HTML

Add the text below.


<script>
/* fade box is used to hide content in a post and offer a read more button
 adapted from https://css-tricks.com/text-fade-read-more
 Add the following above and below the content of a post that has been forked to a new topic
 <div class="fade-box">
 [ original content here]
 <p class="read-more"><a class="button" href="#">Read More. Don't reply to this post.</a></p>
</div>
*/

var $el, $ps, $up, totalHeight;

$(".fade-box .button").click(function() {
      
  totalHeight = 50

  $el = $(this);
  $p  = $el.parent();
  $up = $p.parent();
  $ps = $up.find("p:not('.read-more')");

// totalHeight forced to 50 to  add padding for message about post forked

  // measure how tall inside should be by adding together heights of all inside paragraphs (except read-more paragraph)
  $ps.each(function() {
    totalHeight += $(this).outerHeight();
  });
        
  $up
    .css({
      // Set height to prevent instant jumpdown when max height is removed
      "height": $up.height(),
      "max-height": 9999
    })
    .animate({
      "height": totalHeight
    });
 
  // fade out read-more
  $p.fadeOut();
 
  // prevent jump-down
  return false;
    
});
</script>

 


 

Attachments

Images (6)

If you are one of those hyper-productive people using ActiveWords

There's a step where you have to Edit the Forked Post.

It took only a couple of minutes to automate that with an ActiveWord.  If you're already using ActiveWords, here is the script for an ActiveWord called "fade box"

<div class="fade-box">
{control down}{v}{control up}{control down}{enter}{control up}
<p class="read-more"><a class="button" href="#">Read More. Don't reply to this post.</a></p>
</div>

Usage:

Enter edit mode for the post you want to change.

Tap the Source Code button on the toolbar

Select all the text

Copy all the text to the clipboard

type "fade box"

Cheers,

ST

PS  - not familiar with ActiveWords? See My Favourite Tool When I'm Online

ST

Add Reply

  • Crowdstack
  • Eve Community
  • FeePod
  • ×
    ×
    ×
    ×
    Link copied to your clipboard.
    ×