StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>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.</p> <p>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. </p> <p>I have a simple html file with all the content, It used twitter bootstrap as a responsive frame work. </p> <p><strong>HTML</strong></p> <p>Please see fiddle, It is too huge(content) to be pasted here :)</p> <p><strong>CSS</strong></p> <p>Except from Loading bootstrap.css and bootstrap-responsive.css, I need my custom CSS to suit the layout of my page.</p> <p>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:</p> <pre><code>@media (max-width:480px) { // Custom for device that has width 480px; } </code></pre> <p>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.</p> <p>Here is the custom CSS for the page:</p> <pre><code>.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%;} } </code></pre> <p><strong>JS</strong></p> <p>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:</p> <pre><code>$(function() { $("li").live("click" , function() { $(this).css("background","#c0c0c0").siblings().css("background","#C0C"); $(".des").hide().eq($(this).index()).show(); }) .eq(0).addClass('selected'); }); </code></pre> <p>Finally The whole building block of these pieces is here in a fiddle:</p> <p><a href="http://jsfiddle.net/refhat/aT5dE/24/" rel="nofollow"><strong>DEMO</strong></a></p> <p>The Full screen Result is <a href="http://jsfiddle.net/refhat/aT5dE/24/embedded/result/" rel="nofollow"><strong>Here</strong></a>, resize your browser and see how the content behaves and responsiveness is achieved.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload