Bashabi Bashabi - 5 months ago 15
Javascript Question

Displaying different content in different browser by javascript if else statement

In my code I am detecting the browser used and trying to display different

<div>
content depending on it.

But my JavaScript code is not working properly. My web application is built on asp.net and vb.net.

Here is my code:

<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" runat="Server">
<div class="btn-wrapper" id="regular-content">
<asp:Button runat="server" ID="uxLoginButton" Text="Login" />
<asp:Button runat="server" ID="uxRegister" Text="Register" />
</div>
<div id="safari-content">
<p>Use another Browser </p>
</div>
</asp:Content>


So, if the user is using any browser other than Safari then i want to display the content where
<div>
's id is
regular-content
, and if the user is using Safari then I want to display the content where
<div>
's id is
safari-browser
.

In my JavaScript code I have detected if the user is using safari.

<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="ScriptContent">
<script type="text/javascript">
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
//document.body.innerHTML = isSafari;
</script>
</asp:Content>


This detects the browser properly. If the browser is Safari then the value of
isSafari
is
true
and if not the value is
false
.

if (isSafari == "true") {
document.getElementById("safari-content").style.display = 'block';
document.getElementById("regular-content").style.display = 'none';
} else {
document.getElementById("safari-content").style.display = 'none';
document.getElementById("regular-content").style.display = 'block';
}


But this does not work properly. In all cases it shows the regular browser content, i.e. if the user is using Safari he should not see the regular browser content, but he sees the regular browser content, not the Safari content.

How can I fix this?

mab mab
Answer
if (isSafari) {

instead of

if (isSafari == "true") {
Comments