How to Switch Between two Jquery Based Layouts (when using desktop and mobile)

Question

I want to create a responsive website. If the browser is mobile sized, the content should be displayed with an iPhone Style List View If the browser is desktop sized, the content should be displayed with tabs:

What is the best way of doing this? I don't want to use separate files for Mobile/Desktop. I want it to be responsive.

---

---

---

Here is some of the research I have done.

Attempt 1: Pure CSS solution.

A pure CSS solution would be the best, as CSS offers media queries which makes it easy to switch between layouts. CSS offers methods for creating tabs. But it doesn't seem to offer a method for an iPhone style list. (You can almost fake it with an accordion list but this doesn't take the user to a separate page like on a true iPhone app).

Attempt 2: Jquery Solution (see Fiddle)

• Jquery Mobile offers an easy way to create iPhone style list views
• Jquery UI offers an easy way to create tabs.
• Enquire.js offers a Javascript equivalent for media queries.

In this fiddle, I have tried to combine Jquery Mobile and Jquery Ui. Enquire.Js is used to call the necessary library depending on screen.

When a library is called, it will alter the dom structure. So the unneeded library has to be removed, otherwise if the user re-sizes the browser (i.e. switches between mobile desktop), the unused library will break cause conflicts for the called library.

In my fiddle, I have tried to do this, but it doesn't seem to work:

$(document).ready(function() {

        enquire.register("screen and (max-width: 600px)", function() {
    $('script[src~="jquery-ui.js"]').remove();
    $('link[rel=stylesheet][href~="jquery-ui.css"]').remove();    
     $('head').append('<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" />');    
     $('head').append('<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"><\/script>');   
        $("#tabs").tabs("destroy");            
    }).listen();


       enquire.register("screen and (min-width: 601px)", function() {
    $('script[src~="jquery.mobile-1.0a3.min.js"]').remove();
    $('link[rel=stylesheet][href~="jquery.mobile-1.0a3.min.css"]').remove();    
    $('head').append('<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />');        
     $('head').append('<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"><\/script>');    
    $("#tabs").tabs();

    }).listen();

});

Even though the unused library is removed, it causes conflicts for the new library. Also, you have to re-size the browser before any of the layouts are called. If the user doesn't re-size the browser, the content will be unstyled.

Attempt 3: Dom Cloning (see Fiddle)

This attempt is similar to attempt 2, except on page load it stores the DOM in a variable. Then when the user re-sizes the browser, the existing DOM is replaced with the stored DOM. I have followed the method outline here, but it doesn't seem to work. The dom is just removed instead of being replaced.

I would appreciate any helpful with this, as I have been tearing my hair out to find a solution! (I know I have asked a question similar to this, but I felt this new question was different enough to warrant a new post.)

Attempt 4: Dynamically Assigning Data Attributes

Jquery mobile uses data attributes in the mark up to make the scripts work. I have tried applying these dynamically, so they are only written to the document when the browser is at mobile size. However, when the browser is re-sized, the desktop tabs are still broken.

Answer 1

I dont think there is a need for reinventing the wheel here. Responsive Design has been around for quite a while and is already taken the web development by storm. That said, I would suggest you can use any of the no. of Responsive frame works works out there you like. My personal favorite and I would suggest to use is the Twitter Bootstrap frame work. It is incredibly smart light weight and easy to use, when you get the hang around the things as to how they work. You don't need to worry just about iPhone and Desktop. Twitter Bootstrap caters to the other devices as well like tables et-al.

Now coming directly to your question as you wanted to show the same tabbed content both on Mobile as well as Desktop, without having two separate html files. Following is what I have put up for you as a sample demo.

I have a simple html file with all the content, It used twitter bootstrap as a responsive frame work.

HTML

Please see fiddle, It is too huge(content) to be pasted here :)

CSS

Except from Loading bootstrap.css and bootstrap-responsive.css, I need my custom CSS to suit the layout of my page.

The most important part of CSS that actually does the rick here is the media query. I specify the device width and ask the CSS to display in this manner, when this device width has reached. Media Query Syntax is like:

@media  (max-width:480px) {
   // Custom for device that has width 480px;

}

Now iPhone has a width of 480px for layout and when the device on which my page is being viewed, I want to style my elements to suit the 480px screen.

Here is the custom CSS for the page:

.container {
    margin-top: 10px;
}
.ora, .ban, .man{display:none;}
.fruit-content{width:100%;}
li{display:inline-block;width:24%;text-align:center;border-bottom:1px solid #fff;background: #C0C;}
ul.upperul{margin:0 0 0 0px;width:103%;}
.custom-row{border:1px solid green;}
.selected{background: #c0c0c0;}
@media  (max-width:480px) {
    li{display: block;width: 100%;text-align: left;}
    .custom-row{border:1px solid #000000;}
    ul.upperul{margin-left: 0px;width:100%;}

}

JS

Now comes the functionality part about switching the tabbed content. I used jQuery with just a few lines of code to set the content in a tabbed Manner:

$(function() {
    $("li").live("click" , function() {
     $(this).css("background","#c0c0c0").siblings().css("background","#C0C");
     $(".des").hide().eq($(this).index()).show();
    })
    .eq(0).addClass('selected');
});

Finally The whole building block of these pieces is here in a fiddle:

DEMO

The Full screen Result is Here, resize your browser and see how the content behaves and responsiveness is achieved.