CODEWITHSUNDEEP
javascriptjqueryhtmljquery-mobile
Eugene Scray
Eugene Scray

Reputation: 363

How to hide jQmobile page on default

How do you hide a page included by jquery mobile. I would like to have a mobile version of the site and a desktop version but the mobile version automatically loads up. How do I change this?

code here: 

<!DOCTYPE html>
<html>
    <head>
        <!-- For Mobile Devices -->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>

        <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
        <link href="../global/global.css" rel="stylesheet" />
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div >
        <!-- The View Page (Summary) -->
        <div data-role="page" id="summary">
            <div data-role="header">
            </div>
            <div data-role="main" class="ui-content">
                <div class="jumbotron container">
                    <center>
                        <img src="removeLogo.jpg" />
                    </center>
                    <h2 class="txt-center"><u>Controls</u></h2>
                    <a class="btn btn-default">View</a>
                </div>
            </div>
            <div data-role="footer">
            </div>
        </div>

        <div data-role="page" id="summary">
            <div data-role="header">
            </div>
            <div data-role="main" class="ui-content">
                <div class="jumbotron container">
                    <center>
                        <img src="removeLogo.jpg" />
                    </center>
                    <h2 class="txt-center"><u>Controls</u></h2>
                    <a class="btn btn-default">View</a>
                </div>
            </div>
            <div data-role="footer">
            </div>
        </div>
    </bod

y>

Upvotes: 0

Views: 108

Answers (2)

James Allardice
James Allardice

Reputation: 166041

The DOM is not ready at the time your script runs. Put it in a DOM ready event handler:

$(function () {
    // Interact with the DOM in here
});

// Or, the slightly longer version
$(document).ready(function () {
    // Interact with the DOM in here
});

Alternatively, move your JavaScript to the end of the body (just before the closing </body> tag is the common place, but anywhere after the elements you need to refer to will work). By doing that, by the time your script is parsed, the browser has already parsed the preceding markup and has an almost-complete DOM tree ready for you to access.

Upvotes: 6

Simon
Simon

Reputation: 242

Ok . I think the reason is, you are trying to reach #left-placeholder but it wasn't loaded yet.

    <!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <LINK href="../styles.css" rel="stylesheet" type="text/css">
    </head>
    <body>
            <div id="leftcol">
                <a href="practice.html"><div class ="left-column-item">Practice!</div></a>
                <a href="aboutUs.html"><div class ="left-column-item">About Us!</div></a>
                <a href="contactUs.html"><div class ="left-column-item">Contact Us!</div></a>
            </div>
        <div id="left-placeholder">abc</div>
        <div id ="left-pusher"></div>
        <div id ="content">Math Practice Site <br> hello</div>
    </body>
    <script type ="text/javascript">
        alert($('#left-placeholder').html());
    </script>
</html>

Put your script underneath it and it should be fine. Or start your script after page was loaded like this:

$(document).ready(function(){
     alert($('#left-placeholder').html());
});

Sources: http://api.jquery.com/ready/

Upvotes: 0

Related Questions