CODEWITHSUNDEEP
javascripthtml
f10w
f10w

Reputation: 1586

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

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!

Upvotes: 0

Views: 48

Answers (1)

DCR
DCR

Reputation: 15665

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>

Upvotes: 1

Related Questions