1

I want to simply create a sidebar like the one on the jQuery Mobile Demo Docs here.

I have read this question and didn't quite understand on how to implement it.

The point is, I'm making a website using jQuery Mobile for big screens, like Desktops, Net Books, Tablets and more. For the mobile site, I will just use the site without the sidebar.

I have also tried SplitView (code here) but its a bit buggy, I think because jQuery Mobile hates sidebars...

So:

  1. Either I want a solution to implement a simple sidebar like the one on jQuery Mobile's Docs.
  2. Or I want a prepared library like SplitView for making a sidebar.
  3. Or I want an alternative to jQuery Mobile (which supports most features of jQuery Mobile) which supports a sidebar.

Thanks... :D

Community
  • 1
  • 1
Arjun Bajaj
  • 1,822
  • 7
  • 23
  • 40

4 Answers4

2

I have created a sample jQuery Mobile application which works like this - When screen size is large,a split view layout will be shown.Otherwise,navigation can be done via a button in the header.For illustrating this in a desktop browser,I have given the width to check as 500px.If width>500 px ,split view. If width <500px, button in header

Here is the source code:

<!DOCTYPE html>
<html>
    <head>
        <title>Page</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
        <link rel="stylesheet" href="http://jquerymobile.com/test/docs/_assets/css/jqm-docs.css"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
        <script>
            function showNavList() {
                $(".navdiv").toggle();
            }

            $(".page").live("pagebeforeshow", function() {
                $(".navdiv").hide();
            });
        </script>
        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
        <style>

        .content-secondary{
            margin: 0px !important;
            padding:0px !important;
        }

        /*refer http://css-tricks.com/snippets/css/media-queries-for-standard-devices/ */
        /* Smartphones (landscape) ----------- */
        @media all and (min-width: 501px){/*For demo in desktop browsers,gave 501.Should be 321px.Refer above link*/
            .headerNav{
                display:none !important;
            }
            .content-secondary{
                display: block;
            }
            .navdiv{
                display:none !important;
            }
        }

        /* Smartphones (portrait) ----------- */
        @media all and (max-width: 500px){/*320px*/
            .headerNav{
                display:block !important;
            }
            .content-secondary{
                display: none;
            }
        }
        </style>
    </head>
    <body>
        <div data-role="page" class="page" id="page1">
            <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
                <ul data-role="listview">
                    <ul data-role="listview"  data-theme="c">
                        <li  class="ui-btn-active" data-icon="false">
                            <a href="#page1">Page 1</a>
                        </li>
                        <li data-icon="false">
                            <a href="#page2">Page 2</a>
                        </li>
                        <li data-icon="false">
                            <a href="#page3">Page 3</a>
                        </li>
                    </ul>
                </ul>
            </div>
            <div data-role="header">
                <h1>Page 1</h1>
                <a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
            </div><!-- /header -->
            <div data-role="content">
                <div class="content-primary">
                    Content1
                </div>
                <div class="content-secondary">
                    <ul data-role="listview"  data-theme="c">
                        <li  class="ui-btn-active" data-icon="false">
                            <a href="#page1">Page 1</a>
                        </li>
                        <li>
                            <a href="#page2" data-icon="false">Page 2</a>
                        </li>
                        <li>
                            <a href="#page3" data-icon="false">Page 3</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
        <div data-role="page" class="page" id="page2">
            <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
                <ul data-role="listview">
                    <ul data-role="listview"  data-theme="c">
                        <li data-icon="false">
                            <a href="#page1">Page 1</a>
                        </li>
                        <li data-icon="false" class="ui-btn-active">
                            <a href="#page2">Page 2</a>
                        </li>
                        <li data-icon="false">
                            <a href="#page3">Page 3</a>
                        </li>
                    </ul>
                </ul>
            </div>
            <div data-role="header">
                <h1>Page 2</h1>
                <a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
            </div><!-- /header -->
            <div data-role="content">
                <div class="content-primary">
                    Content2
                </div>
                <div class="content-secondary">
                    <ul data-role="listview"  data-theme="c">
                        <li data-icon="false">
                            <a href="#page1">Page 1</a>
                        </li>
                        <li  class="ui-btn-active" data-icon="false" >
                            <a href="#page2">Page 2</a>
                        </li>
                        <li data-icon="false">
                            <a href="#page3">Page 3</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
        <div data-role="page" class="page" id="page3">
            <div class="navdiv" style="width:150px;top:38px;left:5px;position:absolute;z-index:1000;display:none">
                <ul data-role="listview">
                    <ul data-role="listview"  data-theme="c">
                        <li data-icon="false">
                            <a href="#page1">Page 1</a>
                        </li>
                        <li data-icon="false">
                            <a href="#page2">Page 2</a>
                        </li>
                        <li data-icon="false" class="ui-btn-active">
                            <a href="#page3">Page 3</a>
                        </li>
                    </ul>
                </ul>
            </div>
            <div data-role="header">
                <h1>Page 3</h1>
                <a href="#" class="headerNav" onclick="showNavList()">Navigation</a>
            </div><!-- /header -->
            <div data-role="content">
                <div class="content-primary">
                    Content3
                </div>
                <div class="content-secondary">
                    <ul data-role="listview"  data-theme="c">
                        <li>
                            <a href="#page1">Page 1</a>
                        </li>
                        <li>
                            <a href="#page2">Page 2</a>
                        </li>
                        <li  class="ui-btn-active">
                            <a href="#page3">Page 3</a>
                        </li>
                    </ul>
                </div>
            </div><!-- /content -->
        </div><!-- /page -->
    </body>
