CSS Tricks

Adaptable view how do they do it?

July 7, 2009 3 minutes read

Adaptable view is a user interface design pattern which you can use toallow
users to manually change visual appearance of content in
order to fit their needs. This is usually done by switching styles (in web sites
and applications). This way you provide your users with more control over the
appearance of content which improves user experience.
Adaptable view can be used to enable users to increase/decrease font size,
change background color, darken background for higher contrast, switch
between different site versions or to change the layout of the site or any part of
it. To learn more about this pattern check outAdaptable View design
pattern on UI Patterns. You will find a strange implementation of this pattern
where complete header is being hidden including the logo.
In this tutorial, I will focus on explaining how to manually change the layout
and show you two great examples and how did they do it.
Example on Smashing Magazine
While browsing one of the categories on Smashing Magazine site users
can choose between two views: single-column and two-column view. The
image below shows how single-column view looks like. Its a simple unordered
list where each list item is shown in a single row. Each list item contains
a thumbnail image, title and other details.

In order to achieve this we need to make styles for unordered list. First, we will
define styles for single view.
#list { width:500px; margin:0px; padding:0px;}
#list li { list-style:none; display:block; width:480px; background-color:#D7D3E0;
padding:5px; margin:5px;}

Image below shows how that would look like (500px in our case is 100%)

When users switch to two-column view, we need to change only a few things.
Each list item floats to the left and gets to 50% of the width. To create this, we
will define another CSS class:
#list.compact li { float:left; width:230px;}

And the list should look like the one shown in the image below.

Now we need to add some simple functionality. We will create two jQuery
functions that will add/remove compact class and make switching possible.
$("#fullswitch").click(function() {
$("#list").removeClass("compact");
});
$("#compactswitch").click(function() {
$("#list").addClass("compact");
});

View demo
Example on Delicious
Delicious has another interesting implementation of Adaptable View. Users
are able to choose how many details they want in lists. If you take a look
at my bookmarks you will notice three icons in the top left corner of the list.
Each one of those icons shows a different view: single, compact or full. The
structure is similar to the previous example:

<ul id="list">
<li>
<strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong>
<span class="url"><a href="#">http://www.jankoatwarpspeed.com/wpcontent/uploads/examples/adaptableview/example2.html</a></span>
<span class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam
dignissim dolor sit amet lectus venenatis egestas.</span>
</li>
<li>
...
</li>
</ul>

Each list item consists of text and two spans one containing sample URL
and one containing sample description. In single mode view only text is
visible. In compact view, text and URL are visible and in full view all spans are
visible. The image below shows how this should look like.

Adding functionality is as simple as in the previous example. We will have

three switch links, and each one of them will show/hide necessary spans.
$("#singleswitch").click(function() {
$("#list li .url").hide();
$("#list li .desc").hide();
});
$("#compactswitch").click(function() {
$("#list li .url").show();
$("#list li .desc").hide();
});
$("#fullswitch").click(function() {
$("#list li .url").show();
$("#list li .desc").show();
});

View demo
Adaptable view can be very useful if used properly. I especially like clever
solutions when users are able to change layout like in the examples shown in
this tutorial. Do you know some other interesting
implementations?

Easy Display Switch with CSS and

jQuery
TUTORIALSBy

Jake Rocheleau / December 12, 2013

next

Use Keys To Navigate

A+ A-

This tutorial was originally put together by Soh Tanaka during the Spring of 2009. Unfortunately the original demo
went offline along with his source codes. I checked out an older archive copy on the WayBack Machine and
decided to re-built this tutorial from scratch.
I am going to demonstrate how we can make a simple list-style interface that switches over to thumbnails using
jQuery. The user may find this helpful when browsing website articles, e-commerce products, and other similar
galleries. The design itself is quite simple to create and there isnt much required jQuery at all. Check out my live
sample demo below.

Live DemoDownload Source Code

Getting Started
All the functionality we need can be written in plain jQuery without any external plugins. Download a copy of
the jQuery libraryand include this into the document header. Ive also created my own stylesheet for organizing
the lists and the page layout.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html">
<title>Switch Display Options - DesignMag Demo</title>
<meta name="author" content="Jake Rocheleau">
<link rel="shortcut icon" href="http://designm.ag/favicon.ico">
<link rel="icon" href="http://designm.ag/favicon.ico">
<link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>

The internal body structure contains an outer wrapper div with the ID #w to center everything. But the page itself
doesnt really begin until we get to the #content div. This specifically holds the main page content including our
list view. All the content is built into an unordered list using the ID #listdisplay. The internal list items have a
clearfix to keep the position of floated elements.
<div id="w">
<span class="options">Switch Options:
<a href="#" id="details-list" class="sorticon active" title="List View"><img src="images/details-list.png"
alt="list"></a>
<a href="#" id="thumbnails-list" class="sorticon" title="Thumbnail View"><img src="images/thumbnails-list.png"
alt="thumbnails"></a>
</span>
<!-- icons: http://findicons.com/pack/1689/splashy/ -->
<div id="content">
<ul id="listdisplay" class="clearfix">
<li class="clearfix">
<span class="listimg"><a href="http://dribbble.com/shots/1314496-80-s-Wrestlers-Hulk-Hogan"
target="_blank"><img src="images/01-hulk-hogan.jpg"></a></span>
<span class="innercontent">
<h2>Hulk Hogan</h2>
<p>In non gravida nulla, quis vehicula velit. Praesent ac felis vel tortor auctor tincidunt. In non luctus neque. In
congue molestie pretium. Sed vitae cursus risus. Pellentesque feugiat tortor massa, ut aliquet justo fermentum vitae.</p>
</span>
</li><!-- row #1 -->

