Strange Look of the Code/Quote/PHP/HTML blocks in post

[HM666]

I've got this weird thing going on my site. The code, html, php & quote boxes inside posts are literally missing the boxes! You can see from my screen shot what I mean.

I just upgraded to the latest vBulletin 4.2.2 P4 today. I had not checked this before so I do not know if I had this issue before the update or if this is something in IB's infinite wisdom that they have decided to change essentially making it difficult to "actually" read a post with code, html, php or a quote in it.

So how do I fix this to actually HAVE boxes again? Did IB kill the boxes or something? Or is it just me?

I'm using the default skin that was installed when I installed the board & I disabled the mods globally and tried posting again but had the same result.

[MarkFL]

I have rewritten by quote, code, html and php boxes so that they have a maximum height on default, but have toggle buttons at the upper right to show them full size if desired. Also, in the 3 code boxes, if my users double click inside the box, all the text is selected. This makes it easy to copy posted code to the clipboard.

If you don't find out why you are not getting boxes and you are interested in something like this, I would be glad to share my code with you.

I have attached a screenshot of the code box so you can get an idea what it looks like.

[HM666]

Oh hey I like that much better than the original anyways! Yes please share I would be interested.

[MarkFL]

Originally Posted by HM666

Oh hey I like that much better than the original anyways! Yes please share I would be interested.

One question first...do you use LaTeX powered by MathJax on your site(s)? I do, and if you do not, then I will need to make some small changes to the code.

[HM666]

Originally Posted by MarkFL

One question first...do you use LaTeX powered by MathJax on your site(s)? I do, and if you do not, then I will need to make some small changes to the code.

Er no never heard of that. Its a web design site so no need for math

[MarkFL]

Okay, it is getting late here, and so I will put together the code and post it first thing tomorrow.

[HM666]

ok thanks Mark

[ozzy47]

That looks pretty cool Mark. I did it on my site with the max height, but I like the expanding deal as well.

But I still wonder what happened to Len's code to mess it up.

[MarkFL]

Okay, here is the code I use:

The "bbcode_code" template:

<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:

<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:

<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:

<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:

/*-----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:

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);
	}
}

[Lynne]

It would have been useful to get a link to a post with the missing boxes so we could check the CSS. My *guess* is that you didn't update the css templates after your upgrade and so the old CSS is being used and it no longer works. (And you may need to do that in order to use the code above since it may count on using some of the default CSS.)