I am facing an issue with a small mobile app built using jQuery Mobile. Within a div, I have three buttons and other content. My goal is to hide these three buttons if the user's device is running on Windows (WP). The buttons are defined as follows:
<div id="finalPage" data-role="page" data-add-back-btn="false">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<h1>Result</h1>
</div>
<div data-role="content">
<button id="fbPost">Facebook</button>
<button id="twitterPost">Twitter</button>
<button id="g+Post">Google+</button>
</div>
</div>
On the JavaScript side, I have the following code:
document.addEventListener("deviceready", WPshare, false);
function WPshare() {
if (navigator.userAgent.indexOf('Windows') > -1) {
console.log("The device is Windows Phone!");
$("#fbPost").hide();
$("#twitterPost").hide();
$("#g+Post").hide();
}
}
Although the console indicates that the device is a Windows Phone, the buttons do not get hidden when the "finalPage" is loaded. How can I successfully achieve this functionality?