Jquery menu states/addClass, not working with Iframe.
I've got a problem.
I've built a navigation page to be used in an iframe across a site. I've made menus like this in PHP and using arrays but I cannot use PHP here so I thought I could reproduce it in JQuery.
I am able to addClass "on" to selected menu items using the following:
-
<script type="text/javascript">
$(function(){
$page = jQuery.url.attr("file");
if(!$page) {
$page = 'index.html';
}
$('ul.navigation li a').each(function(){
var $href = $(this).attr('href');
if ( ($href == $page) || ($href == '') ) {
$(this).addClass('on');
} else {
$(this).removeClass('on');
}
});
});
</script>
It's using a URL parser to grab the current page and compare links in the navigation and setting a state or class "on" to the current matching page. This works fine, however, when inside an Iframe I run into trouble.
I'm not that great with Jquery, but I'm assuming some sort of "window.parent.document" has to be added somewhere.
I have a test page set up that I am working on:
http://skylightspecialist.com/Solutions/Marketing_Tools/iframe_test.htm
The navigation for the test page:
- <ul class="navigation">
<li><span><a class="" target="_parent" href="iframe_test.htm">Home</a></span></li>
<li><span><a class="" target="_parent" href="about_test.htm">About</a></span></li>
<li><span><a class="" target="_parent" href="solutions_test.htm">Solutions</a></span></li>
<li><span><a class="" target="_parent" href="contact_test.htm">Contact</a></span></li>
</ul>
The Iframe:
- <iframe src="main_nav_test.htm" id="menuframe" width="137px" frameborder="0" height="900px">
<p>Your browser does not support iframes.</p>
</iframe>
Thanks