CODEWITHSUNDEEP
javascriptjqueryjquery-mobilepanel
Laire
Laire

Reputation: 1330

Problems with open panel

I try to open a panel with jQuery Mobile.

The panel should come from the left and push the page, but it seems like the panel overlay the whole side.

In the console i get the error:

Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'

My HTML:

    <div data-role="page">
        <div data-role="header">
            <header>
                <div id="header">
                    <a href="#menue_panel" id="menu-btn" class="ui-btn ui-btn-icon-notext ui-corner-all ui-icon-bars ui-nodisc-icon ui-alt-icon ui-btn-left">Menu</a>
                    <h1 id="headline">Text</h1>
                    <div class="clean"></div>
                </div>
            </header>
        </div>
    </div>
    <footer>
    </footer>
    <div data-role="panel" id="menue_panel" data-position="left" data-display="push">
        <ul class="ui-alt-icon ui-nodisc-icon">
            <li><a href="start.html" data-ajax="false">Startseite</a></li>
            <li><a href="medis.html" data-ajax="false">Medikamente</a></li>
        </ul>
    </div>

My JS

$( document ).ready(function() {
    $( "#menu-btn" ).on( "click", function() {
            $( "#menue_panel" ).panel( "open" );
    });    
});

I don't know why it doesnt work.

Upvotes: 0

Views: 198

Answers (1)

Fanie Reynders
Fanie Reynders

Reputation: 580

The panel should be inside the page DIV.

see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/

Upvotes: 2

Related Questions