13 Replies Latest reply: Aug 16, 2012 5:49 PM by jyeager11 RSS

    Targetting elements via javascript... how?

    jyeager11 Community Member

      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!

        • 1. Re: Targetting elements via javascript... how?
          MurraySummers CommunityMVP

          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.

          • 2. Re: Targetting elements via javascript... how?
            jyeager11 Community Member

            Ack, I'm not well-versed enough in javascript to pull this off. Could you give me an example for the syntax?

             

            Say there's a text link on my page, and it wants to activate the 1st button on the nav menu (while "inactive"-ating the others). What would that link look like? And do I need to do anything else?

             

            This answer will probably help me wrap my mind around how getElementById() actually works.

            • 3. Re: Targetting elements via javascript... how?
              MurraySummers CommunityMVP

              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.

              • 4. Re: Targetting elements via javascript... how?
                jyeager11 Community Member

                Clicking on "link" will change the a.button1 class from 'inactive menu' to 'active menu'. 

                I'm on the road and won't get to test this 'til about an hour from now, but just so we understand each other... when you write that, you mean that in addition to changing the targeted "inactive menu" to "active menu", it will also change whichever button was already set to "active menu" to "inactive menu", right? We don't want 2 of these lit up at the same time.

                • 5. Re: Targetting elements via javascript... how?
                  MurraySummers CommunityMVP

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

                  • 6. Re: Targetting elements via javascript... how?
                    jyeager11 Community Member

                    Murray! That worked! Flawlessly.

                     

                    Can you tell me what the difference between onClick="setClass('button1')" and href="javascript:setClass('button1')" would have been?

                    • 7. Re: Targetting elements via javascript... how?
                      jyeager11 Community Member

                      I've spoken too hastily. While the implementation of controling the class from remote works flawlessly, the original behavior of simply clicking on the icon itself does not.

                       

                      In other words, it will not show the class change if I click on the menu item directly (like it did before I modified it to your suggested code). Any idea why?

                      • 9. Re: Targetting elements via javascript... how?
                        MurraySummers CommunityMVP

                        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>

                        • 10. Re: Targetting elements via javascript... how?
                          jyeager11 Community Member

                          I hadn't even noticed you changed the name of the function from changeClass to setClass, which of course who immediately explain why it started working on those elements that were still calling changeClass... except that when I changed the individual calls to setClass, they still wouldn't work.

                           

                          Was I supposed to leave the former changeClass function in the javascript? Is your setClass function supposed to be used in conjuction with the other one? Because I replaced one with the other, and ever since then, the new behavior works but the old one (clicking directly on the icon) does not.

                           

                          Here is my menu :

                                <a href="javascript:slide('div-home')" onclick="setClass(this)" class="inactive menu" id="button0"> </a>
                                <a href="javascript:slide('div-vip1')" onclick="setClass(this)" class="inactive menu" id="button1"> </a>
                                <a href="javascript:slide('div-vip2')" onclick="setClass(this)" class="inactive menu" id="button2"> </a>
                                <a href="javascript:slide('div-vip4')" onclick="setClass(this)" class="inactive menu" id="button4"> </a>
                                <a href="javascript:slide('div-vip5')" onclick="setClass(this)" class="inactive menu" id="button5"> </a>
                                <a href="javascript:slide('div-done')" onclick="setClass(this)" class="inactive menu" id="button6"> </a>
                          • 11. Re: Targetting elements via javascript... how?
                            MurraySummers CommunityMVP

                            All you need is the setClass code.

                            • 12. Re: Targetting elements via javascript... how?
                              jyeager11 Community Member

                              Just realized I had the syntax wrong... I had setClass set to (this) for all buttons, which was wrong. Fixed it, and it works now!

                               

                              So what would be the ideal syntax (correct if needed) :

                               

                              1. <a href="javascript:slide('div-home')" onclick="setClass('button0')" class="inactive menu" id="button0"> </a>

                               

                              2. <a href="#" onclick="slide('div-home'); setClass('button0')" class="inactive menu" id="button0"> </a>

                               

                              3. <a href="javascript:slide('div-home'); setClass('button0')" class="inactive menu" id="button0"> </a>

                               

                              ..?

                              • 13. Re: Targetting elements via javascript... how?
                                jyeager11 Community Member

                                I ended up going with option #3.

                                 

                                Thanks Murray, everything works flawlessly right now.