title: Passing two different arguments to function
body: <p>I have written some jQuery functions, and recently realized I needed to reuse the code for another situation. I refactored the code to accept a selector as an arguement, so I can now use for case 1, and case 2. However, when I execute my functions in <code>document.ready</code> I get weird results.</p>
  
  <pre><code>$( document ).ready(function() {
      imageCalc('.com-background &gt; img');
      setImageDims('.com-background &gt; img', '#main-content');
      imageCalc('.blog-entry-content iframe');
      setImageDims('.blog-entry-content iframe', '#content');
  });
  </code></pre>
  
  <p>It should be noted, these selectors do no show up on the same page. Also, when I only run one instance of <code>imageCalc()</code> and <code>setImageDims()</code> These functions work just fine. Here are the functions in question..</p>
  
  <pre><code>function imageCalc(selector) {
      var obj=$(selector);
      $imgWidth = obj.width();
      $imgHeight = obj.height();
      $imgAspectRatio =  $imgHeight / $imgWidth;
      // $(selector).css('margin-left', function( calcMargin ) { return parseInt($('.main-content').css('padding')) * -1 + "px"; }); fix for ie
      obj.css('margin-left', '-10px' );
  
  }
  function setImageDims(selector, content_area) {
      var container = $(content_area);
      $(selector).css('height', function() { return $imgAspectRatio * container.width(); });
      $(selector).css('width', function() { return container.width() + 20; });    
  }
  </code></pre>
  
  <p>In summary, all the code works just fine, when I only have each function called only ONCE in <code>document.ready</code> but I need to use this code for 2 scenarios, how can I do this?</p>