Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
[For 1.8] [Tutorial] Blockquote Expand/Collapse
#1
So I have seen a few people here ask about collapsing quote/codeblock and also a few people have asked me personally about the collapsing collapsing quote/codeblock in the Devel theme. Credit goes to as you notice in the devel theme: "Authors: mmadhankumar & vintagedaddyo".  Anywhoo..., credit to mmadhankumar on the "Blockquote Expand/Collapse"..., and I figured I would share since folks have asked for this and even if it is aready in a theme..., here it is for anyone needing it outside of a theme...


Edit: headerinclude

Add:
<!-- Blockquote Expand/Collapse -->
<script type="text/javascript">
$(document).ready(function () {
    $('blockquote').addClass('collapsed');
        $('blockquote').click(function(){
        $(this).toggleClass("expanded collapsed");
        e.preventDefault();
    });
});
</script>

Edit: global.css
Find:
blockquote {
    border: 1px solid #ccc;
    margin: 0;
    background: #fff;
    padding: 10px;
}
blockquote cite {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    font-style: normal;
    display: block;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
}
blockquote cite span {
    float: right;
    font-weight: normal;
    font-size: 12px;
    color: #666;
}
blockquote cite span.highlight {
    float: none;
    font-weight: bold;
    padding-bottom: 0;
}
.codeblock {
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}
.codeblock .title {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
}
.codeblock code {
    overflow: auto;
    height: auto;
    max-height: 200px;
    display: block;
    font-family: Monaco, Consolas, Courier, monospace;
    font-size: 13px;
}

Add after:

.no_bottom_border {
    border-bottom: 0;
}
.collapsed, .expanded {
    overflow: hidden;
    border: 1px solid #D3D3D3;
    background: #FAFAFA;
    text-align: justify;
    padding: 10px;
    border-radius: 5px;
    margin: 0;
    position: relative;
}
.collapsed {
    max-height: 75px;
    opacity: 0.7;
}
.expanded {
    height: 100%;
    opacity: 1;
    padding-bottom: 35px;
}
.collapsed:after, .expanded:after {
    position: absolute;
    height: 25px;
    bottom: 0px;
    left: 1px;
    right: 1px;
    cursor: pointer;
    border: 1px solid #A5A5A5;
    background: #D3D3D3;
    color: #4A4A4A;
    text-align: center;
    line-height: 25px;
    font-weight: bold;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    font-size: 13px;
    border-radius: 0px 0px 5px 5px;
}
.collapsed:after {
    content: 'Show More';
    opacity: 0.9;
}
.expanded:after {
    content: 'Show Less';
    opacity: 0.7;
}
.collapsed:hover:after, .expanded:hover:after {
    opacity: 1;
    background: #838383;
    color: #1A1A1A;
}
Example:
[Image: 125ntkg.jpg]

[Image: 3310dp5.png]
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#2
Looks like this to me:

[Image: 4cf465968744446381ab4fc31b5ee5cc.png]
Just added what you said. (the show more is shown fine, but just the part on the top seems broken)


I also think there should be something that defines the "show more" to get activated.
E.g. if the quoted message has more than 5 lines, the "show more" function appears, otherwise it would look normal.
Reply
#3
Small addition to the tutorial......

If you want your "Code block to also expand and collapse

Edit: headerinclude

Add:
<!-- Codeblock Expand/Collapse -->
<script type="text/javascript">
$(document).ready(function () {
    $('div.codeblock').addClass('collapsed');
        $('div.codeblock').click(function(){
        $(this).toggleClass('expanded collapsed');
        e.preventDefault();
    });
});
</script>

And if you want both options in a plugin with the option to also select all in code.....,

Example:
[Image: xfrf37.png]

Select All In Code Plus 1.1
for 1.8.x


.zip   Plugin_selectallincode_1.1.zip (Size: 8.12 KB / Downloads: 52) * Fri, Nov 25th 3:27 Just now updated with three plugin file options (Select All "Plus", Select All "Code Only", Select All "Quote only")
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#4
My bad, i replaced the css instead to add it after it, sorry. Big Grin Thanks for the tutorial.

I noticed this doesn't work when the quote is quoted, can that be fixed somehow?
Reply
#5
Thanks , i just searching for this  Smile
My favorite theme NetPen Premium
Reply
#6
I hope u can consider this two improvements:

1. The show more functions does only appear when the quote has like more than 5 lines

and

2. make it work with quote in quote

also could you please tell me how to edit the show more and collapse text.
Reply
#7
(11-27-2016, 12:29 AM)thelovelyone Wrote: also could you please tell me how to edit the show more and collapse text.

.collapsed:after {
    content: 'Show More';
}
.expanded:after {
    content: 'Show Less';
}
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply
#8
(11-27-2016, 12:43 AM)vintagedaddyo Wrote:
.collapsed:after {
    content: 'Show More';
}
.expanded:after {
    content: 'Show Less';
}
Thanks.

