T3 Community Discussion & Support

Let's build the best free Joomla template framework, together!
  1. carlos cipolatti
  2. General Discussion
  3. Thursday, 20 June 2013
  4.  Subscribe via email
Good morning, I would like to know how is the procedure to get the same height on the content and sidebar columns. Like for example you used in your JA FUBIX template.

I placed the code to call the file "jquery.equalheight.js" in "head.php" as follows:


/ / HEAD BASE T3
$ this-> AddHead ();
$ this-> addScript (T3_URL. '/ js / jquery.equalheight.js');


and have not gotten any results.
What I do wrong?. What I need to do?.

I would appreciate a lot your cooperation. From already thank you very much.

My configuration:
Joomla_2.5.11
"t3_blank.v1.2.5" and "plg_system_t3.v1.2.6"
running locally on XAMPP for Windows 1.7.3

Note: English by google translator :-( sorry!!
Comment
There are no comments made yet.
Accepted Answer Pending Moderation
0
Votes
Undo
Hi carlos cipolatti,

Those line codes above i just included the library for equal height function.
You need to execute this function on specific case. For example

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').equalHeight();
});
</script>

You can add this block code just after the markup render.

You can take a look on JA Fubix for more information. Though on JA Fubix, we juse

<script type="text/javascript">
jQuery(document).ready(function($){
$('#ja-ul-lastnews > li').liveeqboxs();
});
</script>

This function is written in another script file and internally call equalHeight function.

Regards
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 1
Accepted Answer Pending Moderation
0
Votes
Undo
thank you very much for your answer. I've tried it and it works great.
thank you!!
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 2
Accepted Answer Pending Moderation
0
Votes
Undo
in case anyone needs it. I will leave the complete solution that worked for me my to get the same height on the content and sidebar columns:

templates/t3_blank/tpls/blocks/head.php

// T3 BASE HEAD
$this->addHead();
$this->addScript (T3_URL.'/js/jquery.equalheight.js'); // equalheight Script
?>
<!-- equalheight Script -->
<script type="text/javascript">
jQuery(document).ready(function($){
$('.sameHeight > div').equalHeight();
});
</script>




templates/t3_blank/tpls/blocks/mainbody.php

<section id="t3-mainbody" class="container t3-mainbody">
<div class="row sameHeight">

<!-- MAIN CONTENT -->




Note: I must say that this solution is only for NO Responsive sites, because in responsive sites its still maintaining the same high value for both columns and this generates large blanks when the columns are placed below the content.

hope will be useful to someone.
regards
C.-
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 3
Accepted Answer Pending Moderation
0
Votes
Undo
Someone knows a solution that works also on responsive sites?
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 4
Accepted Answer Pending Moderation
0
Votes
Undo
Someone knows a solution that works also on responsive sites?

I know this question is old but figured I'd leave the answer for others. Chris Coyier over at CSS-tricks.com has a pretty nice script that will help you out. I implemented this on the a T3-blank homepage to equalize height on spotlight modules.

var currentTallest = 0,
currentRowStart = 0,
rowDivs = new Array(),
$el,
topPosition = 0;

$('.blocks').each(function() {

$el = $(this);
topPostion = $el.position().top;

if (currentRowStart != topPostion) {

// we just came to a new row. Set all the heights on the completed row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}

// set the variables for the new row
rowDivs.length = 0; // empty the array
currentRowStart = topPostion;
currentTallest = $el.height();
rowDivs.push($el);

} else {

// another div on the current row. Add it to the list and check if it's taller
rowDivs.push($el);
currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);

}

// do the last row
for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
rowDivs[currentDiv].height(currentTallest);
}

});

Call that script in and add a Module Class Suffix (if you are equalizing modules) to the modules you want to equalize. I did '_equalHeights' which in turn comes out to be the class '.module_equalHeights'. You can then replace '.blocks' in the script with .module_equalHeights and your containers should be equalized, even on window size change.
Comment
There are no comments made yet.
  1. more than a month ago
  2. General Discussion
  3. # 5
  • Page :
  • 1


There are no replies made for this post yet.
However, you are not allowed to reply to this post.