Why doesn't any jquery equal columns plug-ins work?

I cannot seem to get my 3 column layout to equalized heights with any of the jquery plug ins I have tried, and I have tried all of them. I put an alert in the code to see is the script even works and the alert pops up but my columns are still empty. My only reason for needing equal heights is so that the borders extend the full length of the page (center column).
Since the alert pops up, I assume the script page is being accessed
Why are my jquery scripts for the columns not working?


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $.fn.equalizeHeights = function(){
    return this.height(
        Math.max.apply(this,
            $(this).map(function(i,e){
                return $(e).height()
            }).get()
        )
    )
}

	
 alert("hi");

});

I have tried these plug-ins with and without the alert and only the alert works.
I also have other div’s inside the left, center and right div’s…would this be giving me problems?Thanks!

Hi there,

Could you post a link to a page where I could see the problem (i.e. the columns not being equalized, but the alert still firing).
If you can, I don’t mind having a look at this for you.

I’ll be offline for a bit (it’s night here and I have to work tomorrow), but in the meantime don’t forget that it is perfectly possible to achieve equal height columns with CSS.
Here’s a page which explains it really well: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

I already tried the css link that you posted and it made my div’s go haywire. I figured I would try something with the least code and that looked to be jquery. This is my first experience with it, so I really don’t have a clue what I’m doing, just want to fix my border height. Anyway, I uploaded two pages with two different equal column height plug-ins and one of them the alert will pop up and the other it does not. Go to this page and it should give the pop-up alert, then scroll down to the bottom and click the comments button. The comment page has a different script for the collumns and the alert does not pop-up. See if you can tell what I’m missing, I’m sure something is not sinking in or just not finding the right info. Thanks for looking. http://www.psychiclotto.org/lawofattraction.html The other pages on the site have no jquery loaded.
The borders on the other pages are set heights.

Hi,
Just a quick one before work.
I currently only see one column on your page. Can you tell me the names of the columns you want to be equal (e.g. div#col1, div#col2, div#col3)

The div’s are left, content and right respectively, they are inside div “container”. The left and right columns are almost empty in all but one page the home page. There is also a header and footer.

Hi,

So, I had a look at your code.
There are a number of problems.

[LIST=1]
[]Your mark-up is invalid. For example, you have two opening <body> tags and several unclosed <div> tags.
[
]I couldn’t actually find where you are referencing any jQuery plugins. You define a "equalizeHeights " function at the top of your code, which is never called.
[*]You close the container div, before you open the content div. This explains why the other (pure CSS) method wouldn’t work.
[/LIST]I couldn’t actually find the specific jQuery plugin you mention, so I took the first one I found via Google: http://www.cssnewbie.com/equalheights-jquery-plugin/
And then I applied it to your mark-up.
This should do what you want:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
  <meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>
  <title>Law of Attraction pick winning lottery numbers with psychiclotto.org</title> 
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript" src="http://www.cssnewbie.com/download/jquery.equalheights.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){ 
      $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {
          if($(this).height() > tallest) {
            tallest = $(this).height();
          }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
          $(this).height(tallest).css("overflow","auto");
        });
      }  
          
      $(".equalize").equalHeights();
    });
  </script>
  
  <style>
  body {
    height: 100%;
    width: 100%; 
    font-family:   Arial, sans-serif, Helvetica; 
    font-weight: bold;
    line-height: 110%;
    background-color: #190033;
    margin:  0;
    padding: 0;
  }
  
  #container {
    width: 100%;
    background: #190033;
  }
  
  #header {
    height: 150px;
    width: 100%; 
    background: url(http://www.psychiclotto.org/new2header.png) top left no-repeat, url(http://www.psychiclotto.org/trheader.jpg) top right no-repeat; 
  }
  
  #centerheader {
    position: absolute;;
    margin-left: auto;
    margin-right: auto;
    padding-left:440px;
  
  }
  
  #aligncenter {
    width:67%;
    height: 15px;
    border-top:6px double #B0C4DE;
  }
  
  #left { 
    color: #B266FF;
    width: 20%;
    float: left;
    font-weight: bold;
    font-size: 14px;
    border-left: 4px double #B0C4DE;
    padding-left: 5px;
  }
  
  #content {
    background: url(http://www.psychiclotto.org/centerslice.jpg) top center repeat-y, url(http://www.psychiclotto.org/sparkle.gif) 100% 2% no-repeat;
    float: left;
    color: #B266FF;
    width: 58%;
    height: relative;
    text-align: left;
    font-weight: bold;
    font-size: 14px;
  }
  
  #magic {
    background-image: url(http://www.psychiclotto.org/smsparkle.gif);
    background-repeat: no-repeat;
    background-position: 10% 15%;
  }
  
  #cwords {
    color: #B266FF;
    margin-left: 35px;
    margin-right: 35px;
    margin-top: 0px;
    font-weight: bold;
    font-size: 14px;
  }
  
  #right { 
    border-right: 5px double #B0C4DE;
    color: #B266FF;
    width: 20%;
    float: right;
    font-weight: bold;
    font-size: 14px;
  }
  
  #nav {
    padding-top: 0px;
    width: 160px;
    height: 100%;
    font-size: 14px;
    text-align: center;
  }
  
  #centermass {
    border-right: 3px double #FFD700;
    border-left: 3px double #FFD700;
  }
  
  #footer {
    width: 100%;
    height: 140px;
    position: relative;
    bottom: 0;
    background: url(http://www.psychiclotto.org/blfooter.jpg) bottom left no-repeat, url(http://www.psychiclotto.org/brfooter.jpg) bottom right no-repeat;
  } 
  
  .clearfooter {
    height: 0px;
    clear: both;
  }
  
  h1 {
    color: #CC99FF;
    font-family: segoe script, Arial;
    font-weight: bold;
    font-size: 40px;
  }
  
  h2 {
    color: #B0C4DE;
    font-size: 17px;
    font-weight: bold;
    line-height: 110%;
    font-family:  Arial;
  }
  
  h3 {
    color: #B0C4DE;
    font-weight: bold;
    font-family: segoe script;
    sans-serif, segoe script;
    font-size: 18px;
  }
  
  h4 {
    color: #B0C4DE;
    font-family: segoe script, Arial;
    font-weight: bold;
  }
  
  a:link {
    text-decoration: none;
    color: #ffffff;
  }
  
  a:visited {
    color: #ffffff; 
  }
  
  a:hover {
    color: #CC99FF;
  }
  
  a:active {
    color: #01CDFF;
  }
  </style>
