Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Foundation & Isotope Transition Animaiton & Breakpoint Issues Reply To: Foundation & Isotope Transition Animaiton & Breakpoint Issues

#183473
bmoneruiux
Participant

Can anyone help me verify proper style & script file placement? I’m seriously trying to trace down why test.brandonmoner.me isn’t animating the transitions like it once was.

<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation 5.4.3 | Test Site</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.min.css" />
    <link rel="stylesheet" href="css/foundation.min.css" />
    <link rel="stylesheet" href="css/safe.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
    <script src="http://isotope.metafizzy.co/beta/isotope.pkgd.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body class="split">
    <header class="left">
      <a class="brand brand-bg" title="This is a Demo Page" href="#"><img src="http://1.bp.blogspot.com/-ux-A0V8Uh9c/UMajufgUAAI/AAAAAAAADI4/yWxnnUfAc-M/s1600/Google-Mobile-App-Logo.png" alt="Logo"></a>
      <nav class="site-nav" id="navigation">
        <ul class="main-nav">
          <li class="browse "><a class="main-nav-item" href="#"><strong>LINK 1</strong> <span class="subhead">Sub-Head 1</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="learn "><a class="main-nav-item" href="#"><strong>LINK 2</strong> <span class="subhead">Sub-Head 2</span> <i class="ss-navigateright icon"></i></a></li>
          <li class="discover "><a class="main-nav-item" href="#"><strong>LINK 3</strong> <span class="subhead">Sub-Head 3</span> <i class="ss-navigateright icon"></i></a></li>
        </ul>
      </nav>
    </header>
    <div class="right">
      <div class="grid isotope clearfix">
        <div class="grid-sizer"></div>
        <div class="grid-cell isotope-item item four-wide four-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item triple-wide triple-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item double-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
        <div class="grid-cell isotope-item item single-wide single-tall"></div>
      </div>
    </div>

    <script src="js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
    <script>
    $( function() {
      $('.isotope').isotope({
        itemSelector: '.item',
        masonry: {
          columnWidth: '.grid-sizer'
        }
      });
    });
    </script>
  </body>