vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 General Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=251)
-   -   Strange Look of the Code/Quote/PHP/HTML blocks in post (https://vborg.vbsupport.ru/showthread.php?t=316539)

HM666 01-10-2015 02:44 AM
Strange Look of the Code/Quote/PHP/HTML blocks in post
 
1 Attachment(s)
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. :rolleyes:

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 01-10-2015 03:31 AM
1 Attachment(s)
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 01-10-2015 03:49 AM
Oh hey I like that much better than the original anyways! Yes please share I would be interested. :)

MarkFL 01-10-2015 03:56 AM
Quote:
Originally Posted by HM666 (Post 2531612)
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. :D

HM666 01-10-2015 04:16 AM
Quote:
Originally Posted by MarkFL (Post 2531613)
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. :D
Er no never heard of that. Its a web design site so no need for math :)

MarkFL 01-10-2015 04:25 AM
Okay, it is getting late here, and so I will put together the code and post it first thing tomorrow.:)

HM666 01-10-2015 04:27 AM
ok thanks Mark :)

ozzy47 01-10-2015 09:06 AM
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. :confused:

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

Lynne 01-10-2015 04:01 PM
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.)

HM666 01-10-2015 04:53 PM
Quote:
Originally Posted by Lynne (Post 2531703)
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.)

Ah ok. Here is a link: http://lenmkaiser.com/vb/vb4/showthr...p/17-HTML-test

My CSS is saved as a file not in the database could this have caused the problem? Also how do I update the CSS? The only thing I did was apply the patch from version 4.2.2 P3 to 4.2.2 P4. So it was not a big hop.

@Mark: Thanks I will give it a try and see how it works.

--------------- Added [DATE]1420919363[/DATE] at [TIME]1420919363[/TIME] ---------------

Just an update on a couple of things that I have tried I created a new default style and tried the code boxes in that, no dice and I tried rebuilding the style in the admincp and again no dice on making those little code boxes show up.

Lynne 01-10-2015 07:42 PM
LOL. Remove the word, um.... it will be censored if I post it here, but it is the last three letters of the word "class" and so it is "cl***" in your source code and thus the CSS isn't getting applied. When you enter that work into the censor list, put parenthesis around it - {WORD}

HM666 01-10-2015 08:57 PM
Quote:
Originally Posted by Lynne (Post 2531759)
LOL. Remove the word, um.... it will be censored if I post it here, but it is the last three letters of the word "class" and so it is "cl***" in your source code and thus the CSS isn't getting applied. When you enter that work into the censor list, put parenthesis around it - {WORD}
I love you! LOL Thanks Lynne. That solved it. And Mark I'm still gonna try your code as I do like that idea. :)

--------------- Added [DATE]1420949344[/DATE] at [TIME]1420949344[/TIME] ---------------

The code worked great Mark thanks. I'll be editing the colors when I do the skin for the site.


All times are GMT. The time now is 01:01 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.03252 seconds
  • Memory Usage 1,807KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (1)bbcode_code_printable
  • (5)bbcode_html_printable
  • (4)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (13)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete