| MarkFL |
01-10-2015 02:00 PM |
Okay, here is the code I use:
The "bbcode_code" template:
HTML Code:
<div class="code_box_wrapper MHB_wrappers">
<div class="code_box_description">{vb:rawphrase code}:</div>
<div class="code_box"><pre id="code_select" class="code_box_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</pre></div>
</div>
<script>
var newid = GetNewId("code_select");
var el = document.getElementById(newid).parentNode;
el.style.maxHeight = code_height + 'px';
maxMinButton(newid,code_height,0);
</script>
The "bbcode_html" template:
HTML Code:
<div class="code_box_wrapper MHB_wrappers">
<div class="code_box_description">{vb:rawphrase html_code}:</div>
<div class="code_box"><pre id="code_select" class="code_box_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</pre></div>
</div>
<script>
var newid = GetNewId("code_select");
var el = document.getElementById(newid).parentNode;
el.style.maxHeight = code_height + 'px';
maxMinButton(newid,code_height,0);
</script>
The "bbcode_php" template:
HTML Code:
<div class="code_box_wrapper MHB_wrappers">
<div class="code_box_description">{vb:rawphrase php_code}:</div>
<div class="code_box"><code id="code_select" class="php_code_text" ondblclick="selectText(this.id)" title="Double-Click To Select All Text.">{vb:raw code}</code><br></div>
</div>
<script>
var newid = GetNewId("code_select");
var el = document.getElementById(newid).parentNode;
el.style.maxHeight = code_height + 'px';
maxMinButton(newid,code_height,0);
</script>
The "bbcode_quote" template:
HTML Code:
<script>
isQuote = true;
quoteLevel++;
</script>
<div class="bbcode_container">
<div class="bbcode_quote">
<div class="quote_container">
<div class="bbcode_quote_container triangle"></div>
<div class="bbcode_postedby">
<img src="{vb:stylevar imgdir_misc}/quote_icon.png" alt="{vb:rawphrase quote}" />
<vb:if condition="$show['username']">
{vb:rawphrase originally_posted_by_x, {vb:raw username}}
<vb:if condition="$postid"><a href="{vb:raw $vboptions.vbforum_url}{vb:if "$vboptions['vbforum_url']", '/', ''}showthread.php?{vb:raw session.sessionurl}p={vb:raw postid}#post{vb:raw postid}" rel="nofollow"><img class="inlineimg quote_show_post" src="{vb:stylevar imgdir_button}/viewpost-{vb:stylevar right}.png" alt="{vb:rawphrase view_post}" /></a></vb:if>
<vb:else />
<b>Quote:</b>
</vb:if>
</div>
<div class="message quote_container_outer">
<div id="code_select" class="quote_container_inner">{vb:raw message}</div>
</div>
</div>
</div>
</div>
<script>
quoteId[quote_count] = GetNewId("code_select");
var el = document.getElementById(quoteId[quote_count]).parentNode;
el.style.maxHeight = code_height + "px";
window.onload = function(){setTimeout(function(){isQuote = true;for(var n = 0;n <= quote_count;n++){maxMinButton(quoteId[n],code_height,n);};isQuote = false;},1000);};
quote_count++;
quoteLevel--;
if(!quoteLevel)
{
isQuote = false;
}
</script>
The CSS classes to be added to the "additional.css" template:
HTML Code:
/*-----Quote Box Styles-----*/
.bbcode_quote
{
color: #14495F;
box-shadow: 2px 2px 3px rgba(20,74,98,0.5);
}
.quote_container
{
padding: 0px 0px 0px 10px !important;
}
.triangle
{
position: absolute;
top: 5px;
}
.quote_container_outer
{
margin: 1px 0px;
overflow: auto;
font-style: normal;
}
.quote_container_inner
{
padding-right: 10px;
padding-bottom: 5px;
}
.no_postedby_message
{
padding: 5px 0px;
}
.bbcode_postedby
{
margin-right: 10px;
border-bottom: solid 1px #417394;
padding: 5px 0px 5px 5px;
font-size: 11px;
}
.quote_show_post
{
vertical-align: 0px !important;
}
/*-----Code Box Styles-----*/
.code_box_wrapper
{
margin: 20px 30px;
padding-bottom: 1px;
border: solid 1px #006000;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: #e7e7e7; /* Old browsers */
background: -moz-linear-gradient(left, #e7e7e7 0%, #ffffff 50%, #e7e7e7 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#e7e7e7), color-stop(50%,#ffffff), color-stop(100%,#e7e7e7)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* IE10+ */
background: linear-gradient(to right, #e7e7e7 0%,#ffffff 50%,#e7e7e7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e7e7e7', endColorstr='#e7e7e7',GradientType=1 ); /* IE6-8 */
}
.code_box_description
{
margin: 0px 10px 1px 10px;
padding: 5px 10px;
border-bottom: solid 1px #006000;
-moz-border-radius: 8px 8px 0px 0px;
-webkit-border-radius: 8px 8px 0px 0px;
border-radius: 8px 8px 0px 0px;
color: #800000;
font-size: 11px;
font-weight: bold;
}
.code_box
{
padding: 15px 10px 0px 10px;
overflow: auto;
color: #000060;
}
.code_box_text
{
font-family: Lucida Console,Courier,monospace;
font-size: 12px;
line-height: 1.25;
cursor: pointer;
}
.php_code_text
{
font-size: 15px;
cursor: pointer;
}
/*-----Max/Min Button Styles for Quote/Code Boxes-----*/
.maxminbutton
{
position: relative;
float: right;
right: 10px;
top: 4px;
width: 60px;
height: 15px;
text-align: center;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
font-weight: 300;
font-size: 9pt;
box-shadow: 2px 2px 3px rgba(20,74,98,0.5);
}
.maxminbutton:active
{
position: relative;
float: right;
right: 9px;
top: 5px;
box-shadow: none;
}
The support javascript which can either be put into an external file or included in the "headinclude_bottom" template within <script> tags:
Code:
var code_height = 300, isQuote = false, quoteLevel = 0, quote_count = 0, quoteId = [], quoteAddHeight = [];
for(var n = 0; n < 64; n++){quoteAddHeight[n] = 0;}
function GetNewId(oldid)
{
var rn,newid="id";
for(var i=0;i<8;i++)
{
rn = Math.floor(Math.random()*18446744073709551616);
newid = newid + rn;
}
document.getElementById(oldid).id = newid;
return newid;
}
function selectText(containerid)
{
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
}
}
function maxMinButton(elid,default_size,elnum)
{
var el = document.getElementById(elid).parentNode;
var sH = el.scrollHeight;
if(isQuote)
{
sH += quoteAddHeight[elnum];
}
if(el.clientHeight < sH)
{
var maxMinB = document.createElement("div");
maxMinB.className = "mhb_gradient mhb_button mhb_button_small maxminbutton";
maxMinB.innerHTML = "Expand";
maxMinB.title = "Expand to Full Height";
maxMinB.onclick = function()
{
if(this.innerHTML != 'Collapse')
{
el.style.maxHeight = 'none';
this.innerHTML = 'Collapse';
this.title = 'Collapse to Default Height';
}
else
{
el.style.maxHeight = default_size + 'px';
this.innerHTML = 'Expand';
this.title = 'Expand to Full Height';
}
};
el.parentNode.insertBefore(maxMinB,el.parentNode.firstChild);
}
}
|
More Information