Menu icon Foundation

My Posts

No Content

My Comments

Brian Smither commented on Rob Rademeyer's post about 1 year

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 about 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 about 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 about 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 about 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 about 1 year

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 about 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 about 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 about 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 about 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