Menu icon Foundation

My Posts

No Content

My Comments

Brian Smither commented on Rob Rademeyer's post 12 months

There is the best way, and then there is the way I would try it. (I have not tried this.)
Of all the top-bar HTML, find the main controlling class identifier. Perhaps "top-bar".
For the second bar, rename-it to something else. Perhaps "top2-bar".
Copy out all the ".top-bar" CSS rules to a different CSS file. Perhaps "top2-bar.css".
In that file, rename all the ".top-bar" selectors to ".top2-bar". Re-style as desired.
(This is just a theory. Please experiment. You may have to also do something about any javascript.)

Brian Smither commented on David Brandl's post almost 2 years

At the bottom of your main template, make this edit:
From:

$(document).foundation();

To:

$(document).foundation({equalizer:{equalize_on_stack:true}});
We can then tweak which tag gets the -watch attribute. I see you have it on both the <li> and the panel <div>. Try just the one. If that doesn't turn out well, try just the other.

Brian Smither commented on David Brandl's post almost 2 years

data-equalizer-watch is an attribute but not a value of an attribute. That is, use data-equalizer-watch outside of quotes, not as a value to the class attribute.
I would recommend only equalizing the panel div - which brings me to mention be careful about the closing div tag being inside the if block when it should be outside.

Brian Smither commented on Giovan Mathieu-Major's post almost 2 years

Some thoughts:
Is your viewport wide enough to accommodate the number of capital-M characters that the media-query specifies for the small-medium breakpoint - approx. 40em?
Any other CSS overruling foundation.css? Use the browser's diagnostic tools to view the rules on either of the columns div.

Brian Smither commented on David Brandl's post almost 2 years

We assume it is the items in the list that you are wanting equalized. So, each item (the <li> or a <div> within it) will have data-equalizer-watch.
<li>
<div><img src="uploads/images/mannschaftsfotos/Robert Gammel.jpg"></div>
<div class="panel" data-equalizer-watch>
<div class="mannschaft-titel">HBI Gammel Robert</div>
<div class="mannschaft-funktion">Kommandant</div>
</div missing>
</li missing>
Then, the whole list will have the data-equalizer.
<ul class="small-block-grid-1 large-block-grid-3" data-equalizer>
 

Brian Smither commented on Brian Smither's post over 3 years

Did I miss something?
I went to the codepen site, but I do not see any obvious code that would demonstrate a solution.
 

Brian Smither commented on Sara Callahan's post over 3 years

 
If I can jump in to learn...
How could putting:
Foundation.reInit('equalizer');
in apps.js accomplish anything?
 
I already have:
$(document).foundation();
in apps.js.
 
My experiences suggest "Load More" is an ajax request that modifies an existing DOM by appending some stuff to a specific node. There is nothing in the ajax process to suggest code in apps.js is going to get re-executed.
 
Is:
Foundation.reInit('equalizer');
fundamentally different than:
$(document).foundation('equalizer','reflow');

Posts Followed





Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Rob Rademeyer's post 12 months

There is the best way, and then there is the way I would try it. (I have not tried this.)
Of all the top-bar HTML, find the main controlling class identifier. Perhaps "top-bar".
For the second bar, rename-it to something else. Perhaps "top2-bar".
Copy out all the ".top-bar" CSS rules to a different CSS file. Perhaps "top2-bar.css".
In that file, rename all the ".top-bar" selectors to ".top2-bar". Re-style as desired.
(This is just a theory. Please experiment. You may have to also do something about any javascript.)

You commented on David Brandl's post almost 2 years

At the bottom of your main template, make this edit:
From:

$(document).foundation();

To:

$(document).foundation({equalizer:{equalize_on_stack:true}});
We can then tweak which tag gets the -watch attribute. I see you have it on both the <li> and the panel <div>. Try just the one. If that doesn't turn out well, try just the other.

You commented on David Brandl's post almost 2 years

data-equalizer-watch is an attribute but not a value of an attribute. That is, use data-equalizer-watch outside of quotes, not as a value to the class attribute.
I would recommend only equalizing the panel div - which brings me to mention be careful about the closing div tag being inside the if block when it should be outside.

You commented on Giovan Mathieu-Major's post almost 2 years

Some thoughts:
Is your viewport wide enough to accommodate the number of capital-M characters that the media-query specifies for the small-medium breakpoint - approx. 40em?
Any other CSS overruling foundation.css? Use the browser's diagnostic tools to view the rules on either of the columns div.

You commented on David Brandl's post almost 2 years

We assume it is the items in the list that you are wanting equalized. So, each item (the <li> or a <div> within it) will have data-equalizer-watch.
<li>
<div><img src="uploads/images/mannschaftsfotos/Robert Gammel.jpg"></div>
<div class="panel" data-equalizer-watch>
<div class="mannschaft-titel">HBI Gammel Robert</div>
<div class="mannschaft-funktion">Kommandant</div>
</div missing>
</li missing>
Then, the whole list will have the data-equalizer.
<ul class="small-block-grid-1 large-block-grid-3" data-equalizer>
 

You commented on Brian Smither's post over 3 years

Did I miss something?
I went to the codepen site, but I do not see any obvious code that would demonstrate a solution.
 

You commented on Sara Callahan's post over 3 years

 
If I can jump in to learn...
How could putting:
Foundation.reInit('equalizer');
in apps.js accomplish anything?
 
I already have:
$(document).foundation();
in apps.js.
 
My experiences suggest "Load More" is an ajax request that modifies an existing DOM by appending some stuff to a specific node. There is nothing in the ajax process to suggest code in apps.js is going to get re-executed.
 
Is:
Foundation.reInit('equalizer');
fundamentally different than:
$(document).foundation('equalizer','reflow');

Posts Followed

Following

  • No Content

Followers

  • No Content