Ive only copied over the beginning section of the page along with a single list item structure. There are 8 total
items and they all include a single thumbnail, a title, and some brief content. The other unordered list includes two
anchor links for sorting the content.

The first ID is #details-list which also has an active class attached to the anchor. This means we already have the
details view open so the image will appear brighter using more opacity. #thumbnails-list is the alternative which
users can switch over and change the view. These images are found in the Splashy pack along with many other
fantastic icons.

Page Design with CSS

All the typical page resets can be found in my stylesheet along with an external webfont hosted through Google.
The HTML page background uses a repeating image Cartographer from Subtle Patterns.
.options {
display: block;
text-align: right;
font-size: 1.2em;
line-height: 16px;
font-weight: bold;
color: #eee;
margin-bottom: 8px;
}
.options .sorticon {
position: relative;
top: 3px;
}
.options .sorticon img {
opacity: 0.6;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.options .sorticon img:hover {
opacity: 1.0;
}
.options .sorticon.active img {
opacity: 1.0;
}

Each of the image icons uses a CSS3 transition effect. When you hover or click onto a new icon, the opacity wont
change instantly. Instead it smoothly changes over in all CSS3-compliant browsers(which also support
the opacity property). Each icon is positioned relative to the container so they can be aligned more evenly.
/* list styles */
#listdisplay {
display: block;
}
#listdisplay li {
display: block;
width: 100%;

padding: 12px 8px;

margin-bottom: 1px;
border-bottom: 1px solid #aaa;
}
#listdisplay li a img {
display: block;
float: left;
padding: 5px;
border: 2px solid #bbb;
background: #fff;
margin-right: 20px;
}
#listdisplay li .innercontent h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 3.0em;
line-height: 1.35em;
margin-bottom: 4px;
color: #73ed95;
font-weight: bold;
}
#listdisplay.thumbview li {
display: block;
width: 360px;
float: left;
margin-right: 10px;
margin-bottom: 7px;
border: 0;
}
#listdisplay.thumbview li a img {
display: block;
float: none;
margin: 0 auto;
margin-bottom: 4px;
}
#listdisplay.thumbview li .innercontent {
display: block;
text-align: center;
}
#listdisplay.thumbview li .innercontent h2 {
font-size: 2.2em;
}
#listdisplay.thumbview li .innercontent p {
display: none;
}

Getting into the list properties you will notice there isnt much to be confused about. #listdisplay is always being
used to contain the list, regardless of the view style. Without any extra classes we see the typical detail view.
Using jQuery I can setup a new class .thumbview which will then reformat the items to show the thumbnail +
image centered, no descriptive text.

You should feel free to mess around with the formatting and design grid to suit your own layout. Once we append
the thumbnail view each list item becomes fixed at a width of 360px. Coupled with the margins & padding it leaves
room for 2 items per line. Depending on your thumbnail size this value might change or adapt better for your
audience.

Transitioning jQuery Effects

Finally at the bottom of the document before any closing </body> tag we need to setup a block of JavaScript.
Keep in mind this could be written into an external file and then included into the page header. Its all about
preference and how you need to setup your website.
$(function(){
$('.options a').on('click', function(e){
e.preventDefault();
if($(this).hasClass('active')) {
// do nothing if the clicked link is already active
return;
}
$('.options a').removeClass('active');
$(this).addClass('active');
var clickid = $(this).attr('id');

$('#listdisplay').fadeOut(240, function(){
if(clickid == 'thumbnails-list') {
$(this).addClass('thumbview');
} else {
$(this).removeClass('thumbview');
}
$('#listdisplay').fadeIn(200);
});
});
});

This script requires a single event handler checking against each of the anchor links within the options list. First
we calle.preventDefault() to stop the default click action, followed by a class check. If the icon link currently has a
class of .active then we dont want to do anything. Otherwise the script needs to switch between display views
first by removing the .active class from both links and then adding it onto the newly-clicked link.
Next Im grabbing the current link ID so we know which content view should be displayed. I am hiding the entire
list usingfadeOut() and we run some logic within a callback method. If the ID is #thumbnails-list then we need to
append that CSS class onto the UL element. Otherwise we need to remove that class.

Finally once the logic has completed we can re-display the list view onto the page using fadeIn(). There are
probably ways to do this using other jQuery animated effects. But when just getting started this method simply
works its easy to follow, and its easy to customize.