CODEWITHSUNDEEP
javascriptjqueryhtmlcsscordova
aroth
aroth

Reputation: 54806

Phonegap - Can hide div, but not show

I've got a very simple PhoneGap project, with some messaging elements that get toggled on and off as required. I'm using jQuery with this project, although the problem that I'm seeing occurs regardless of whether or not I use jQuery to show/hide the divs.

Anyways, the relevant markup goes like:

        <div class="event listening blink" id="waiting" >
            Waiting for Game
        </div>
        <div class="event listening blink" id="error" >
            Something bad happened...
        </div>
        <div id="running">
            <h1>Shake Me!</h1>
            <div id="deviceready">
                <p class="event listening" id="accelerometer">Waiting for accelerometer...</p>
            </div>
        </div>
        <div id="complete">
            <h1 id="finalStatus">Game Over</h1>
            <div id="myRanking">
                <p class="event listening">You came in 100th place.</p>
            </div>
        </div>

...when the page loads, I hide all of these divs like:

$("#waiting").hide();
$("#running").hide();
$("#error").hide();
$("#complete").hide();

As various events happen in the app, I show the appropriate div, like:

$("#waiting").show();

Seems trivially simple, except the divs aren't reappearing. Once a div has been hidden, it stays hidden for good. There are no JavaScript errors being thrown, and the same thing happens even if I show/hide them the old-fashioned way using document.getElementById("waiting").style.display = 'block';. I've got console.log() statements that confirm that show() is definitely being called.

So I'm at a loss as to how/why this is happening. Has anyone encountered a similar problem in the past? What was the solution?

Upvotes: 0

Views: 3185

Answers (1)

aroth
aroth

Reputation: 54806

I found the issue (sort of). Apparently jQuery was conflicting with some other script that was being used on the page. I'm not sure which one, or what the conflict was, or how the conflict could have been so severe as to cause element.style.display = 'block'; to stop working, but changing the order of the <script> tags in the HTML fixed the problem.

Upvotes: 1

Related Questions