layout switcher

by Talsja

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css">
<header class="switcher-bar clearfix">
       <div class="mobile-btn header-btn pull-right hidden-xs visible" style="opacity: 1; visibility: visible;">	<a class="icon-mobile-phone" title="Smartphone View" href="#"></a>

    </div>
    <!-- Tablet Button -->
    <div class="tablet-btn header-btn pull-right hidden-xs visible" style="opacity: 1; visibility: visible;">	<a class="icon-tablet" title="Tablet View" href="#"></a>

    </div>
    <!-- Desktop Button -->
    <div class="desktop-btn header-btn pull-right hidden-xs visible" style="opacity: 1; visibility: visible;">	<a class="icon-desktop" title="Desktop View" href="#"></a>

    </div>
</header>
<div class="layout-container">hier</div>

CSS

body {
    background: #727272
}
.switcher-bar {
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
    max-height: 60px;
    position: relative;
    z-index: 22
}
.header-btn {
    position: relative
}
.header-btn a {
    border-left: 1px solid #e6e6e6;
    display: block;
    font-size: 24px;
    height: 60px;
    padding: 0;
    width: 60px;
    text-decoration: none
}
.header-btn a:before {
    color: #9b9b9b;
    left: 18px;
    position: absolute;
    top: 18px
}
.header-btn a.icon-tablet {
    font-size: 30px
}
.header-btn a.icon-tablet:before {
    left: 21px;
    position: absolute;
    top: 16px
}
.header-btn a.icon-mobile-phone {
    font-size: 30px
}
.header-btn a.icon-mobile-phone:before {
    left: 23px;
    position: absolute;
    top: 16px
}
.header-btn a.icon-remove {
    font-size: 24px
}
.header-btn a.icon-remove:before {
    left: 21px;
    position: absolute;
    top: 18px
}
.header-btn a:hover, .header-btn.current a {
    background: #e66346;
    background-image: -ms-linear-gradient(top, #f37054 0, #e66346 100%);
    background-image: -moz-linear-gradient(top, #f37054 0, #e66346 100%);
    background-image: -o-linear-gradient(top, #f37054 0, #e66346 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f37054), color-stop(1, #e66346));
    background-image: -webkit-linear-gradient(top, #f37054 0, #e66346 100%);
    background-image: linear-gradient(to bottom, #f37054 0, #e66346 100%);
    border: 1px solid #c94f33;
    text-decoration: none
}
.header-btn a:hover:before, .header-btn.current a:before {
    color: #fff
}
.header-btn a:focus, .product-switcher a:focus {
    outline: 0
}


.mobile-btn.disabled, .tablet-btn.disabled, .desktop-btn.disabled {
    -ms-filter:"alpha(opacity=0)" opacity: 0;
    visibility: hidden
}
.mobile-btn.visible, .tablet-btn.visible, .desktop-btn.visible {
    -ms-filter:"alpha(opacity=100)" opacity: 1;
    visibility: visible
}
.switcher-body {
    background:...

JavaScript

var $viewportButtons = $('.mobile-btn, .tablet-btn, .desktop-btn'),
    $body = $('body'),
    $container = $('.layout-container');


function layoutswitcher() {
     var $w_height = $(window).height(),
        $b_height = $('.switcher-bar').height(),
        $i_height = $w_height - $b_height - 2;
    $container.height($i_height);
}


$(document).ready(layoutswitcher);
$(window).on('resize load', layoutswitcher);

// Switching views
$('.desktop-btn').on('click', function () {
    $container.animate({
        'width': $(window).width()
    });
    return false;
});

$('.tablet-btn').on('click', function () {
    $container.animate({
        'width': '768px'
    });
    return false;
});
$('.mobile-btn').on('click', function () {
    $container.animate({
        'width': '480px'
    });
    return false;
});