title: Change element on page according to element in iFrame on same domain
body: <p>reading a lot of posts and answers about accessing content of an iFrame, 
  I try and combine these to my particulair case.</p>
  
  <p>Unfortunately I can't get it to work, so maybe I'm missing some mental ability to add the dots ;)</p>
  
  <p>What I try to do is as follows:</p>
  
  <p>The page loaded in my IFrame (same domain) contains a menu, where my active items have <code>class="menuactive" data-rel="SomeName"</code>. My parent page contains a div with links (#portfolioslider) that have id's corresponding to the data-rel attributes of the links in the iFrame. </p>
  
  <p>So where in the iframe the links are for instance <code>&lt;a href="bla" class="menuactive" data-rel="Fashion"&gt;Fashion&lt;/a&gt;</code>, on the parent page my elements are <code>&lt;span id="Fashion"&gt;Fashion&lt;/span&gt;</code>, on which I want to add a class <code>class="active"</code> at the same time as my iFrame reloads and adds the <code>class="menuactive"</code> to a menu item.</p>
  
  <p>This seems the most logical approach:</p>
  
  <p>Javascript in pages loaded in iFrame:</p>
  
  <pre><code>$(function() { 
      $('div.menu a.menuactive').ready(function() {
  
          $(window.self.top).contents().find('#portfolioslider a').each(function() {
               $(this).removeClass('active');
               $('#$(this).attr('data-rel')).addClass("active");
  
          });
      });
   });
  </code></pre>
  
  <p>Bit this doesn't work at all,</p>
  
  <p>I wished I could make a jsFiddle but I can't seem to find out how to construct an iFrame there.</p>
  
  <p>Any thought would be greatly appreciated!, thanks guys</p>
  
  <p>kind regards,
  Jeroen</p>