</html>

Live demo here - http://pastehtml.com/view/bo99qejac.html

Related question - JQuery mobile - content navigation collapse on a button on portrait

Community
  • 1
  • 1
user700284
  • 12,900
  • 7
  • 38
  • 72
1

The 'sidebar' on the jQM side is for Tablet/Desktop display, A mobile device will stack them I think.

If you view the source you can see jQM has separate content containers for this:

<div data-role="page" class="type-home">
    <div data-role="content">

        <div class="content-secondary">
            // sidebar here
        </div>

        <div class="content-primary">
            // content here
        </div>

    </div>
</div>

UPDATE:

Looks like jQM added another CSS file to control this:

Phill Pafford
  • 77,927
  • 86
  • 256
  • 378
  • i tried it out, but it just doesn't make a difference... i tried to apply float:left to the sidebar and float:right to the content area, but the widths of both the areas are automatically set to their content size. Can u help further... thanks... :D – Arjun Bajaj Feb 14 '12 at 19:00
  • what version of jQM are you using? jQuery version, and device are you testing on? – Phill Pafford Feb 14 '12 at 19:13
  • jQuery: 1.6.4, jQuery Mobile: 1.0.1, Browsers: Chrome 16, Firefox, Safari. All give same results... :P – Arjun Bajaj Feb 14 '12 at 19:23
  • And I think there is no coding done for the classes you have applied on the divs in jQm – Arjun Bajaj Feb 14 '12 at 19:25
  • adding the content wrapper to my post, does this help – Phill Pafford Feb 14 '12 at 19:33
  • hey thanks for the update, although the wrapper didn't do anything, the CSS file u linked to, I tried to attach it to the page and it did some modifications. Later I'll go through the code to see what's doing the job, and then i'll isolate and try it out, and get back to u... thanks a lot... :D – Arjun Bajaj Feb 14 '12 at 19:58
  • but because of your wrapper, it will get easier for me to understand the code... thanks,,, :D – Arjun Bajaj Feb 14 '12 at 19:58
0

Create a sidebar with jQuery mobile s very simple ! Just have a look at this exemple : http://lab.cubiq.org/iscroll/examples/ipad/

This is working with jQuery mobile, download it's named iScroll and you can download it here : http://cubiq.org/iscroll-4

Random78952
  • 1,380
  • 4
  • 25
  • 35
0

Most of the plugins you find to do this, will not work work with Jquery mobile.

iScroll 4 DOES NOT WORK WITH JQUERY MOBILE.

There is a very buggy fork that attempts to make it work with JQM, but the splitview example, posted in this thread, doesn't work with it and isn't included.

Jon
  • 76
  • 3