Jeroen W Jeroen W - 2 months ago 7
jQuery Question

Change element on page according to element in iFrame on same domain

reading a lot of posts and answers about accessing content of an iFrame,
I try and combine these to my particulair case.

Unfortunately I can't get it to work, so maybe I'm missing some mental ability to add the dots ;)

What I try to do is as follows:

The page loaded in my IFrame (same domain) contains a menu, where my active items have

class="menuactive" data-rel="SomeName"
. 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.

So where in the iframe the links are for instance
<a href="bla" class="menuactive" data-rel="Fashion">Fashion</a>
, on the parent page my elements are
<span id="Fashion">Fashion</span>
, on which I want to add a class
class="active"
at the same time as my iFrame reloads and adds the
class="menuactive"
to a menu item.

This seems the most logical approach:

Javascript in pages loaded in iFrame:

$(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");

});
});
});


Bit this doesn't work at all,

I wished I could make a jsFiddle but I can't seem to find out how to construct an iFrame there.

Any thought would be greatly appreciated!, thanks guys

kind regards,
Jeroen

Answer

Yeh!

I fixed it, using:

$('div.menu a').click(function() { 
    $('a.active', window.parent.document).removeClass("active"); 
    $('#' + $(this).attr('data-rel'), window.parent.document).addClass("active");
});

Cheers, Jeroen