Skip navigation
Currently Being Moderated

Highlight current menu item whose page is displayed in an iFrame

Oct 18, 2012 11:22 AM

Tags: #iframe #menu #highlighted_text



Looking for the Holy Grail here...


So the parent page has static menu and an iframe which then loads in a specific pages as the user clicks on the menu items (which are ul li tags).


I would like to be able to highlight a menu item based on the page content being displayed in an iframe. It seems to be quite difficult to do for this style of page load using iframe method. I know it would be easier using php, but I can only use iframe (long story).


When page 1 is displayed in the iframe, I would like for the corresponding menu item to be highlighted.


I'm hoping the answer is out there somewhere as iframe has been around forever. If you would like to see my code, I'm happy to provide this.



  • Currently Being Moderated
    Oct 18, 2012 11:33 AM   in reply to Rezu

    Getting the buttons to display a certain way when clicked seems to be what you're truly after (the iframe content changing would be a secondary action on the click).


    There are a few ways you could do it.


    One would be to use a group of Image Swap Behaviors from within DW set to OnClick for the menu items.


    Each button swaps the other buttons to their "off" state while setting itself to an "on" state when clicked. The link would then load the iframe content.


    You could also do it with CSS and a simple class swapping javascript. Basically you would create an "off" and "on" class in the css. Then on the links, you would set the javascript action onclick to change the classes in a similar way to my previous example.


    I can give you a step by step, depending on your level of coding experience. The "all DW" way will create some relatively heafty code, the css way is much smaller.

    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 12:55 PM   in reply to Rezu

    Sure, here you go...


    1. Add this code between your <head> tags:


    <script type="text/javascript">

        function offclass(id)

        {document.getElementById(id).className = 'class_off';}

        function onclass(id)

        {document.getElementById(id).className = 'class_on';}



    2. In your css, create your on and off styles (I used <a> you can use <li> the same way)...


    a.class_on {



    a.class_off {




    3. Add id's (individual to each link), classes (set to the off class you make) and onclick events (one to turn the link on and several to turn off the others) to your links...


    <a id="link1" class="class_off" href="" target="mr_jones" onclick="onclass('link1'); offclass('link2'); offclass('link3');">Link 1</a>

    <a id="link2" class="class_off" href="" target="mr_jones" onclick="onclass('link2'); offclass('link1'); offclass('link3');">Link 2</a>

    <a id="link3" class="class_off" href="" target="mr_jones" onclick="onclass('link3'); offclass('link1'); offclass('link2');">Link 3</a>


    4. Give your iframe the name used for your target and a base "on page load source" (I used a # so it's blank on load)...


    <iframe id="mr_jones" name="mr_jones" width="420" height="315" src="#" frameborder="0"></iframe>


    That's it. As you increase the number of links, you just need to make sure you have an offclass for each new one added in to turn those off when you click.

    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 1:25 PM   in reply to Rezu

    Yes, with that particular bit of javascript, you would have 34 each.


    It's really designed for smaller menu syetems, sorry about that.


    Let me see if I can't cobble something together that will be a bit more efficient. Someone else here may have better solution as well before I can get back.

    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 1:47 PM   in reply to Rezu

    OK. In each link, you'll have


    onclick="offclass(); onclass('linkid');"


    Where linkid above will be the id of the link you are turning on. the offclass () will be empty and placed before the onclass because we'll make all of them turn off up in the javascript first. Change the script to this...


    <script type="text/javascript">

        function offclass()

        {document.getElementById('link1').className = 'class_off';

         document.getElementById('link2').className = 'class_off';

         document.getElementById('link3').className = 'class_off';


        function onclass(id)

        {document.getElementById(id).className = 'class_on';}



    Then you just add a new line under the offclass function for each of your 34 links. It will be a long list, but it will only need to be done once within the script. All of the links themselves will have the exact same code with just the id of the onclass being changed.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points