- This topic is empty.
-
AuthorPosts
-
September 17, 2014 at 10:24 am #183393
bmoneruiux
ParticipantI’m testing out a new Foundation-based page layout using Isotope. The transitions on my “isotope-item’s” were working, however now they’re not.
I need help navigating where I went wrong with the CSS so I can re-enable the transition animations. And as an added bonus, why my first breakpoint doesn’t force the 4 single-wide/tall boxes to the right, up underneath the four-wide/tall main box?
There are a lot of files going on, so I’m just linking out…
I’m using the latest Foundation Essentials
I’ve modified index.html, here’s the PasteBin for it
I’ve modified foundation.css as well, here’s the Pastebin for that
And, if it wasn’t obvious, the Isotope plugin
September 17, 2014 at 10:38 am #183396bmoneruiux
ParticipantMaybe this Pen would better help
September 18, 2014 at 6:08 am #183461bmoneruiux
ParticipantI’ve uploaded this project to “test.brandonmoner.me”, and it looks TOTALLY broken. However that same project locally is 100% A.Ok. Can you lend an eye?
September 18, 2014 at 6:30 am #183473bmoneruiux
ParticipantCan 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>
September 23, 2014 at 4:38 pm #184402Soren
Participantseriously try swapping these two scr…
<script src="isotope.pkgd.js"></script> <script src="jquery.min.js"></script>
…ipts around like so ;)
<script src="jquery.min.js"></script> <script src="isotope.pkgd.js"></script>
September 24, 2014 at 6:01 am #184637bmoneruiux
ParticipantHey @Soren
Haven’t updated this post because I hadn’t been getting answers from here, but I did this in my recent iteration here.
My animations are back, but I’m not hunting for the reason why my boxes aren’t cascading the way I think they should. If you visit that link and play with it, the boxes do some funky movements and I think it’s attributed to the .grid-sizer width I have set. Not sure what the most optimal number is in this case.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.