</head>

<body>
  <div id="container">
  
    <div id="header">
      <center><div id="aligncenter"></div></center>
      <div id="centerheader"><img src="http://www.psychiclotto.org/gradientflare.gif"></div>
    </div><!--header-->
  
    <div id="left" class="equalize">
      <img src="http://www.psychiclotto.org/heart.png">
    </div>
  
    <div id="content" class="equalize">
      <center><div class="aligncenter" style="width:220px;height:0;border-top:2px solid #CC99FF;font-size:0;">-</div></center>
      <h1 style="text-align: center; padding-bottom: 60px;">The Law of Attraction</h1>
      
      <div id="cwords" style="margin: 35px;">
        <h2>WHAT IS IT ?</h2>
        <p>So what is the law of attraction? And how will you be able to use it and apply it in your own life? The answer is plain and simple. The law of attraction states that whatever you think
         about, you basically attract it. In other words, whatever your dominant thoughts are, it will always find its way and make its own manifestation. Now, if you are prone to thinking nothing 
        but negative thoughts, then you are guaranteed that you will be getting nothing but negative results as well. </p>
        <br>
        
        <h2>HOW DOES IT WORK?</h2>
        <p>There are a growing number of resources and information on this topic, so the question is, what is the best book on the Law of Attraction? The answer to this is pretty 
        easy&#8230; obviously the best book on the Law of Attraction is "The Secret" (haha). Okay, so you have probably already read the secret, so where to go from here?</p>
        <br>
        
        <h2>GOOD READ :</h2>
        <p><b>Everything</b> is made up of energy. The Universe attracts energy of the same frequency.</p>
        <p>While the Law of Attraction is important to understand, there are other laws as well that can help you transform yourself to a higher level of consciousness. These two other laws are called
         the Law of Association and the Law of Repetition. </p>
        <br>
        
        <h2>A LITTLE MORE :</h2>
        <p>Do you recognize what your deep-seated subconscious influence on financial abundance is? Here is the single most effective way to understand what your vibrational equivalent to 
        money is. Take a gander at your bank accounts. What is your current situation with money? Your bank account will tell you the answer without fail. </p>
      </div><!--cwords-->
    </div><!--content-->
  
    <div id="right" class="equalize">
      <center>
        <div id="nav">
          <a href="index.html">HOME</a><br>
          <a href="about.html">ABOUT</a><br>
          <a href="chakras.html">CHAKRAS</a><br>
          <a href="meditation.html">MEDITATION</a><br>
          <a href="lawofattraction.html">LAW OF ATTRACTION</a>
        </div>
        <h3>Instant Psychic Energy Boost !</h3>
        <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
          <input type="hidden" name="cmd" value="_s-xclick">
          <input type="hidden" name="hosted_button_id" value="JRCMY8SLUSGZA">
          <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif"  name="submit" alt="PayPal - The safer, easier way to pay online!">
          <img alt=""  src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
        </form>
      </center>
    </div><!--right-->
  </div> <!--container-->
  
  <div class="clearfooter"></div>
  
  <div id="footer">
    <center style="padding-top:125px;">
      <div class="aligncenter" align="center" style="width:63%;height:0;border-top:6px double #B0C4DE;"></div>
    </center>
  </div>
</body>
</html>

Please be aware however, that this is not a clean solution (just try resizing the browser window).
If you would prefer, I can show you how to do this in pure CSS.
Just let me know.

HTH

