CODEWITHSUNDEEP
jquery-mobileresponsive-design
Sébastien BATEZAT
Sébastien BATEZAT

Reputation: 2559

Responsive design with two pages in one on JQuery Mobile

I'm trying to create a mobile application with JQuery Mobile that is responsive design.

In other words, I want, in smartphone, that "page1.html" and "page2.html" are loaded in separed pages like that :

 _________              __________
|Page1    |             |Page2    |
|.html    |  on click   |.html    |
|         | <---------  |         |
|         |             |go to    |
|go to    | on click    |page1 btn|
|page2 btn| ----------> |         |
|_________|             |_________|

And, in tablets, I want that page1.html and page2.html are loaded in the same page like that :

-----------------------------
|Page1.html   | Page2.html   |
|                            |
|                            |
|                            |
|                            |
|                            |
|----------------------------

How to do that with JQueryMobile ? I have try to $.mobile.loadpage(url) and $.mobile.changepage(url) but the problem is that the page is replaced and I need to have two pages in a single view for tablets.

Thanks per advance for your help.

Upvotes: 1

Views: 1710

Answers (1)

anwith.ct
anwith.ct

Reputation: 663

Its simple enough, like @Omar said, first of all use a single page template like this with 'data-role=page' denoting each page.

<body>
 <div data-role="page" data-theme="d" id="pageOne">
 <---header---->
 <--- content --->
 <---footer---->
 </div>
 <div data-role="page" data-theme="d" id="pageTwo">
 <---header---->
 <--- content --->
 <---footer---->
 </div>

Now, Jquery mobile will automatically show 'pageOne' on first load and hide 'pageTwo' and on navigating to 'pagetwo' will hide 'pageOne'.

After this you can write a css media query similar to this:

@media all and (min-width: 450px) {
   #pageOne{
    display:block;
    float: left;
    width:50%;
    postion:relative;
    }
   #pagetwo{
    display:inline-block;
    float:right;
    width:50%;
    padding-left: 2em;
    postion:relative;
    }
}

So if any with width greater than the mentioned width(450px) will have both the pages displayed side by side. Hope this helps. Here is a simple working sample I made.

http://jsfiddle.net/uwZpM/

Upvotes: 4

Related Questions