1

I have a small mobile app that is created using jQuery mobile. The point is that I have a div with 3 buttons, and some other stuff. If the device that the user is working is Windows (meaning WP), I want the three buttons on that div to be hidden. They are defined like this:

<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 JS side I have a code like this:

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();
    }
}

The point is that it doesn't seem to be working. When the user opens the page with the id "finalPage", I want those three buttons to be hidden (not visible, not clickable). Please also note that on WP devices the console.log line is executed. Only the buttons are not hidden. Any idea, how to achieve it?

1 Answers1

0

Try this:

Live demo

JQuery

    if($('#finalPage').length != 0){
        console.log('final is found');
        $("#fbPost").closest('div').hide();
        console.log($("#fbPost"));
    }
CMPS
  • 7,733
  • 4
  • 28
  • 53
  • Yep, it prints on console: final is found. –  Jun 14 '14 at 16:08
  • @ett `When the user opens the page with the id "finalPage", I want those three buttons to be hidden` You can hide them now – CMPS Jun 14 '14 at 16:08
  • @ett can you modify my jsfiddle so it shows your problem – CMPS Jun 14 '14 at 16:13
  • I'm using jQuery 1.9.1, and jQuery Mobile 1.3.1. Try jsfiddle now. http://jsfiddle.net/j3LdU/2/ –  Jun 14 '14 at 16:31