I want to hide a div when people will open in safari and in-place of that it will show another div

Question

I am using the browser detection code to hide a div and replace that div with another. Below is the code I am using.

The alert is showing correctly. But the div is not hiding. Both divs are showing regardless of whether I'm using Safari or Chrome.

var BrowserDetect = {
init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
        || this.searchVersion(navigator.appVersion)
        || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
    for (var i=0;i<data.length;i++)    {
        var dataString = data[i].string;
        var dataProp = data[i].prop;
        this.versionSearchString = data[i].versionSearch || data[i].identity;
        if (dataString) {
            if (dataString.indexOf(data[i].subString) != -1)
                return data[i].identity;
        }
        else if (dataProp)
            return data[i].identity;
    }
},
searchVersion: function (dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index == -1) return;
    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
    {
        string: navigator.userAgent,
        subString: "Chrome",
        identity: "Chrome"
    },
    {     string: navigator.userAgent,
        subString: "OmniWeb",
        versionSearch: "OmniWeb/",
        identity: "OmniWeb"
    },
    {
        string: navigator.vendor,
        subString: "Apple",
        identity: "Safari",
        versionSearch: "Version"
    },
    {
        prop: window.opera,
        identity: "Opera",
        versionSearch: "Version"
    },
    {
        string: navigator.vendor,
        subString: "iCab",
        identity: "iCab"
    },
    {
        string: navigator.vendor,
        subString: "KDE",
        identity: "Konqueror"
    },
    {
        string: navigator.userAgent,
        subString: "Firefox",
        identity: "Firefox"
    },
    {
        string: navigator.vendor,
        subString: "Camino",
        identity: "Camino"
    },
    {        // for newer Netscapes (6+)
        string: navigator.userAgent,
        subString: "Netscape",
        identity: "Netscape"
    },
    {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Explorer",
        versionSearch: "MSIE"
    },
    {
        string: navigator.userAgent,
        subString: "Gecko",
        identity: "Mozilla",
        versionSearch: "rv"
    },
    {         // for older Netscapes (4-)
        string: navigator.userAgent,
        subString: "Mozilla",
        identity: "Netscape",
        versionSearch: "Mozilla"
    }
],
dataOS : [
    {
        string: navigator.platform,
        subString: "Win",
        identity: "Windows"
    },
    {
        string: navigator.platform,
        subString: "Mac",
        identity: "Mac"
    },
    {
           string: navigator.userAgent,
           subString: "iPhone",
           identity: "iPhone/iPod"
    },
    {
        string: navigator.platform,
        subString: "Linux",
        identity: "Linux"
    }
 ]

};
BrowserDetect.init();
if (BrowserDetect.browser == 'Safari') {
    alert('you are using Safari');
    document.getElementById('default_galery').style.display = 'none';
} else {
    alert('you are using different browser');
    document.getElementById('safari_galery').style.display = 'none';
}

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<div class="safari_galery">1</div>
<div class="default_galery">2</div>

Please let me know where I am making the mistake.

Thanks.

hi, i need it because to hide a content from the safari browser. — user3731334, May 09 '15 at 20:55

score 0 · Answer 1 · answered May 09 '15 at 20:42

The reason why this isn't working is because document.getElementById() looks for an element with the specified ID. You elements are using class

var BrowserDetect = {
init: function () {
    this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
    this.version = this.searchVersion(navigator.userAgent)
        || this.searchVersion(navigator.appVersion)
        || "an unknown version";
    this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
    for (var i=0;i<data.length;i++)    {
        var dataString = data[i].string;
        var dataProp = data[i].prop;
        this.versionSearchString = data[i].versionSearch || data[i].identity;
        if (dataString) {
            if (dataString.indexOf(data[i].subString) != -1)
                return data[i].identity;
        }
        else if (dataProp)
            return data[i].identity;
    }
},
searchVersion: function (dataString) {
    var index = dataString.indexOf(this.versionSearchString);
    if (index == -1) return;
    return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
    {
        string: navigator.userAgent,
        subString: "Chrome",
        identity: "Chrome"
    },
    {     string: navigator.userAgent,
        subString: "OmniWeb",
        versionSearch: "OmniWeb/",
        identity: "OmniWeb"
    },
    {
        string: navigator.vendor,
        subString: "Apple",
        identity: "Safari",
        versionSearch: "Version"
    },
    {
        prop: window.opera,
        identity: "Opera",
        versionSearch: "Version"
    },
    {
        string: navigator.vendor,
        subString: "iCab",
        identity: "iCab"
    },
    {
        string: navigator.vendor,
        subString: "KDE",
        identity: "Konqueror"
    },
    {
        string: navigator.userAgent,
        subString: "Firefox",
        identity: "Firefox"
    },
    {
        string: navigator.vendor,
        subString: "Camino",
        identity: "Camino"
    },
    {        // for newer Netscapes (6+)
        string: navigator.userAgent,
        subString: "Netscape",
        identity: "Netscape"
    },
    {
        string: navigator.userAgent,
        subString: "MSIE",
        identity: "Explorer",
        versionSearch: "MSIE"
    },
    {
        string: navigator.userAgent,
        subString: "Gecko",
        identity: "Mozilla",
        versionSearch: "rv"
    },
    {         // for older Netscapes (4-)
        string: navigator.userAgent,
        subString: "Mozilla",
        identity: "Netscape",
        versionSearch: "Mozilla"
    }
],
dataOS : [
    {
        string: navigator.platform,
        subString: "Win",
        identity: "Windows"
    },
    {
        string: navigator.platform,
        subString: "Mac",
        identity: "Mac"
    },
    {
           string: navigator.userAgent,
           subString: "iPhone",
           identity: "iPhone/iPod"
    },
    {
        string: navigator.platform,
        subString: "Linux",
        identity: "Linux"
    }
 ]

};
BrowserDetect.init();
if (BrowserDetect.browser == 'Safari') {
    alert('you are using Safari');
    document.getElementById('default_galery').style.display = 'none';
} else {
    alert('you are using different browser');
    document.getElementById('safari_galery').style.display = 'none';
}

<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>

<div id="safari_galery">1</div>
<div id="default_galery">2</div>

Hi, Thanks for the reply. When i run the code here with the run code snippet its working. But when i put that code into the html and run its not working. Below is the link where i have uploaded the html [link]http://neo2technologies.com/test.html — user3731334, May 09 '15 at 20:53
It looks like you are getting some javascript errors. `Uncaught TypeError: Cannot read property 'style' of null jquery-migrate-1.2.1.js:521` `Uncaught ReferenceError: jQuery is not defined.` That would because your script tag is coming before your jquery scripts. — brenjt, May 09 '15 at 20:57
Script tags get loaded in the same order as you place them in the head. Your script is getting loaded before jquery has been loaded. Also you script is getting executed before the elements in the DOM are loaded. Check this answer for some clarity http://stackoverflow.com/a/6625812/589909 — brenjt, May 09 '15 at 21:00

I want to hide a div when people will open in safari and in-place of that it will show another div

1 Answers1

Linked