<div class="device-size">
<a id="switch-desktop" class="material-icons mdl-color-text--grey-600 switch-size switch-active" href="#">laptop</a>
<a id="switch-tablet" class="material-icons mdl-color-text--grey-600 switch-size" href="#">tablet_android</a>
<a id="switch-mobile" class="material-icons mdl-color-text--grey-600 switch-size" href="#">smartphone</a>
</div>
<iframe id="desktop-size" src="https://tfirdaus.github.io/mdl/grid/index2.html" frameborder="0"></iframe>
body {
overflow-y: hidden;
}
iframe {
height: 400px;
margin-bottom: 120px;
margin-right: auto;
margin-left: auto;
overflow: scroll;
}
.device-size {
padding: 15px;
margin-bottom: 10px;
width: 100%;
}
.device-size a {
text-decoration: none;
margin-right: 6px;
margin-left: 6px;
opacity: 0.5;
}
.device-size a:hover,
.device-size .switch-active {
opacity: 1;
}
#desktop-size {
width: 960px;
}
#tablet-size {
width: 800px;
}
#mobile-size {
width: 400px;
}
.mdl-cell {
padding: 20px;
background-color: #f3f3f3;
}
(function($) {
var $iframe = $('iframe');
var $switch = $('.switch-size');
$switch.on('click', function() {
var $this = $(this);
if ($this.hasClass('switch-active')) {
return;
} else {
$switch.removeClass('switch-active');
$(this).addClass('switch-active');
// id
var $id = $this.attr('id');
var $class;
console.log($id);
switch ($id) {
case "switch-tablet":
$class = "tablet-size";
break;
case "switch-mobile":
$class = "mobile-size";
break;
default:
$class = "desktop-size";
}
$iframe.attr('id', $class);
}
});
})(jQuery);