CODEWITHSUNDEEP
jquery-mobile
Amine
Amine

Reputation: 79

jQuery mobile panels

I am trying to add a panel to use as a side menu, but it looks like I am doing something wrong. I've tried troubleshooting it but can't see where the issue is.

The panel is not hidden by default (not sure if that's how it should behave) and I can't get it slide out/in.

Here's what I have. I appreciate your help.

<!-- @ Page = menu -->
<div data-role="page" id="menu">

    <div data-role="panel" id="myPanel" class="main_nav" data-display="push"  data-dismissible="true" data-theme="a">

        <div class="nav_profile">
            <div class="nav_thumb"><img src="images/nav_thumb.png" width="64" /></div>
            <div class="nav_name">
                <h3>user</h3>
                <p>2 active threads</p>
            </div><!--/nav_name-->
        </div><!--/nav_profile-->


    </div><!-- /panel -->

    <div data-role="header" class="header" data-position="fixed" role="banner" >

        <h3>Threads (2)</h3>
        <a href="#" class="right menu_button">New</a>
    </div>

    <div data-role="content">
        <a href="#myPanel" data-rel="panel" data-role="button" class="menu_icon left" ></a>
        <div class="head_search">
            <input type="text" class="search rounded" placeholder="Search" />
        </div>


    </div>

</div><!--/menu-->

Upvotes: 3

Views: 15303

Answers (2)

Charles Ingalls
Charles Ingalls

Reputation: 4561

I had the same problem but in my case the CSS file (download from the jQuery mobile site) seemed to be corrupted. After downloading the theme-free CSS file it worked as expected. The issue seems to be fixed now though!

Upvotes: 1

Twisty
Twisty

Reputation: 30899

It's here: http://jquerymobile.com/demos/1.3.0-beta.1/docs/panels/index.html

A panel's visibility is toggled by a link somewhere on the page or by calling the panel's open method directly. The defaults place the panel on the left and it will be revealed. Open a panel programmatically like this:

$( "#idofpanel" ).panel( "open" , optionsHash );

To control a panel from a link, point the href to references the ID of the panel you want to toggle (mypanel in the example above). This instructs the framework to bind the link to the panel. This link will toggle the visibility of the panel so tapping it will open the panel, and tapping it again will close it.

<a href="#mypanel">Open panel</a>

I put your code in a jsFiddle and found no problems, the panel opens properly: http://jsfiddle.net/Twisty/Ej7A7/1/

Make sure you're using the latest JQuery and JQM Frameworks.

Upvotes: 2

Related Questions