title: Dynamically call fancybox
body: <p>I want to dynamically call fancybox to load an iframe. The URL of the iframe will be comprised of some of the elements on the form. I have been using something like this and it works:</p>
  
  <pre><code>&lt;!--***************************************************************--&gt;
  &lt;!--this allows fancybox to be called using a dynamic link--&gt;
  &lt;div id="hidden_clicker" style="display:none"&gt;
      &lt;a class="various fancybox.iframe" id="hiddenclicker" href="http://whatever.com" &gt;Hidden Clicker&lt;/a&gt;
  &lt;/div&gt;
  &lt;!--***************************************************************--&gt;
  </code></pre>
  
  <p>then the script :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $(".various").fancybox({
              maxWidth    : 800,
              maxHeight   : 600,
              fitToView   : false,
              width       : '70%',
              height      : '70%',
              autoSize    : false,
              closeClick  : false,
              openEffect  : 'elastic',
              closeEffect : 'none'
          });
      });
  
      function callBoxFancy(my_href) {
  
          var j1 = document.getElementById("hiddenclicker");
  
          j1.href = my_href;
  
          $('#hiddenclicker').trigger('click');
  
      }
  </code></pre>
  
  <p>then to load the iframe:</p>
  
  <pre><code>    $('#addtownsubmit').click(function() {
          var $url='/areastructure/addtown/';
          var $get='countryid/'+ ($('#country').val()) + '/regionid/'+ ($('#region').val())+ '/provinceid/'+ ($('#province').val())+ '/originatingcontroller/account/originatingaction/editcontactdetails/'
          callBoxFancy($url+$get+'iframe/1');
      return false;
  
  });
  </code></pre>
  
  <p>Is there a way to improve this code so that the I don't have to include the html code. Surely jquery could create this hidden div for me?</p>