Public Forums 71,145 posts

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#154098

Hi,

is there an easy way to match the height of html elements like yahoo warp do?
Doku: http://www.yootheme.com/docs/component/zoo/item/match-the-height-of-html-elements-warp55

Thx and regards

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#354774

<em>@king.lui 193000 wrote:</em><blockquote>Hi,

is there an easy way to match the height of html elements like yahoo warp do?
Doku: http://www.yootheme.com/docs/component/zoo/item/match-the-height-of-html-elements-warp55

Thx and regards</blockquote>

Dear King.lui,

I think you can using the fucntion equalHeight(),it will do the seme thing as yootheme’s function !

1 user says Thank You to Sherlock for this useful post

1. king.lui

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#355701

Thanks.

My problem:
I have two divs with the same name. Two div with class fieldGroup in one div with class jr_customFields.

This will not work.
equalHeight ([‘.locations.content.article.home .jr_detail_header .fieldGroup’]);
equalHeight ([‘fieldGroup’]);

Any ideas or tips?

Thanks and cheers.

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#355755

<em>@king.lui 194239 wrote:</em><blockquote>Thanks.

My problem:
I have two divs with the same name. Two div with class fieldGroup in one div with class jr_customFields.

This will not work.
equalHeight ([‘.locations.content.article.home .jr_detail_header .fieldGroup’]);
equalHeight ([‘fieldGroup’]);

Any ideas or tips?

Thanks and cheers.</blockquote>

Dear king.lui,

You can try with this
equalHeight(‘.fieldGroup’) ;

i think that will help !

1 user says Thank You to Sherlock for this useful post

1. king.lui

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#355823

But it works only, if one Div has a fix heigth (css, height, pixel). right?
Ich have two Divs with .section_1 and two with .section_2 and two with .section_3. The height is dynamic.

this has no effect:
equalHeight ([‘.section_1’]);
equalHeight ([‘.section_2’]);
equalHeight ([‘.section_3’]);

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#355861

<em>@king.lui 194397 wrote:</em><blockquote>But it works only, if one Div has a fix heigth (css, height, pixel). right?
Ich have two Divs with .section_1 and two with .section_2 and two with .section_3. The height is dynamic.

this has no effect:
equalHeight ([‘.section_1’]);
equalHeight ([‘.section_2’]);
equalHeight ([‘.section_3’]);</blockquote>

Dear King.lui,

I checked and I saw it work for me,Don’t know why it did not work for you,If you can give me your url I will have a checking for you.

1 user says Thank You to Sherlock for this useful post

1. king.lui

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#355892

Hi dathq. Thanx for your feedback.
At this moment it is not live, only on dev@localhost. Where I must do ist? In base-temes/default/blocks/fixheight.php is correct?

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#356187

<em>@king.lui 194480 wrote:</em><blockquote>Hi dathq. Thanx for your feedback.
At this moment it is not live, only on dev@localhost. Where I must do ist? In base-temes/default/blocks/fixheight.php is correct?</blockquote>

Dear king.lui,

It is inside the file pluginssystemjat3base-themesdefaultjscore.js ! go to that file and look for the function
function equalHeight (els) {
els = $$(els);
if (!els || els.length < 2) return;
var maxh = 0;
var els_ = [];
els.each(function(el, i){
//els_ = getDeepestWrapper (el);
els_ = el;
var ch = els_.getCoordinates().height;
maxh = (maxh < ch) ? ch : maxh;
},this);

els_.each(function(el, i){
el.setStyle(‘min-height’, maxh-el.getStyle(‘padding-top’).toInt()-el.getStyle(‘padding-bottom’).toInt());
},this);
}

1 user says Thank You to Sherlock for this useful post

1. king.lui

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#358421

Hi dathq,

now it’s online: http://www.papacommunity.de/locations.html
At this moment I have fixed heights because with equalHeight the height will not equal.

Thanks for your help

Cheers

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#358584

hH you’be posted the js-code.

Ok I have tested it. It seems that all is ok – but the height will not set. I think it’s a conflict with jReviews. I will upgrade to the newest version where I can disable the loading of jquery.

Thx and cheers

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#358621

jReviews is up2date but this is not the solution. The JS is working right from start to end – but with no effects. So the my php in function fixColsHeight is correct … but the min-height will not appear. It is not working and I must use fixed heights with css. So I must add an own script to fix this *grmpf*

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#358682

<em>@king.lui 198058 wrote:</em><blockquote>jReviews is up2date but this is not the solution. The JS is working right from start to end – but with no effects. So the my php in function fixColsHeight is correct … but the min-height will not appear. It is not working and I must use fixed heights with css. So I must add an own script to fix this *grmpf*</blockquote>

Dear king,

Can you post your js codes here ? Is it working for you ?

[king.lui Friend king.luiJoin date: January 2007Posts: 34Downloads:3Uploads:0 Thanks: 9]

#358731

Hi dathq,

I have uses /plugins/system/jat3/base-theme/default/blocks/fixheight.php – noting.
Then I make a copy in my template folder .. but it seems it will not be loaded – so also noting. So T3 is not loading this file. OK, then I copied the js-code into my head so the page will load it – but without effects (on my local testserver). I am doing or thinking somethin wrong. Here the js-code:

<script type=”text/javascript”>
/*fix height for middle area columns*/
function fixColsHeight () {
equalHeight ([‘ja-left’, ‘ja-main’, ‘ja-right’]);

equalHeight([‘.jr_blogview .listItem’]); // locations blogview

equalHeight ([‘.section_1’]); // locations categories row 1
equalHeight ([‘.section_2’]); // locations categories row 2
equalHeight ([‘.section_3’]); // locations categories row 3

fixHeight ([‘ja-right1’, ‘ja-right2’], [‘ja-right’], [‘ja-right-mass-top’, ‘ja-right-mass-bottom’]);
fixHeight ([‘ja-left1’, ‘ja-left2’], [‘ja-left’], [‘ja-left-mass-top’, ‘ja-left-mass-bottom’]);
fixHeight ([‘ja-current-content’, ‘ja-inset1’, ‘ja-inset2’],[‘ja-main’], [‘ja-content-mass-top’,’ja-content-mass-bottom’]);
fixHeight ([‘ja-content-main’], [‘ja-current-content’], [‘ja-content-top’, ‘ja-content-bottom’]);

}
window.addEvent (‘load’, function () {
fixColsHeight.delay (100, this);
});
</script>

[Sherlock Friend SherlockJoin date: September 2014Posts: 11453Downloads:0Uploads:88 Thanks: 221 Thanked: 2478 times in 2162 posts]

#359044

Dear king,

I saw that there are some javascript errors occurring from the community component that is clashing with the js codes of the equalHeight.

[Author]

Posts