On Jul 25, 2012, at 11:09 AM, meinbrodt wrote:
> Hello Everybody,
>
> I have an equal-height problem I want to solve using the Prototype-Framework.
> The problem presents itself in the context of the following HTML-Markup of a
> Product Grid:
>
> <div id="products-list-view">
> <div class="products-grid">
> <div class="item">Contents</div>
> <div class="item">Contents</div>
> <div class="item">Contents</div>
> </div>
> <div class="products-grid">
> <div class="item">Contents</div>
> <div class="item">Contents</div>
> <div class="item">Contents</div>
> </div>
> ...
> </div>
>
> The Style-Declaration for the markup above are as follows:
>
> #products-list-view div.products-grid {
> border-bottom: 1px #B7B9B8 dotted;
> display: block;
> height: 100%;
> overflow: hidden;
> padding: 0 0 0 1.6%;
> }
>
> #products-list-view div.products-grid > div {
> display: block;
> float: left;
> margin: 0 3% 0 0;
> padding: 30px 0 30px 0;
> position: relative;
> width: 30%;
> }
>
> The <div class="item"> elements have different heights since their amount of
> contents vary. In order to harmonize the height of every <div class="item">
> element in every <div class="products-grid"> row I used the following
> Javascript/Prototype code.
>
> <script type="text/javascript">
> //<![CDATA[
>
> // loop through all div.products-grid elements
> $$('div.products-grid').each(function(r) {
>
> // get the height of the current div.products-grid element
> var rowHeight = r.getHeight();
>
> // for debuggin purposes
> // alert(rowHeight);
>
> // select all div.item element within the current div.product-grid
> element
> var columns = r.select('div.item');
>
> // make each div.item element as high as the current div.product-grid
> element
> columns.invoke('setStyle', {height: rowHeight + 'px'});
>
> });
> //]]>
> </script>
>
> Unfortunately the codes doesn't work. The height which is assigned to the
> <div class="item"> element via the setStyle method doesn't correspond to the
> height I get shown on the screen when I would use the alert(rowHeight)
> method. However this is only the case when I choose to comment out the
> alert(rowHeight) method. When I choose to use it, the correct height is
> written in the style-declaration created via the setStyle method.
>
> I really don't get this. Does anyone have an idea how to fix that?
Make sure that you are wrapping your method in a dom:loaded observer:
document.observe('dom:loaded', function(){
//your code here
});
Unless you do that (or move your script block to right before the closing /body
tag) your page content isn't in place when your script fires, so the value you
get for height doesn't match what it will be when all of the content is painted
to the screen.
Walter
>
> Best regards and thank you, Matthias
>
>
>
> --
> You received this message because you are subscribed to the Google Groups
> "Prototype & script.aculo.us" group.
> To view this discussion on the web visit
> https://groups.google.com/d/msg/prototype-scriptaculous/-/3EBJVQuxq54J.
> To post to this group, send email to [email protected].
> To unsubscribe from this group, send email to
> [email protected].
> For more options, visit this group at
> http://groups.google.com/group/prototype-scriptaculous?hl=en.
--
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en.
