SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Responsive JQuery Isotope Issue

    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)
    Code:
    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)
    Code:
    /* 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)
    Code:
    <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

  2. #2
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    153
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    After taking a quick look it seems that it doesn't like items to be in % values - any fix I can apply to allow for this?

  3. #3
    SitePoint Member
    Join Date
    Oct 2013
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I published an article on how to archive this:

    http://www.i-do-this.com/blog/103/Us...-fluid-layouts


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •