Problem Test

Test

by Danish Farman

HTML

<div class="switch">    <!-- Grid/List Start Controller-->
<div class="switch-left">Grid/List View</div>
<div class="switch-right">
<a class="bar_view active" href="#">Grid</a>    <!-- Grid switcher Link-->
<a class="dat_view" href="#">List</a>   <!-- List switcher Link-->
</div>
</div>

<div class="blog-posts hfeed">  <!-- Grid/List Start -->

<div class="post hentry bar">  <!-- This Content 1 -->
<h2 class="post-title entry-title"><a href="http://slyzzer.blogspot.com/2014/06/multi-function.html">Sample Content</a></h2>
<div class="summary-style">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </div>
</div>

<div class="post hentry bar">  <!-- This Content 2 -->
<h2 class="post-title entry-title"><a href="http://slyzzer.blogspot.com/2014/06/multi-function.html">Sample Content</a></h2>
<div class="summary-style">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</div>
</div>

</div>   <!-- Grid/List End -->

CSS

body {
    background: yellowgreen;
}
.switch {
   height:35px;
   margin:0 9px 10px 0;
   padding: 0;
   margin-top: 6px;
   width: 100%
}

.switch-left {
   width:260px;
   float:left;
   margin:0 auto;
   padding: 5px 0;
   padding-left: 3px;
   color:#666;
   font: 25px 'Open Sans', Arial, Cambria, Georgia, sans-serif;
   text-transform: none;
   font-weight: normal;
}
.switch-right {
   width:150px;
   float:right;
   margin-top:8px;
   margin-right: 13px;
}
.switch a {
   font:14px Arial;
   padding:3px 8px 3px 25px;
   text-transform:none;
   color:#aaa;
}
a.bar_view {
	color: #9DEADA;
	padding: 10px 5px;
	border: 1px solid transparent;
}
a.bar_view:hover, a.dat_view:hover {
	background: white;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid whitesmoke;

}
a.bar_view.active:hover {
	background: white;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid whitesmoke;
}

a.dat_view {
	color: #9DEADA;
	padding: 10px 5px;
	border: 1px solid transparent;
}
a.dat_view.active:hover {
	background: white;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border: 1px solid whitesmoke;
}
.switch a.active {
    color: #000;
	padding: 10px 5px;
}


/* CSS Bar untuk bagian ::::::::
*/

.bar {
    background-color: #FFF !important;
    display:inline;
    float:left;
    list-style:none;
    margin: 10px 40px 40px 10px !important;
    overflow:hidden;
    padding: 0 0 20px;
    position:relative;
    text-align:center;
    width: 200px;
	border-bottom: none;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	z-index: 999;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11);
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.11);
}

div.bar h2.post-title.entry-title {
  display: -webkit-box;
	border-bottom: none;
	box-shadow: none;
  padding-left: 16px;
}
.bar h2 a {
    font: 15px 'Open...

JavaScript

jQuery(document).ready(function () {
    var $box=jQuery(".post"),
        $bar=jQuery("a.bar_view");
    $dat=jQuery("a.dat_view");
    $dat.click(function () {
        $box.fadeOut(1000,function(){
            $box.removeClass("bar").fadeIn()//updated
        });
        jQuery(this).addClass("active");
        $bar.removeClass("active");
        jQuery.cookie("dat_style", 0);
        return false
    });
    $bar.click(function () {
        //$box.addClass("bar").fadeIn(1000);
        $box.fadeOut(1000,function(){
            $box.addClass("bar").fadeIn()//updated
        });
        jQuery(this).addClass("active");
        $dat.removeClass("active");
        jQuery.cookie("dat_style", 1);
        return false
    });
    if(jQuery.cookie("dat_style")==0) {
        $box.removeClass( "bar");
        $dat.addClass("active")
    } else {
        $box.addClass("bar");
        $bar.addClass("active")
    }
});