HTML/Javascript: Displaying different HTML block depending on the browser

Question

I have a HTML file which I would like to have the following behavior:

If the browser is Firefox use this block:

<li class="nav-item">
<a class="nav-link" href="{{site.baseurl}}/donate.html"><button class="button-18" role="button">Faire un don</button></a>
</li>

Else use this block:

<li class="nav-item">
<div id="donate-button-container">
    <div id="donate-button"></div>
    <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
    <script>
    PayPal.Donation.Button({
    ...
    }).render('#donate-button');
    </script>
    </div>    
</li>

I hope somebody could help to achieve this in the best way possible. Thank you so much!

Possible duplicate of this: https://stackoverflow.com/a/9851769/13561410 — Oskar Grosser, Dec 19 '22 at 00:38
Interesting read: [Browser Detection is Bad](https://css-tricks.com/browser-detection-is-bad/) — Oskar Grosser, Dec 19 '22 at 00:45

score 1 · Accepted Answer · answered Dec 18 '22 at 23:01

var browser = (function() {
    var test = function(regexp) {return regexp.test(window.navigator.userAgent)}
    
    switch (true) {
        case test(/edg/i): return "Microsoft Edge";
        case test(/trident/i): return "Microsoft Internet Explorer";
        case test(/firefox|fxios/i): return "Mozilla Firefox";
        case test(/opr\//i): return "Opera";
        case test(/ucbrowser/i): return "UC Browser";
        case test(/samsungbrowser/i): return "Samsung Browser";
        case test(/chrome|chromium|crios/i): return "Google Chrome";
        case test(/safari/i): return "Apple Safari";
        default: return "Other";
    }
})();

let lis = document.getElementsByClassName('noshow')
if(browser == "Mozilla Firefox")  lis[0].className = "show"
else lis[1].className = "show"

.noshow{
   display:none;
}
.show{
display:block;}

<ul>
<li class="nav-item noshow">firefox
<a class="nav-link" href="{{site.baseurl}}/donate.html"><button class="button-18" role="button">Faire un don</button></a>
</li>


<li class="nav-item noshow">chrome
<div id="donate-button-container">
    <div id="donate-button"></div>
    <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
    <script>
    /*
    THIS IS NOT WORKING
    PayPal.Donation.Button({...
    }).render('#donate-button'); */
    </script>
    </div>    
</li>
</ul>

Could you elaborate on your comment in PayPal Donation block: `/* THIS IS NOT WORKING...`? — f10w, Dec 18 '22 at 23:51
[Microsoft recommends](https://learn.microsoft.com/en-us/microsoft-edge/web-platform/user-agent-guidance#feature-detection) to [use feature detection](https://stackoverflow.com/a/9851769/13561410) over using the user agent string. — Oskar Grosser, Dec 19 '22 at 00:43
@f10w it's not really germain to your question but in the snippet it doesn't work and gives an error message missing }. So I just commented it out. — DCR, Dec 19 '22 at 01:01
@Oskar Grosser, that code doesn't work. Please don't comment on something unless you have tried it and know it works. — DCR, Dec 19 '22 at 01:04

HTML/Javascript: Displaying different HTML block depending on the browser

1 Answers1