Skip navigation
Currently Being Moderated

Targetting elements via javascript... how?

Aug 15, 2012 12:27 PM

Tags: #javascript #css

The following is code for a navigation menu where only one option appears lit at a time (based on code sent to me by the amazing Jon Fritz II).

 

CSS:

a#button0, a#button1 {

    display:block;

    float:left;

    width:55px;

    height:67px;

    margin:0;

}

a#button0.inactive{ background:url(/carousel_home.png) -55 0 no-repeat }
a#button0.active{ background:url(/carousel_home.png) 0 0 no-repeat }
a#button1.inactive{ background:url(/carousel_vip.png) -55px 0 no-repeat }
a#button1.active{ background:url(/carousel_vip.png) 0 0 no-repeat }

 

HTML:

<a href="#" onclick="changeClass(this)" class="inactive menu" id="button0"> </a>

<a href="#" onclick="changeClass(this)" class="inactive menu" id="button1"> </a>

 

JSCRIPT:

<script>

function changeClass(elClass) {

  var divsLength =  document.getElementsByClassName("menu").length;

  for (i = 0; i < divsLength; i++) {

    document.getElementsByClassName("menu")[i].className = "inactive menu";

  }

  elClass.className = "active menu"; 

}

</script>

 

What this does is swap the class of a clicked button (in a menu) while reverting all the other buttons back to their original state, so only 1 button appears "lit" at a time. The A tags are used as block elements that simply shift the background image so as to produce a "lit" and "unlit" state.

 

My question is... via javascript (or anything else), is it possible to trigger class changes for the buttons from an area OUTSIDE the menu? In other words, can we make a text link on the page itself trigger which button in the menu to "light up". Something like <a href="javascript:slide('div1'); javascript:(go light up button1)">Example</a>

 

The reason is that this menu is not the ONLY way to get from one section to another. So if I click on a link in another DIV on the same page that takes me to another area, ideally, I'd like to see the button representing that area in the nav menu light up like it's been clicked on -- even if it hasn't. And of course, the other buttons would NOT be lit.

 

Thanks!

 
Replies
  • Currently Being Moderated
    Aug 15, 2012 5:06 PM   in reply to jyeager11

    My question is... via javascript (or anything else), is it possible to trigger class changes for the buttons from an area OUTSIDE the menu? In other words, can we make a text link on the page itself trigger which button in the menu to "light up". Something like <a href="javascript:slide('div1'); javascript:(go light up button1)">Example</a>

     

    Sure - using the same method Jon already gave you.  The javascript "getElementById()" function will target any element on the page.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 4:29 AM   in reply to jyeager11

    Consider this code -

     

    <script type="text/javascript">

    function setClass(id) {

      var divsLength =  document.getElementsByClassName("menu").length;

      for (i = 0; i < divsLength; i++) {

        document.getElementsByClassName("menu")[i].className = "inactive menu";

         // this sets all menu elements to inactive

      }

              document.getElementById(id).className='active menu';

       // this sets the specific menu element to active

    }

    </script>

    </head>

     

     

    <body>

    <p><a id="button1" href="#" class="inactive menu">something</a></p>

    <p><a id="button2" href="#" class="inactive menu">something2</a></p>

    <p><a href="#" onclick="setClass('button1')">link</a></p>

    <p><a href="#" onclick="setClass('button2')">link2</a></p>

    </body>

     

    Clicking on "link" will change the a.button1 class from 'inactive menu' to 'active menu'.  Clicking on link2 will set a.button2 to active and all the others to inactive.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 10:17 AM   in reply to jyeager11

    Yes - the function first changes ALL menu links to inactive, and then it changes the specified one back to active.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 2:28 PM   in reply to jyeager11

    There is little difference between these two, although the former could cause your page to unexpectedly jump to the top (if the link is close to the bottom, since the browser will interpret the null link as a named anchor to the page top.  The way to solve that would be like this -

     

    <a href="#" onclick="setClass('button1');return false;">link</a>

     

    I prefer this format, but I'm not sure why.

     

    For the second problem, change this -

     

    <p><a id="button1" href="#" class="inactive menu">something</a></p>

    <p><a id="button2" href="#" class="inactive menu">something2</a></p>

     

    to this -

     

    <p><a id="button1" href="#" class="inactive menu" onclick="setClass('button1')">something</a></p>

    <p><a id="button2" href="#" class="inactive menu" onclick="setClass('button2')">something2</a></p>

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 16, 2012 2:52 PM   in reply to jyeager11

    All you need is the setClass code.

     
    |
    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