Change Panel from data-display reveal to overlay , programmatically

Change Panel from data-display reveal to overlay , programmatically

Hello,
I would like to have a left panel in a small application I am creating but I was hoping it would be somewhat responsive. I would like it to be a data-display ='overlay' for mobile screens and data-display='reveal' for desktop browsers.

Is there anyway I can handle this using CSS or Javascript.

I did some test but could not find an answer..

sample (that did not work)
  1. <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>


        <script>

            function changePanel() {
                $("#test-panel").attr('data-display', 'overlay').trigger('refresh');
                $('#home').trigger("pageshow");
            }

        </script>

    </head>

    <body>

        <div data-role="page" id="home">

            <div data-role="panel" data-display="reveal" id="test-panel" data-swipe-close="false" data-dismissible="false">
                <h3>My Panel</h3>
                <p>
                    This is my panel content.
                </p>
                <p>
                    <a data-rel="close" data-role="button">Hide</a>
                </p>
            </div>


            <div data-role="header">
                <a href="#test-panel" data-icon="gear" data-iconpos="notext">Weather</a>
               
                <h1>Welcome to My World</h1>
            </div>

            <div data-role="content">

                <p>
                    This is some simple content just to fill up some space. Nothing really exciting to see here.
                </p>
                <p>
                    <button onclick="changePanel()">Click To Change data-display</button>
                </p>

            </div>

            <div data-role="footer">
                <h4>Copyright</h4>
            </div>

        </div>

        <div data-role="page" id="second">

            <div data-role="header">
                <a href="#home" data-icon="home" data-iconpos="notext">Home</a>
                <h1>Welcome to Foo</h1>
            </div>


            <div data-role="content">

                <p>
                    This is some other page.
                </p>

            </div>

            <div data-role="footer">
                <h4>Copyright</h4>
            </div>

        </div>

    </body>
    </html>


















































































Thanks

Drew