Also if you're wondering why i want the improvement 1.
Just look at this for example:

[Image: 440c1bcdf4a24cd687c8e759d1b9ab1c.png]
basically, there would be no need here, or maybe the box could be abit bigger somehow by css?

Also noticed the quote in quote works actually, but the expand collapse is a bit buggy, if you try yourself.
I just didn't notice before, because if you quote a message, the "show more" does only appear if you reload page, s so it doesn't work right after posting.
Reply
#9
This user has been denied support. This user has been denied support.
Can I make this only do show more if the quote is longer than a certain length?
Reply
#10
An alternate version:

Add to: headerinclude
<!-- Blockquote Collapsed/Expand -->
<script type="text/javascript">
$(document).ready(function() {
       $('blockquote').each(function() {
           var active = this,
               expand = function() {
                   if (active.offsetHeight > 250) {
                       $(active).addClass('blockquote-collapsed').click(function() {
                           $(active).off("click").removeClass('blockquote-collapsed');
                       });
                   }
               };
           expand();
           $(this).on("elementResized", expand).find("img").one("load", expand);
       });
   });
</script>

Add to: global.css
.blockquote-collapsed {
    margin: 0;
    opacity: 0.7;
    padding: 10px;
    overflow: hidden;
    max-height: 150px;
    position: relative;
    background: #FAFAFA; 
    text-align: justify;
    padding-bottom: 25px;
    }

.blockquote-collapsed:after {
    left: 1px;
    right: 1px;
    bottom: 0px;
    opacity: 0.9;
    height: 25px;
    color: #4A4A4A;
    font-size: 13px;
    cursor: pointer;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    background: #D3D3D3;
    content: 'Show More';
    border: 1px solid #A5A5A5;
    border-radius: 0px 0px 5px 5px; 
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
  }

.blockquote-collapsed:hover:after {
    opacity: 1;
    color: #1A1A1A;
    background: #838383;
  } 
Example:
[Image: 2urtcnk.png]


[Image: 23uvdvt.png]

[Image: fyihaf.jpg]

As Plugin:

.php   SelectAllinCodeQuoteonlyfade.php (Size: 3.61 KB / Downloads: 103)


And an alternate version of the alternate version:

*instead of the alternate above..., we are going to do the same thing but add it to also include the codeblock...., now initially in the alternate above we used identifiers like:
blockquote-collapsed

now we could do the same for example to continue further:
codeblock-collapsed

But eh, why do that and make more work.., so lets slim it down from the alternate above:
and we are going to simply use these two:

This:
div.codeblock

And This :

blockquote

Then we will slim down the css to share for the two: *makes it easier for ya'll

So in essence we wont use for example:
.blockquote-collapsed
.codeblock-collapsed

We will just use:
.collapsed
 Hopefully that makes sense....

Let's get to it shall we?


Edit and add to: headerinclude
<!-- Blockquote Collapsed/Expand -->
<script type="text/javascript">
$(document).ready(function() {
       $('blockquote').each(function() {
           var active = this,
               expand = function() {
                   if (active.offsetHeight > 250) {
                       $(active).addClass('collapsed').click(function() {
                           $(active).off("click").removeClass('collapsed');
                       });
                   }
               };
           expand();
           $(this).on("elementResized", expand).find("img").one("load", expand);
       });
   });
</script>
<!-- Codeblock Collapsed/Expand -->
<script type="text/javascript">
$(document).ready(function() {
       $('div.codeblock').each(function() {
           var active = this,
               expand = function() {
                   if (active.offsetHeight > 250) {
                       $(active).addClass('collapsed').click(function() {
                           $(active).off("click").removeClass('collapsed');
                       });
                   }
               };
           expand();
           $(this).on("elementResized", expand).find("img").one("load", expand);
       });
   });
</script>



Edit and add to: global.css
.collapsed {
    margin: 0;
    opacity: 0.7;
    padding: 10px;
    overflow: hidden;
    max-height: 150px;
    position: relative;
    background: #FAFAFA; 
    text-align: justify;
    padding-bottom: 25px;
    }

  .collapsed:after {
    left: 1px;
    right: 1px;
    bottom: 0px;
    opacity: 0.9;
    height: 25px;
    color: #4A4A4A;
    font-size: 13px;
    cursor: pointer;
    line-height: 25px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    background: #D3D3D3;
    content: 'Show More';
    border: 1px solid #A5A5A5;
    border-radius: 0px 0px 5px 5px; 
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    -khtml-border-radius: 0px 0px 5px 5px;
    font-family: Tahoma, Verdana, Arial, Sans-Serif;
    }

  .collapsed:hover:after {
    opacity: 1;
    color: #1A1A1A;
    background: #838383;
  } 
As Plugin:

.php   SAICAPQCfade.php (Size: 4.08 KB / Downloads: 91)
MyBB Themes Team - Making more professional themes by the hour. (Retired)
My Mods | Offer me a coffee!
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)