forum post display problem

[Ancient Order]

Recently i seem to have display problems with the "code" bbcode i guess. I'm with IE11:




but some of them seem to work though:



those examples are taken from this thread:

https://www.x-null.net/forums/thread...6350#post36350

[DoubleKill]

That is problably a problem with the browser compatibility.

On firefox works fine.

[Purple Elephant1au]

I'm with IE11

You answered your own question. :P

[James]

Those pics are tiny and I can't really see anything, but sometimes the page doesn't load properly for me; I just refresh it and then it comes up fine. I think it might be the way browsers cache data. Not sure if your issue is the same as the one I'm speaking of though.

[Ancient Order]

James, click the pic to enlarge it :P Actually that's very stange, if i select the empty part, it displays like that, under IE11:



If i open the forum with Chrome it displays like that:



If i click on the link in my 1st post under IE11 i get that:

[Zappa]

That's weird, when I test the new xcode with IE11 here https://eduzappa18.github.io/xNULL-xcode/ it works (not at 100%, but works), but in the forums doesn't
It must be some incompatibility with vBulletin.


No idea why you prefer to use IE over any other browser.
IE is outdated, insecure and slow AF

Spoiler: IE

Probably this bug is caused because IE11 only have partial or no support at all on newest javascript features.
And by newest I mean stuff that are almost 6 years old.
IE doesn't even support async functions (Promises)!!

https://caniuse.com/#search=Promises
https://caniuse.com/#feat=mdn-javasc...tements_for_of
https://caniuse.com/#search=const
https://caniuse.com/#search=let
https://caniuse.com/#feat=mdn-javasc...tements_for_of
https://caniuse.com/#feat=mdn-api_parentnode_append


Anyways, I'll take a look to it

[Zappa]

@James, when you can, please replace the code inside "xcode-switch.js" with the one I posted below
with this, the xcode shuld work at 100% on IE11

@Ancient, after James updates the code, clear your cache and test it again.

Spoiler: code

if (!localStorage.getItem("xcode_theme")) {

    localStorage.setItem("xcode_theme", "light");

}



var light_theme = document.querySelector("#light_theme");

var dark_theme = document.querySelector("#dark_theme");

light_theme.disabled = true;

dark_theme.disabled = true;



document.addEventListener("DOMContentLoaded", function() {

    var blocks = document.querySelectorAll("pre.line-numbers");

    var wrapper, div, input, label;

    for (var i = 0; i < blocks.length; i++) {

        wrapper = document.createElement("div");

        wrapper.setAttribute("class", "xcode_container");



        div = document.createElement("div");

        div.setAttribute("class", "input-container");

        div.setAttribute("title", "Toggle Color Theme");



        input = document.createElement("input");

        input.setAttribute("id", "darkTheme");

        input.setAttribute("class", "xcode_switch");

        input.setAttribute("type", "checkbox");

        input.addEventListener("change", themeSwitch, false);



        label = document.createElement("label");

        label.setAttribute("class", "xcode_switch");

        label.setAttribute("for", "darkTheme");



        blocks[i].parentNode.insertBefore(wrapper, blocks[i]);

        div.appendChild(input);

        div.appendChild(label);

        wrapper.appendChild(blocks[i]);

        wrapper.appendChild(div);

    }



    if (localStorage.getItem("xcode_theme") == "dark") {

        toggleSwitch(true);

        toggleTheme("dark");

    } else if (localStorage.getItem("xcode_theme") == "light") {

        toggleSwitch(false);

        toggleTheme("light");

    }



    function themeSwitch() {

        if (this.checked) {

            toggleSwitch(true);

            toggleTheme("dark");

            localStorage.setItem("xcode_theme", "dark");

        } else {

            toggleSwitch(false);

            toggleTheme("light");

            localStorage.setItem("xcode_theme", "light");

        }

    }



    function toggleTheme(theme) {

        if (theme == "light") {

            light_theme.disabled = false;

            dark_theme.disabled = true;

        }

        if (theme == "dark") {

            dark_theme.disabled = false;

            light_theme.disabled = true;

        }

    }



    function toggleSwitch(value) {

        var inputs = document.querySelectorAll("input.xcode_switch");

        for (var i = 0; i < inputs.length; i++) {

            inputs[i].checked = value;

        }

    }

});

[James]

Updated.
@Ancient, When I click on the image, it still displays small. and when I try to click to make it bigger it doesn't do anything.
Here is what I see:
xnull.jpg

[Zappa]

Even after James updated the code, the problem still persisted... (It was 100% working when I tested it in my local server)

So, after some googling, (stackoverflow...) I found that the real cause of this issue is the "X-UA-Compatible" tag in vBulletin
What it does is to force IE users to render the site in IE9 mode (this was the latest IE release at the time vBulletin 4 was released)
You can see this in the emulation tab in IE11

Spoiler: IE Sucks

@James
This tag can be safely deleted to fix the issue

To delete it, go to:
Admin Panel > Styles & Templates > Style Manager > Default Style: Edit Templates > headinclude > Customize

search for:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

and delete it.

After deleting it, IE browsers will render the the forum as is supposed to be.

[James]

Done!