jQuery Forum

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:

1. <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:

1.         <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:

1.     <iframe src="main_nav_test.htm" id="menuframe" width="137px" frameborder="0" height="900px">
           <p>Your browser does not support iframes.</p> 
       </iframe>

Thanks