A problem in same height jquery script (wordpress template)

JavaScript
1

hello

hey

my site is in this address: z-ls DOT info
it’s a wordpress site.

a added this jquery code to cause the post content (c2) and the widget(widget) to be in the same height,
but it doesn’t move, something cause it to stuck at this point


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var colHeight = Math.max($('#c2').height(), $('.widget').height());
$('#c2, .widget').height(colHeight);
});
</script>

a line before the last one i tryed:
$(‘.widget’).height() = colHeight + 50;

what is wrong ?

thanks

2

WordPress comes with jQuery pre-enabled so you don’t need to request the source for it again, also you will need to use jQuery instead of $ as by default WordPress forces the jQuery.noConflict() method to avoid library conflicts.

3

hey chris

thanks for your reply.
i know it’s enabled only if i use wp_enqueue_script function.
any way i sayed to myself let’s try it and …
the samething no change

4

I tried just the code you posted, and it seemed to work fine. Can you link to a live example? Can somebody please help me with my reading comprehension?

5

sure

http://z-ls.info/

the bottom near the footer

6

Found the problem:

The #c2 element has 1507px height, a 30px bottom padding, and a 10px bottom border.
The .widget element has 1507px height, a 10px top padding, a 10px bottom padding, and a 10px bottom border.

After you add everything up, the #c2 element is 10px taller than the .widget element, even though they both have a height of 1507px.

It’s your call on how you want to fix it, but the simplest solution is probably to just change the #c2’s bottom padding to 20px.

7

amyzing

thanks very much

if you don’t mind i’m asking i can wait to the morning :slight_smile:

  1. how did you calculated both elements heights ? in the final source code i can’t see any height output for this elements
  2. in cases like this wich elements envolved ? if i understand from your answer: padding and border
    maybe i don’t understand what border is but I would never guess it’s a factor in the final height
8

  1. By using Chrome’s awesome Web Inspector, basically. If you right-click on the page, you can “Inspect Element” and get a wealth of information.

  2. The problem is, what do you mean when you say “height”? The browser thinks you’re only talking about the height of the content–not including padding or border. So it did what it thought you wanted it to do.

This is one of those things I forget every single time I mess with an element’s height. It doesn’t look quite right, and then I realize that I accidentally included some padding as well…

9

thanks a lot for the help

10
Off Topic:

@sdleihssirhc; I love your “ha” :smiley: