Latest web development tutorials

Foundation Equalizer (Equalizer)

We can add a container element data-equalizer property, and add to each sub-element data-equalizer-watch property to create an identical height equalizer. The highest element determines the height of the other elements.

Note: The slider requires JavaScript. So you need to initialize oundation JS:

Examples

<Div class = "row" data -equalizer>
<Div class = "medium-4 columns panel" data-equalizer-watch>
Lorem ipsum ...
</ Div>
<Div class = "medium-4 columns panel" data-equalizer-watch>
Sed ut ...
</ Div>
<Div class = "medium-4 columns panel" data-equalizer-watch>
Lorem ipsum ...
</ Div>
</ Div>

<-! Initialize Foundation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

try it"

Equalizer different screens

On equalizer by adding data-equalizer-mq=" value " mq attribute set to the same height for different screen sizes. Value can be one of the following:

value description Examples
medium-up default. Create the same container height, width greater than 40.063em
large-up Create the same container height, width greater than 64.063em try it
xlarge-up Create the same container height, width greater than 90.063em try it
xxlarge-up Create the same container height, width greater than 120.063em try it

Nested content

The data-equalizer and data-equalizer-watch add the same value of the property. This can be connected together to the equalizer container. Repeatedly nested equalizer, make sure they are a match:

Examples

<-! The Equalized Container ->
<Div class = "row" data -equalizer = "first">
<Div class = "medium-4 columns">
<Div class = "panel" data -equalizer-watch = "first">
<H3> Panel </ h3>

<-! An Equalized Container Inside The Equalized Container ->
<Div class = "row" data -equalizer = "second">
<Div class = "panel" data -equalizer-watch = "second">
<H3> Nested Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" data -equalizer-watch = "second">
<H3> Nested Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "panel" data -equalizer-watch = "second">
<H3> Nested Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<-! End Nested Equalized Container - >

</ Div>
</ Div>
<Div class = "medium-4 columns">
<Div class = "panel" data -equalizer-watch = "first">
<H3> Panel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<Div class = "medium-4 columns">
<Div class = "panel" data -equalizer-watch = "first">
<H3> Panel </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>

try it"