title: How to do resolve the 'jQuery not defined' error in Google Chrome?
body: <p>Ok, sometimes the jQuery is defined and sometimes it is not. Here is the following jQuery code I am using on <a href="http://devs.dream-portal.net/dp11/index.php" rel="nofollow noreferrer">this page</a>.</p>
  
  <p>If it is defined, the columns are all the same width, else the two-side columns are 200 pixels and the middle is 100% width. I am trying to get jQuery defined at all times here, but can't figure out what the problem is exactly…</p>
  
  <p>Any help would greatly be appreciated!</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  if (!window.jQuery) {
     var script = document.createElement("script");
     script.type = "text/javascript";
     script.async = false;
     script.src = "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
     var oScripts = document.getElementsByTagName("script");
     var s = oScripts[0];
  
     s.parentNode.insertBefore(script, s);
  }
  
  var totaltds = 0;
  function resizeColumns() {
      jQuery(document).ready(function($) {
          $('tr[class^="tablerow"]').each(function() {
              var tds = $(this).children('td[class^="tablecol"]').length;
              if (tds &gt; totaltds)
                  totaltds = tds;
          });
          var contentPadding = $("#content_section").css('padding-left');
          contentPadding = parseInt(contentPadding.substring(0, contentPadding.length - 2));
          var subPadding = contentPadding / totaltds;
          $(window).bind("resize", function(){
              for(var i = 0; i &lt; totaltds; i++) {
                  var colWidth = ($("#main_content_section").width() / totaltds) - subPadding;
                  $(".tablecol_" + i).css({'width': colWidth + 'px', 'max-width': colWidth + 'px', 'min-width': colWidth + 'px'});
              }
  
          }).trigger("resize");
  
          $("#hideMe").parent().parent().parent().hide();
      });
  }
  
  if (document.addEventListener)
      document.addEventListener("DOMContentLoaded", resizeColumns, false);
  else
      addLoadEvent(resizeColumns);
  
  &lt;/script&gt;
  
  &lt;div id="hideMe"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>All of this code is inserted into the body of the HTML, as it is inserted into a <code>Module</code> on that page, and needs to be that way. What am I doing wrong here? Is there a better way to define jQuery so that it is always defined?</p>
  
  <p>Chrome errors are almost all of the time on the line <code>jQuery(document).ready(function($) {</code> saying that <code>jQuery</code> is not defined.</p>