Internet Explorer/Edge detector not displaying JQuery dialog

up vote
0
down vote

favorite

I'm attempting to make a warning for when users visit my site while using either Internet Explorer or Edge, but the code I have simply displays nothing.

The IE/Edge Detector:

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        // Do stuff here

    }

My HTML:

<body>

    <!-- IE Alert -->

    <div id="unsupported-browser" title="Browser Not Supported" style="display:none;text-align:center;">

        <p>

            Uh Oh! Your browser is not supported!

            Downloading a newer browser is recommended for safety and security!

            Download one of the following browsers for an optimal experience!

            <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>

            <a href="https://www.google.com/chrome/index.html" target="_blank">Google Chrome</a>

        </p>

    </div>

</body>

My JQuery (With IE/Edge detector):

$(document).ready(function () {

    $('#unsupported-browser').dialog({

        autoOpen: false,

        width: 600,

        buttons: {

            "Ok": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    // Detect Internet Explorer/Edge

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        $(function () {

            $('#unsupported-browser').dialog('open');

            return false;

        });

    }

});

I believe the problem is somewhere in the dialog, as when I use alert(); inside the detector, the alert displays just fine. removing display:none; inside the div's style also has no effect.

asked Nov 19 at 22:06

Kixiron

Support for IE conditional comments got dropped in IE10. What version are you testing against? Also this will bloat your page. Might consider a redirect instead to an explanation page
– charlietfl
Nov 19 at 22:10

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
– Kixiron
Nov 19 at 22:14

add a comment |

up vote
0
down vote

favorite

I'm attempting to make a warning for when users visit my site while using either Internet Explorer or Edge, but the code I have simply displays nothing.

The IE/Edge Detector:

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        // Do stuff here

    }

My HTML:

<body>

    <!-- IE Alert -->

    <div id="unsupported-browser" title="Browser Not Supported" style="display:none;text-align:center;">

        <p>

            Uh Oh! Your browser is not supported!

            Downloading a newer browser is recommended for safety and security!

            Download one of the following browsers for an optimal experience!

            <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>

            <a href="https://www.google.com/chrome/index.html" target="_blank">Google Chrome</a>

        </p>

    </div>

</body>

My JQuery (With IE/Edge detector):

$(document).ready(function () {

    $('#unsupported-browser').dialog({

        autoOpen: false,

        width: 600,

        buttons: {

            "Ok": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    // Detect Internet Explorer/Edge

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        $(function () {

            $('#unsupported-browser').dialog('open');

            return false;

        });

    }

});

I believe the problem is somewhere in the dialog, as when I use alert(); inside the detector, the alert displays just fine. removing display:none; inside the div's style also has no effect.

asked Nov 19 at 22:06

Kixiron

Support for IE conditional comments got dropped in IE10. What version are you testing against? Also this will bloat your page. Might consider a redirect instead to an explanation page
– charlietfl
Nov 19 at 22:10

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
– Kixiron
Nov 19 at 22:14

add a comment |

up vote
0
down vote

favorite

I'm attempting to make a warning for when users visit my site while using either Internet Explorer or Edge, but the code I have simply displays nothing.

The IE/Edge Detector:

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        // Do stuff here

    }

My HTML:

<body>

    <!-- IE Alert -->

    <div id="unsupported-browser" title="Browser Not Supported" style="display:none;text-align:center;">

        <p>

            Uh Oh! Your browser is not supported!

            Downloading a newer browser is recommended for safety and security!

            Download one of the following browsers for an optimal experience!

            <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>

            <a href="https://www.google.com/chrome/index.html" target="_blank">Google Chrome</a>

        </p>

    </div>

</body>

My JQuery (With IE/Edge detector):

$(document).ready(function () {

    $('#unsupported-browser').dialog({

        autoOpen: false,

        width: 600,

        buttons: {

            "Ok": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    // Detect Internet Explorer/Edge

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        $(function () {

            $('#unsupported-browser').dialog('open');

            return false;

        });

    }

});

I believe the problem is somewhere in the dialog, as when I use alert(); inside the detector, the alert displays just fine. removing display:none; inside the div's style also has no effect.

asked Nov 19 at 22:06

Kixiron

I'm attempting to make a warning for when users visit my site while using either Internet Explorer or Edge, but the code I have simply displays nothing.

The IE/Edge Detector:

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        // Do stuff here

    }

My HTML:

<body>

    <!-- IE Alert -->

    <div id="unsupported-browser" title="Browser Not Supported" style="display:none;text-align:center;">

        <p>

            Uh Oh! Your browser is not supported!

            Downloading a newer browser is recommended for safety and security!

            Download one of the following browsers for an optimal experience!

            <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Mozilla Firefox</a>

            <a href="https://www.google.com/chrome/index.html" target="_blank">Google Chrome</a>

        </p>

    </div>

</body>

My JQuery (With IE/Edge detector):

$(document).ready(function () {

    $('#unsupported-browser').dialog({

        autoOpen: false,

        width: 600,

        buttons: {

            "Ok": function () {

                $(this).dialog("close");

            },

            "Cancel": function () {

                $(this).dialog("close");

            }

        }

    });

    // Detect Internet Explorer/Edge

    var isIE = /*@cc_on!@*/ false || !!document.documentMode,

    isEdge = !isIE && !!window.StyleMedia;

    if (isIE || isEdge) {

        $(function () {

            $('#unsupported-browser').dialog('open');

            return false;

        });

    }

});

I believe the problem is somewhere in the dialog, as when I use alert(); inside the detector, the alert displays just fine. removing display:none; inside the div's style also has no effect.

javascript jquery

asked Nov 19 at 22:06

Kixiron

asked Nov 19 at 22:06

Kixiron

asked Nov 19 at 22:06

Kixiron

asked Nov 19 at 22:06

Kixiron

asked Nov 19 at 22:06

Kixiron

Support for IE conditional comments got dropped in IE10. What version are you testing against? Also this will bloat your page. Might consider a redirect instead to an explanation page
– charlietfl
Nov 19 at 22:10

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
– Kixiron
Nov 19 at 22:14

add a comment |

Support for IE conditional comments got dropped in IE10. What version are you testing against? Also this will bloat your page. Might consider a redirect instead to an explanation page
– charlietfl
Nov 19 at 22:10

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
– Kixiron
Nov 19 at 22:14

Support for IE conditional comments got dropped in IE10. What version are you testing against? Also this will bloat your page. Might consider a redirect instead to an explanation page
– charlietfl
Nov 19 at 22:10

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
– Kixiron
Nov 19 at 22:14

add a comment |

1 Answer
1

active

oldest

votes

up vote
0
down vote

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> inside your html file

answered Nov 19 at 22:15

Kixiron

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53383310%2finternet-explorer-edge-detector-not-displaying-jquery-dialog%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
0
down vote

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> inside your html file

answered Nov 19 at 22:15

Kixiron

add a comment |

up vote
0
down vote

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> inside your html file

answered Nov 19 at 22:15

Kixiron

add a comment |

up vote
0
down vote

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> inside your html file

answered Nov 19 at 22:15

Kixiron

For anyone who runs into this problem, you also have to import the JQuery UI with <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> inside your html file

answered Nov 19 at 22:15

Kixiron

answered Nov 19 at 22:15

Kixiron

answered Nov 19 at 22:15

Kixiron

answered Nov 19 at 22:15

Kixiron

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Tukukkk