Posted 1 year ago #
I used wp theme generator to create a theme from scratch and now I have a problem with my three columns not being equal and only adapting to the quantity of text in it.
To resolve my problem at the moment I am puting tonns of
in it (not funny)...
This link will give you an idea of my problem:
http://www.refernet.lu/?page_id=9
Any ideas?
Thank you in advance ;-)
Posted 1 year ago #
Hi dicalva,
If you give your center column CSS styles of display:block; height:xxxpx where you specify the height to be the same as the other two columns (I am on a public computer w/o Firebug right now, so I apologize I cannot tell you exactly the height you will need).
I hope that helps! Let me know if it doesn't and I will take a much closer look and resolve the problem when I get home.
Best,
Connor
Posted 1 year ago #
Thank you so much Connor but the problem is the other columns are not equal as well :-( I just made them look the same by putting in some
as well ... the thing is, the right column is only dedicated to rss feeds so if one day there are more (or less) the column will satrt moving ...
So in fact what I am looking for is, that that all columns adapt to the longest collumn.
Thank you for your precious Help ;-)
Posted 1 year ago #
No worries! Sorry about that - I misunderstood the question!
Check out this link - Equal heights using jQuery. Now, I don't know if you are familiar with javascript or comfortable modifying any .php or .js files, but I'll walk you through how to do it. Hopefully it works like a charm!
1 - Navigate to your theme's directory. Open up header.php
2 - Create a file that is called plugins.js and put it inside the /js folder inside of /wp-includes.
3 - Open up that plugins.js file and paste the following code:
/*--------------------------------------------------------------------
* JQuery Plugin: "EqualHeights"
* by: Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
*
* Copyright (c) 2008 Filament Group
* Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
*
* Description: Compares the heights or widths of the top-level children of a provided element
and sets their min-height to the tallest height (or width to widest width). Sets in em units
by default if pxToEm() method is available.
* Dependencies: jQuery library, pxToEm method (article:
http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)
* Usage Example: $(element).equalHeights();
Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
* Version: 2.0, 08.01.2008
--------------------------------------------------------------------*/
$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px || !Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};4 - After you see the <script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>, paste the following: <script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js></script>
5 - Directly after that piece of code (or in the footer.php file... really, just anywhere other than above where you included plugin.js), insert the following:
<script type="text/js">$('#bd').equalHeights();</script>
That should fix everything, and hopefully it does! Let me know if you have any questions or can't get it to work! I tried to be thorough...
Posted 1 year ago #
Hi Connor.
You cannot imagine my joy when I saw your reply today! I am so thankful!!!
Unfortunately I am in a hurry and leaving for the weekend and only coming back on sunday evening ... so, I will surely not forget you and will give it a try monday morning and OF COURSE let you know wif it worked! It sounds good, thank you again ... and I'll write my report on it on Monday.
Meanwhile you have a great weekend!!!!
Diana :-)
Posted 1 year ago #
Hi Connor,
I created the plugins.js file and put it on the right place.
Now I have a question:
Do I have to put
<script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>
AND this
<script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js></script>
in the header php? Because I don't see the first script: <script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script> anywhere...
and after this I have to paste this script in the footer for example?
<script type="text/js">$('#bd').equalHeights();</script>
Those scripts have to be pasted before the <head> section? of a document?
Posted 1 year ago #
Hi Diana,
You do not need to put <script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script> - you actually already have included that! However, you will need to put <script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js></script>. You just have to make sure that second chunk of code is AFTER the first one (where you reference jQuery) in the header.php file. You dont see the first script because you are probably using a function (like <?php wp_enqueue_script("jquery"); ?>) to load it.
After putting that second chunk of code (plugin.js), you will want to place <script type="text/js">$('#bd').equalHeights();</script>.
All of that is to go IN the <head> section of your header.php file. Not after.
Hope that helps!
Best,
Connor
[sig moderated as per the Forum Rules]
Posted 1 year ago #
Ok, let me confirm where I put what type of code:
I created the plugins.js and put it inside the /js folder inside of /wp-includes.
IN the header.php file, IN the <head> I insert :
<script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js> that should be after
<script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script> ... which I don't see ...
And where do I insert <script type="text/js">$('#bd').equalHeights();</script> ???
Posted 1 year ago #
Yes, that is all correct.
If you see something like <?php wp_enqueue_script("jquery"); ?>, that is what is dynamically inserting the piece of code you aren't seeing right now. If you don''t see anything like that, then just put all of this stuff just before the </head> tag.
You will insert <script type="text/js">$('#bd').equalHeights();</script> directly after <script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js>
Hope that works!
Connor
[sig moderated as per the Forum Rules]
Posted 1 year ago #
Connor, I hate to be a pain in the bleepç%&*! but this is waht I have now:
<script src="http://www.refernet.lu/wp-includes/js/jquery/jquery.js?ver=1.4.2" type="text/javascript"></script>
<script type="text/js" src="http://www.refernet.lu/wp-includes/js/plugin.js></script>
<script type="text/js">$('#bd').equalHeights();</script>
</head>
in the header.php
AND
I created this plugin.js as you told
BUT
it is not working :o/
WHERE SHOULD
<?php wp_enqueue_script("jquery"); ?>
be visible?
Posted 1 year ago #
There is a nice plugin that handles this: WP Equal Columns
This topic has been closed to new replies.
