Hi there,
I’m currently working on a little test project with the Isotope plugin for JQuery (see here: http://isotope.metafizzy.co/).
At the moment I have an issue with the project only being semi-responsive as the values do not seem to be changing on the fly with the browser window being adjusted in width. Ideally the elements should be collapsing on top of each other every time.
However, when adjusting it to certain widths the script will not react the way it should and the boxes either do not move or when they readjust they overlap each other (the latter happening more when you reduce and then expand the browser window.
Unfortunately I’m having some problems with hosting at the moment so cannot host the project files, however, I have listed them out below and used online plugin links so a simple copy and paste and they should work :).
(my stylesheet)
body{font-family: 'Chivo', sans-serif; background:#383838;}
#container{max-width:90%; margin:0 auto;}
.clr{clear:both;}
/* header */
#header{background:#262626; background-image:url(../images/headerBG.png); width:100%; min-height:60px; font-family:'Questrial'; padding:5px;}
#header #forename{color:#CCCCCC; font-weight:bold;}
#header #header-left{float:left; width:20%; margin-left:3%; margin-top:1.3%; font-size: 1.8em; font-weight:400; color:white; }
#header #header-right{float:right; width:50%; margin-right:3%; margin-top:1.6%; font-size: 1.4em; font-weight:400; color:white; text-align:right;}
#header #header-right ul{ list-style-type:none; display:inline; margin:5px 20px; padding:0;}
#header #header-right li{display:inline; padding:0 5px;}
#header #header-right li a{color:white; text-decoration:none;}
#header #header-right li a:hover{color:white; border-bottom:3px white solid;}
/* main pages */
#main{width:98%; height:100%; background:#f4f4f4; padding:15px;}
#main h1{font-size:1.4em; padding:0; margin:0;}
#main div img{width:100%;}
#filtered-projects-container{margin-top:20px; height:100%;}
.element{width:32.6%; height:150px; margin-right:0.3%; margin-bottom:0.5%;}
.element:hover{opacity:0.7 !important; -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 0.1s; transition-duration: 0.1s; cursor:pointer;}
.element span.info{margin-top:16.5%; margin-left:3%; padding:8px 20px 8px 15px; font-size:1em; max-width:65%; }
.cat1{border: 2px solid #00b2b8;}
.cat1:hover{border:2px solid #098185;}
.cat1 span{background:#accccd; color:#07575a;}
.cat2{border: 2px solid #fa5800;}
.cat2:hover{border:2px solid #963c00;}
.cat2 span{background:#cdbcac; color:#5a3c07;}
.cat3{border: 2px solid #e6ce00;}
.cat3:hover{border:2px solid #948500;}
.cat3 span{background:#e9eaad; color:#5a5507;}
#filtered-projects-container .cat1 img, #filtered-projects-container .cat2 img, #filtered-projects-container .cat3 img{}
(isotope stylesheet)
/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
z-index: 2;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
-webkit-transition-duration: 0.6s;
-moz-transition-duration: 0.6s;
-ms-transition-duration: 0.6s;
-o-transition-duration: 0.6s;
transition-duration: 0.6s;
}
.isotope {
-webkit-transition-property: width;
-moz-transition-property: width;
-ms-transition-property: width;
-o-transition-property: width;
transition-property: width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, width;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}
ul, ol {
margin-left: 1.5em;
}
a,
a code {
color: #FB4;
text-decoration: none;
}
a:hover,
a:hover code {
color: #4BF;
}
a:active,
a:active code {
color: #1FB;
background: black;
}
#container {
}
.element {
float: left;
overflow: hidden;
position: relative;
color: #222;
}
.element * {
position: absolute;
margin: 0;
}
/**** Example Options ****/
#options {
}
#options ul {
padding:0;
margin: 0;
list-style: none;
}
#options li {
float: left;
margin-right:0.1em;
margin-bottom: 0.2em;
}
#options li a {
display: block;
padding: 0.3em 0.48em;
color: #222;
}
#options li a#filter-showall {
background-color: #383838;
color:white;
}
#options li a#filter-showall:hover {
background-color: #909090;
color:white;
}
#options li a#filter-showall.selected{
background-color: #b4b4b4;
text-shadow: none;
color: white;
}
#options li a#filter-web {
background-color: #383838;
color:white;
}
#options li a#filter-web:hover {
background-color: #098185;
color:white;
}
#options li a#filter-web.selected{
background-color: #00b2b8;
text-shadow: none;
color: white;
}
#options li a#filter-graphics {
background-color: #333333;
color:white;
}
#options li a#filter-graphics:hover {
background-color: #963c00;
color:white;
}
#options li a#filter-graphics.selected{
background-color: #fa5800;
text-shadow: none;
color: white;
}
#options li a#filter-photography {
background-color: #333333;
color:white;
}
#options li a#filter-photography:hover {
background-color: #948500;
color:white;
}
#options li a#filter-photography.selected {
background-color: #e6ce00;
text-shadow: none;
color: white;
}
/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
(html)
<html>
<head>
<meta charset="utf-8" />
<meta name = "viewport" content = "width=device-width, minimum-scale=1, maximum-scale=1">
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<title>Test Page</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/stylesheet.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script>
$(function(){
var $container = $('#filtered-projects-container');
$container.isotope({
itemSelector : '.element'
});
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function(){
var $this = $(this);
// don't proceed if already selected
if ( $this.hasClass('selected') ) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[ key ] = value;
if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
// changes in layout modes need extra logic
changeLayoutMode( $this, options )
} else {
// cat4wise, apply new options
$container.isotope( options );
}
return false;
});
});
</script>
</head>
<body style="margin:0px;">
<div id="container">
<div id="main">
<div id="options" class="clearfix">
<ul id="filters" class="option-set clearfix" data-option-key="filter">
<li><a href="#filter" id="filter-showall" data-option-value="*" class="selected">Show all</a></li>
<li><a href="#filter" id="filter-cat1" data-option-value=".cat1">Cat. 1</a></li>
<li><a href="#filter" id="filter-cat2" data-option-value=".cat2">Cat. 2</a></li>
<li><a href="#filter" id="filter-cat3" data-option-value=".cat3">Cat. 3</a></li>
</ul>
</div>
<div id="filtered-projects-container">
<div class="element cat1"><span class="info">Project 1</span></div>
<div class="element cat3"><span class="info">Project 2</span></div>
<div class="element cat2"><span class="info">Project 3</span></div>
<div class="element cat1"><span class="info">Project 4</span></div>
<div class="element cat2"><span class="info">Project 5</span></div>
<div class="element cat3"><span class="info">Project 6</span></div>
<div class="element cat3"><span class="info">Project 7</span></div>
<div class="element cat2"><span class="info">Project 8</span></div>
<div class="element cat1"><span class="info">Project 9</span></div>
</div>
</div>
</div>
</body>
</html>
Any pointers would be much appreciated!
Cheers,
Shoxt3r
