CODEWITHSUNDEEP
jqueryhtml
Genevieve
Genevieve

Reputation: 11

Set sidebar DIV equal in height to a sibling content DIV using jQuery--not working for me

Here's a page where I'm trying this.

I got my divs to all look the same height with a CSS hack. Now I'm trying to set the height of the right sidebar so that it is never longer than the main content of the page.

This is the script on the page right now:

<script type="text/javascript">
   $(".Right2").css({'height':($(".Content").height()+'px')});
</script>

It does not work, obviously. All I want is for .Right2 to me the same height as .Content, and it needs to be determined dynamically.

Can somebody help a girl out? Thanks!

(Obviously, this isn't my product yet. I'm still bashing away at layout.)

Upvotes: 1

Views: 472

Answers (3)

papaiatis
papaiatis

Reputation: 4291

Try this:

<script type="text/javascript">
   $(document).ready(function(){
       $("#Trial2").css('height',$("#Trial1").height());
   });
</script>

In your code above you are selecting elements with specific class. Since more elements can have the same class then $(".myClass") may return an array and not a single object. Use ID's instead as in my example above and you will get rid of future problems!

And of course, you shouldn't forget to run the code after the DOM is ready!

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

Your code works fine, it just needs to be wrapped. I you don't wrap your code in ready or load then the DOM elements don't exist at your time of code execution. So nothing happens. 

<script type="text/javascript">
$(document).ready( function() {
   $(".Right2").css({'height':($(".Content").height()+'px')});
});
</script>

Upvotes: 1

vero
vero

Reputation: 136

The div your targeting for height does it have a set or fluid height?

Upvotes: 0

Related Questions