I see what you mean about re-sizing, wow. I figured that the least amount of code would be the best remedy, I’m new at this and only have this one website. You seem to be quite seasoned at this coding stuff and I trust your judgement on it. You seem to feel as though the css method is superior and I would give it a try if it will work on all of my pages. Some of them have problems, like my home page (index.html), if I don’t close the header with two </div> tags, the contents of the left column occupy the header and the extra </div> tag closes the container div. I can’t figure out where the problem is other than a “moon module” in the header that loads from another server.
I’ll give anything that works a try, I’m having problems with the above jquery on my other pages because of the problems I mentioned. If you think css is the way to go then I’m more than willing to give it a shot.
I surely appreciate you putting your time into this, thank you. Take a look at my home page, you may want to re-consider if you think that other page’s code was bad. thanks

I see that you used external links for the jquery library and images, it seems to slow down loading. Is there a particular reason for doing it that way?

Well, I got everything working and would be fine except for a horizontal scroll bar at the bottom of the left column on the home page and a verticle scroll bar on the comment page. Other than that, the jquery seems to work good so I’ll try getting rid of those scoll bars and I will be satisfied. Thank you so much for your time, you have helped a great deal.

Hi there,

Sorry it’s taken a while to get back to you.

With the images, this was just for my ease of experimentation (so that I could just copy and paste your css). There is no reason for you to do this.

With the jQuery, this was also for my ease. However, there are several advantages of hosting your jQuery on a CDN.
If you’re interested in finding out more, this covers it quite comprehensively: http://stackoverflow.com/questions/2180391/why-should-i-use-googles-cdn-for-jquery

So, regarding your site, I have put together a simple template for you to have a look at.
It is much cleaner than using JavaScript to resize things once the page has loaded and should work well in all major browsers.
I have used a solid border on the outer wrapper, but you could replace it with an image to have it look like the top and bottom borders.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    * {margin:0;padding:0}
    html, body{height:100%;} 
    
    body {
      background-color: #190033;  color: #fff;
      position:relative;/* for ie7*/
    }
    
    #outer{
      min-height:100%;
      margin:0 10px;
      border-left:2px solid #B0C4DE;
      border-right:2px solid #B0C4DE;
      color: #000;
    }
    
    * html #outer{height:100%;} /*IE treats height as min-height anyway*/
    
    #header{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:150px;
      overflow:hidden;
      color: #fff;
      background: url(http://www.psychiclotto.org/new2header.png) top left no-repeat, url(http://www.psychiclotto.org/trheader.jpg) top right no-repeat; 
    }
     
    #footer {
      width:100%;
      clear:both;
      height:150px;
      color: #fff;
      text-align:center;
      position:relative;
      margin-top:-150px;/*drag footer from below the fold*/
      background: url(http://www.psychiclotto.org/blfooter.jpg) bottom left no-repeat, url(http://www.psychiclotto.org/brfooter.jpg) bottom right no-repeat;
    }
    
    .outerwrap {
      float: left;  
      width: 100%;
      padding-top:151px;/* to clear header*/
      margin-right:-3px;/* to stop columns dropping*/
    }
    
    #innerwrap{
      float:right;
      width:100%;
      position:relative;
      padding-bottom:152px;/* clear footer*/
      margin-left:-1px;
    }
    
    .clearer{
      height:1px;
      overflow:hidden;
      margin-top:-1px;
      clear:both;
    }
    
    .divider{
      width:68%; 
      margin: 0 auto;
      border-top:2px solid #CC99FF; 
      border-bottom:2px solid #CC99FF; 
      height:2px;
    }
    
    #footer .divider{
      position:relative; 
      top:144px;
    }
    </style>
  </head>
  
  <body>
    <div id="outer">
      <div class="outerwrap">
        <div id="innerwrap">
          <div style="float:left; width:20%; background:yellow;">Left</div>
          <div style="float:left; width:60%; background:red;">Center</div>
          <div style="float:left; width:20%; background:green;">Right</div>
        </div>
        <div class="clearer"></div>
      </div>
      <div class="clearer"></div>
    </div>
    <div id="footer"><div class="divider"></div></div>
    <div id="header"><div class="divider"></div></div>
  </body>
</html>

This is based on a template by Paul O’Brien, which you can find here: http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm.

Please also be aware that IE8 and IE7 have some problems setting the background image the way you are: http://reference.sitepoint.com/css/background

I hope that helps you.

Thanks, looks very neat. I will be trying that when I get up, it’s 3:am. I found a jquery that work with dynamic content (my home page) and resizing doesn’t affect it but on the comment page, the footer does not expand to the page height. It sits in the center of the page and the comments overflow out of the div. I hope this other code works well, I’m thinking you’re right about the script, it messes with the other code too much. Oh well, thanks again, I have learned much today.

Your checking SitePoint at 3a.m.??
Cool! You seem to be even more addicted to the Internet than me :slight_smile:
In which country are you, just out of interest?

I am in California and hopefully moving very soon to the southeast U.S. (Florida), I don’t care much for Cali. anymore.