integrating jquery masonry into a zurb foundation grid - jquery-masonry

I'm having issues integrating masonry with a Foundation grid layout. Essentially with identical width images with varying height, the masonry works as expected but at certain breakpoints the grid only will have a two column layout as opposed to the usual four.
However if you keep minimizing the browser width, the four columns return so it can't be that there isn't the room to display them.
var $container = $('#work_grid');
$container.imagesLoaded( function(){
$('#work_grid').masonry({
itemSelector: '.work_item',
isAnimated: true,
});
HTML
<div class="row">
<div class="twelve columns">
<div id="work_grid" class="block-grid four-up">
<li class="work_item"><img src="stylesheets/images/work1.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work2.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work3.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work4.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work5.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work6.jpg" alt=""></li>
<li class="work_item"><img src="stylesheets/images/work7.jpg" alt=""></li>
</div> <!-- /.block-grid four-up -->
</div> <!-- /.twelve columns -->
</div> <!-- /.row -->

To answer your question about why your issue is happening:
Unfortunately since integrating masonry and frameworks can be tricky since both are attempting to control the image in completely different ways (Foundation wants to resize and masonry wants to reposition). The best way to tackle this issue is to use a foundation container as the masonry container, the images inside will not resize, but will reposition within the fluid container while centering the container to avoid awkward margin issues which appear on the right-side of containers when images cannot be placed into an extra column.
=== UPDATE ===
I updated the code base with the most up-to-date Foundation version at the time of this update (5.0.2) in this github repository if you'd like to use it.

Related

Why won't my Bootstrap 4 page row wrap when I use flex-flow plus grid system classes?

I have a sidebar for searching, and main content to the right of the sidebar. I want the sidebar to remain approx the same width, while the main content can shrink horizontally when the browser window is shrinking horizontally. I am using the Bootstrap 4 grid system to accomplish this. In addition, I am using flex to enable row wrapping. The grid system responsive width works ok, up until the browser shrinks to approx "col-6" size, upon which any further shrinking DOES NOT yield row wrap. I want row wrap at the smallest width to accommodate small devices. How can I achieve this (code below)? I am very new at using bootstrap and flex in general. I am a backend developer dipping my toes into responsive web design. Please advise.
Also, please note that this is not about a "fixed sidebar", at least not yet, as that is instead a sidebar that is fixed during scrolling vertically. I am interested in horizontal responsiveness.
<div class="container">
<div class="d-flex flex-row flex-wrap">
<div id="search" class=" col-6 col-sm-5 col-md-4 col-lg-3 col-xl-3">
<h4 id="searchTitle">Search Criteria</h4>
<div id="searchCriteria">
a form goes here ...
</div>
</div>
<div id="searchResultsColumn" class="col-6 col-sm-7 col-md-8 col-lg-9 col-xl-9">
<h4 id="resultTitle">Search Results</h4>
<div id="searchResultsRows">
search results go here ...
</div>
</div>
</div>
I assume col-6 in a 12 grid system will yield 50% width. If you want the rows to wrap at a certain viewport why are you dividing the two elements into 12 evenly? At your desired break point give both a width of 100%, or whatever the appropriate bootstrap values are e.g.
<div id="search" class="col-12">
...
</div>
<div id="searchResultsColumn" class="col-12">
...
</div>

MODx Revo Wayfinder 3rd level <ul> different to 2nd level <ul>?

I've used the Wayfinder menu building extra with MODx Evo and am now attempting to use it with MODx Revo for a new site. It's working well apart from I can't yet see a way to have the 3rd level different to the 2nd level . See the way Wayfinder is currently outputting the menu (simplified here for clarity):
<ul class="nav nav-pills nav-main" id="mainMenu">
<li class="dropdown">
<a class="dropdown-toggle notransition" href="index.php?id=200">
Help
<i class="icon-angle-down"></i>
</a>
<ul class="dropdown-menu pull-right " style="display: none;">
<li>
<a href="index.php?id=31">
FAQs
</a>
</li>
<li class="dropdown-submenu pull-left">
<a href="index.php?id=54">
Policies
</a>
<ul class="dropdown-menu pull-right" style="display: none;">
<li>
<a href="index.php?id=490">
Privacy Policy
</a>
</li>
<li>
<a href="index.php?id=489">
Terms and Conditions
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I need the 'Policies' sub-menu, with 'Privacy Policy' etc, to pull to the left, not to the right - defined in Wayfinder InnerTpl:
<ul class="dropdown-menu pull-right" style="display: none;">[[+wf.wrapper]]</ul>
So, is it possible with Wayfinder to have a 3rd level different to the 2nd level ???
I've browsed the docs and forums for days to no avail and hope that the amazing SO community has some insights. Thanks in advance!
I think you are going to have to do this with CSS, you can add the &levelClass to your wayfinder call [docs say " CSS class denoting every output row level. The level number will be added to the specified class (level1, level2, level3 etc if you specified 'level').]
that way when you can write some css for your third level items when you see something like:
<li class="dropdown-submenu pull-left level2">
your css could go something like:
li.dropdown-submenu.pull-left.level2 > ul {
/* css for pulling it right */
}
unfortunately the &levelClass does not do anything if you add [[+wf.classnames]] to the UL tag in the outer wrapper so you have to come at it sideways.
OR
your inner wrappers could be written to use a snippet to decide what classes to add:
<ul class="dropdown-menu [[!pullLeftOrRight? &id=`[[+wf.docid]]`]]">
[[+wf.wrapper]]
</ul>
Then in your snippet use the docid to determine where in the menu tree that subnav is.
[hopefully docid is available in the outerTpl - I'm not sure]
UPDATE
After reading your comments & the docs again, I think I have an idea that might work - check out the &categoryFoldersTpl attribute, setup your tpl for that with your pull right classes & for your 3rd level drop downs, set the rel="category" on only the third level resources as suggested in the docs. [which doesn't help anyone who wants different submenus for different levels, but may get you out of your bind]

Proper way to arrange bootstrap layout

I have probably a simple question for someone with bootstrap experience. On this page: http://limitedwave.com/watsonmetals/site/, in the first section just under the nav bar I have 4 'zones'. One house a logo, directly under it some text in a box, to the right of both a large navigation grid, and under that an 'extra row' below the grid only.
I'm not laying this out properly on the bootstrap grid and I'd like to. I have the content in divs that are more or less stacked and floated with css and heavy margin manipulation to make it look as it does. Am i wrong in assuming bootstrap can layout these divs more like a table via its grid? Perhaps this might also help with the fact that as soon as I resize my browser to the next smaller size from full width mac pro size, the logo and text shift right.
<section id="intro" data-speed="2" data-type="background">
<div class="container">
<div class="row-fluid">
<div id="welcome-screen" class="span16 text-left">
<div id="lrail">
<div id="logocontainer">
<img id="logo" src="img/logo-watson.png" alt="Watson Metals, LLC." width="130" />
</div>
<div id="welcome-box" class="span3 text-right">
Watson Metals manufactures quality metal building panels, for roof, siding, accessories for all building applications. We offer a pole barn package, steel siding or metal roofing for your personal specifications and needs.<br><br>
With an array of metal panel profiles such as Tuff-Rib, R-Panel, and our standing seam profile, we can provide material for almost any application. Our standing seam profile is available in either 12” or 16” widths and can be conveniently produced on your jobsite using our portable roll-former.
</div>
</div>
<div class="span12 text-center">
<div id="main-interface-container">
<ul id="interface-list">
<li><a class="link1" href="link1.php">Roofing Panels</a></li>
<li><a class="link2" href="link2.php">Post Frame Buildings</a></li>
<li><a class="link3" href="link3.php">Other Products</a></li>
<li><a class="link4" href="link4.php">Custom Trim</a></li>
<li><a class="link5" href="link5.php">Warranties and Information</a></li>
<li><a class="link6" href="link6.php">Frequently Asked Questions</a></li>
<li><a class="link7" href="link7.php">Energy Star</a></li>
<li><a class="link8" href="link8.php">About Our Company</a></li>
<li><a class="link9" href="link9.php">Contact Us</a></li>
<li><img id="home-locations" src="img/watson-locations.png" alt="Locations" /></li>
</ul>
</div>
</div>
<div class="span8 text-center"><span class="copyright">Copyright © 2013 Watson Metals LLC., All Rights Reserved.</span></div>
</div>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
</section>
http://twitter.github.io/bootstrap/scaffolding.html#gridSystem
Bootstrap's documentation is pretty solid.
The standard container->row->span# should work just fine for that grid. It should also take care of the responsiveUi issues you were having with the smaller screen.

Customizing the entire markup for the orchard cms navigation zone

I've been searching high and low for the past couple of days for the file(s) in Orchard where I can customize the markup used for the navigation
Traversing the tree in the Designer Tool and looking at the template and HTML views doesn't help much seeing as the MenuItemLink renders the <li> in the HTML view but nothing renders it in the template view. So I am quite stumped.
The original markup is like so (Taken from the Designer Tools Zone [Navigation]):
<div class="zone zone-navigation">
<article class="widget-navigation widget-menu-widget widget">
<nav>
<ul class="menu menu-main-menu">
<li class="first">
Work
</li>
</ul>
</nav>
</article>
</div>
What I need is to customize the classes on the <ul> and <li> elements, really.
If possible I'd love to be able to customize it all so I didn't need the <div class="zone zone-navigation"> for example.
But is this even possible?
<li> element is rendered by MenuItem shape (Core\Shapes\MenuItem.cshtml)
<nav> and top <ul> elements are rendered by Menu shape
(Core\Shapes\Menu.cshtml)
<a> element is rendered by MenuItemLink shape (Core\Shapes\MenuItemLink.cshtml)
If you want to override the defaults, simply put appropriate Menu.cshtml, MenuItem.cshtml or MenuItemLink.cshtml files in your theme (or better - copy the default one(s) and alter). Those will be used then instead of the default ones I wrote about above.

Menu Grid in jQuery Mobile

What is the best way to implement this layout with jQuery Mobile (menu-grid, 6 buttons in this example)?
I've tried the jQuery Mobile grid but I had many problems such as making it full width and full height, and changing the color to whatever I want.
You can create that in your own styling for that page. Float the icons and give them a 50% width (or less if you are using borders with box-model)
Since you dont have much going on which necessary requires body here, I feel going the way of header navigation might be the easiest. Just put the following code right after the header for your page. For eg:
<div data-role='header' data-position='inline' role='banner' data-theme='f' >
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">App Name</h1>
<div data-role="navbar" data-theme='c'>
<ul>
<li><a href="" >
Camera
</a></li>
<li><a href="" >
Wave
</a></li>
<li><a href="" >
Lock
</a></li>
<li><a href="" >
Pencil
</a></li>
<li><a href="" >
Star
</a></li>
<li><a href="" >
Friends
</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- header -->
Since you have six items here, jquery mobile will automagically align them in a 2x3 grid formation as displayed in your mockup (atleast will take care of the width). Other than this, your best bet for height might be doing some arithmetic in css. Eg: if header bar is 12px, then set each block's height:33%-4px;
For the color settings and such, jquery mobile theme roller works out way better than doing hand made css.
Use data grid "a"
Use the below one
<div data-role="navbar" data-grid="a">

Resources