Web Analytics Made Easy -
StatCounter How to access specific text - CodingForum

Announcement

Collapse
No announcement yet.

How to access specific text

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to access specific text

    I am trying to target the word "Contra" in the code below so that I can add it as a sub-class of the li.event class (so that I can put a colored border around the ouput of the event that is color coded based on the category).
    I have successfully targeted the events_category span (there are eight of them) but have failed miserably to access the category name so that I can add a sub-class to each li elemnt.
    Any help would be much appreciated.

    <code>
    <li class="event">
    <span class="events_link">
    <a href="/school"><img class="hasTooltip" title="Kenilworth" src="/location.png" /></a>
    <a href="/2nd-Saturday" title="2nd Saturday">2nd Saturday</a>
    </span>
    <span class="events_date">Sat. Sep 10, 2016 7:00 pm</span>
    <span class="events_category"><a href="/category">Contra</a></span>
    <span class="events_description">Band: Clusterfolk</span>
    </li>
    </code>

  • #2
    Hello,

    I do not see an ID, you will need one to do what you are looking to do.
    Code:
    [COLOR=#5D5D5D]<li class="event">[/COLOR]
    [COLOR=#5D5D5D]<span class="events_link">[/COLOR]
    [COLOR=#5D5D5D]<a href="/school"><img class="hasTooltip" title="Kenilworth" src="/location.png" /></a>[/COLOR]
    [COLOR=#5D5D5D]<a href="/2nd-Saturday" title="2nd Saturday">2nd Saturday</a>[/COLOR]
    [COLOR=#5D5D5D]</span>[/COLOR]
    [COLOR=#5D5D5D]<span class="events_date">Sat. Sep 10, 2016 7:00 pm</span>[/COLOR]
    [COLOR=#5D5D5D]<span[/COLOR][COLOR=#ff0000] id="events_category"[/COLOR][COLOR=#5D5D5D] class="events_category"><a href="/category">Contra</a></span>[/COLOR]
    [COLOR=#5D5D5D]<span class="events_description">Band: Clusterfolk</span>[/COLOR]
    [COLOR=#5D5D5D]</li>
    
    [/COLOR]// JS
    var d = document.getElementById("events-category");
    d.className += " otherclass";
    Make sure to notice the space in front of the class name, otherwise everything will just jumble together.

    That should work, here is the MDN reference if you would like to read more about it.

    Good luck!
    Riley
    Riley-Shannon.com - My Portfolio
    FraktalServices.com - My Company

    Comment


    • #3
      Originally posted by RShannon1321 View Post
      Hello,

      I do not see an ID, you will need one to do what you are looking to do.
      Code:
      [COLOR=#5D5D5D]<li class="event">[/COLOR]
      [COLOR=#5D5D5D]<span class="events_link">[/COLOR]
      [COLOR=#5D5D5D]<a href="/school"><img class="hasTooltip" title="Kenilworth" src="/location.png" /></a>[/COLOR]
      [COLOR=#5D5D5D]<a href="/2nd-Saturday" title="2nd Saturday">2nd Saturday</a>[/COLOR]
      [COLOR=#5D5D5D]</span>[/COLOR]
      [COLOR=#5D5D5D]<span class="events_date">Sat. Sep 10, 2016 7:00 pm</span>[/COLOR]
      [COLOR=#5D5D5D]<span[/COLOR][COLOR=#ff0000] id="events_category"[/COLOR][COLOR=#5D5D5D] class="events_category"><a href="/category">Contra</a></span>[/COLOR]
      [COLOR=#5D5D5D]<span class="events_description">Band: Clusterfolk</span>[/COLOR]
      [COLOR=#5D5D5D]</li>
      
      [/COLOR]// JS
      var d = document.getElementById("events-category");
      d.className += " otherclass";
      Make sure to notice the space in front of the class name, otherwise everything will just jumble together.

      That should work, here is the MDN reference if you would like to read more about it.

      Good luck!
      Thank you. Unfortunately, I cannot change the code. It is produced by a Joomla extension and I have to work with what is there.

      Comment


      • #4
        What is the extension called?
        Riley
        Riley-Shannon.com - My Portfolio
        FraktalServices.com - My Company

        Comment


        • #5
          The extension is JCalPro, or more accurately, the JCalPro Events module. The code I have quoted above is a 'short' version of the actual code produced but all the elements, IDs (none) and classes are included. I have just shortened paths etc.

          Comment


          • #6
            Does the code have IDs in it at all? Or is it only classes, what does the entire code segment look like?
            Riley
            Riley-Shannon.com - My Portfolio
            FraktalServices.com - My Company

            Comment


            • #7
              This is the code that the module produces, sadly, not an ID in sight:

              <code>
              <div class="module title-on tabbeddark ">
              <h3 class="moduletitle"><span class="first_word">Future Events (JCal Pro Events)</span></h3>
              <div class="modulecontent">
              <div class="jcalpro_events tabbeddark">
              <ul class="jcalpro_events tabbeddark">
              <li class="jcalpro_events_event">
              <span class="jcalpro_events_link">
              <a href="/bookings/mab-schedule-jcal/location/11-phoenix-kenilworth-school">
              <img class="hasTooltip" title="Phoenix: Kenilworth School&lt;br&gt;1210 N 5th Ave" src="/media/jcalpro/images/events/icon-event-location.png" />
              </a>
              <a href="/bookings/mab-schedule-jcal/99-contra/149-phoenix-2nd-saturday" title="Phoenix 2nd Saturday Contra">Phoenix 2nd Saturday Contra</a>
              </span>
              <span class="jcalpro_events_date">Sat. Sep 10, 2016 7:00 pm</span>
              <span class="jcalpro_events_category"><a href="/bookings/mab-schedule-jcal/99-contra">Contra</a></span>
              <span class="jcalpro_events_description">Band: Clusterfolk</span>
              </li>

              ... more <li>s
              </ul>
              </div>

              You can see my test site at Michael Barraclough. On the right hand side there are 3 modules.
              The top module comes from a JEvents calendar - I love the display, but don't like working with the JEvents extension.
              The 2nd module uses a JoomlaXTX module to display data from the JCalPro calendar. I may have to go back to working with this if I can't get my issue resolved.
              The 3rd module is the one where I am trying to solve the problem. It uses the native JCalPro Events module with the JCalPro calendar. I am trying to change the color of the box around each event based on the category of the event.

              Thank you for continuing to try and help me sort this out.

              Comment


              • #8
                Well, after a little more reading, you can try this:
                Code:
                var d = document.getElementByClassName("[COLOR=#5D5D5D]jcalpro_events_category[/COLOR]");
                d.className += " otherClass";
                That will target anything with that class name.

                Let me know if this works, I hope it does.

                Also, the site looks great!
                Riley
                Riley-Shannon.com - My Portfolio
                FraktalServices.com - My Company

                Comment


                • #9
                  Originally posted by RShannon1321 View Post
                  Well, after a little more reading, you can try this:
                  A couple of errors in that code - getElementsByClassName has the s missing - and d is a nodelist so you can't just add a class to it - you need to select which specific node in the list you want to add the class to eg d[0].className
                  Stephen
                  Learn Modern JavaScript - http://javascriptexample.net/
                  Helping others to solve their computer problem at http://www.felgall.com/

                  Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                  Comment


                  • #10
                    Good to know,

                    What would you do in the instance you wanted all of the elements with that class?

                    Can you use a universal selector or something for it?
                    Riley
                    Riley-Shannon.com - My Portfolio
                    FraktalServices.com - My Company

                    Comment


                    • #11
                      Thanks everyone- I am definitely making some progress.

                      The following code is being loaded and run. The content of array c are the words I want to append to the li class (currently class="jcalpro_events_event") so that I can use CSS to put a box around each event (<li>) with a color that depends on the value of c[].

                      <code>
                      jQuery(document).ready( function(){

                      var c = document.getElementsByClassName('jcalpro_events_category'); <====== WORKING
                      for (i = 0; i < c.length; i++) {
                      $('jcalpro_events_event').eq[i].addClass(c[i].textContent); <========= NOT WORKING
                      /* alert(c[i].textContent);*/ <=== WHEN NOT COMMENTED GIVES ME CONTRA *6 AND THEN ECD * 2 (WHICH IS CORRECT)
                      }

                      } );
                      </code>

                      Any suggestions would be much appreciated.

                      Comment


                      • #12
                        I am reposting this with my JS and HTML code together in one post.

                        I want to append different classes to all the <li class="jcalpro_events_event"> events so that I can use CSS to put a box around each event with a color that depends on the value of c[] (see JS code below).
                        Any suggestions would be much appreciated.

                        Javascript code
                        <code>
                        jQuery(document).ready( function(){
                        var c = document.getElementsByClassName('jcalpro_events_category'); <= WORKING
                        for (i = 0; i < c.length; i++) {
                        $('jcalpro_events_event').eq.addClass(c.textContent); <= NOT WORKING
                        /* alert(c[i].textContent);*/ <=== WORKS WHEN NOT COMMENTED
                        }
                        });
                        </code>
                        <code>
                        HTML code
                        <div class="module title-on tabbeddark ">
                        <h3 class="moduletitle"><span class="first_word">Future Events (JCal Pro Events)</span></h3>
                        <div class="modulecontent">
                        <div class="jcalpro_events tabbeddark">
                        <ul class="jcalpro_events tabbeddark">
                        <li class="jcalpro_events_event">
                        <span class="jcalpro_events_link">
                        <a href="/bookings/mab-schedule-jcal/location/11-phoenix-kenilworth-school">
                        <img class="hasTooltip" title="Phoenix: Kenilworth School&lt;br&gt;1210 N 5th Ave" src="/media/jcalpro/images/events/icon-event-location.png" />
                        </a>
                        <a href="/bookings/mab-schedule-jcal/99-contra/149-phoenix-2nd-saturday" title="Phoenix 2nd Saturday Contra">Phoenix 2nd Saturday Contra</a>
                        </span>
                        <span class="jcalpro_events_date">Sat. Sep 10, 2016 7:00 pm</span>
                        <span class="jcalpro_events_category"><a href="/bookings/mab-schedule-jcal/99-contra">Contra</a></span>
                        <span class="jcalpro_events_description">Band: Clusterfolk</span>
                        </li>

                        ... more <li>s
                        </ul>
                        </div>
                        </code>

                        Comment


                        • #13
                          Originally posted by barraclm View Post
                          I am reposting this with my JS and HTML code together in one post.

                          I want to append different classes to all the <li class="jcalpro_events_event"> events so that I can use CSS to put a box around each event with a color that depends on the value of c[] (see JS code below).
                          Any suggestions would be much appreciated.

                          Javascript code
                          <code>
                          jQuery(document).ready( function(){
                          var c = document.getElementsByClassName('jcalpro_events_category'); <= WORKING
                          for (i = 0; i < c.length; i++) {
                          $('jcalpro_events_event').eq.addClass(c.textContent); <= NOT WORKING
                          /* alert(c[i].textContent);*/ <=== WORKS WHEN NOT COMMENTED
                          }
                          });
                          </code>
                          <code>
                          HTML code
                          <div class="module title-on tabbeddark ">
                          <h3 class="moduletitle"><span class="first_word">Future Events (JCal Pro Events)</span></h3>
                          <div class="modulecontent">
                          <div class="jcalpro_events tabbeddark">
                          <ul class="jcalpro_events tabbeddark">
                          <li class="jcalpro_events_event">
                          <span class="jcalpro_events_link">
                          <a href="/bookings/mab-schedule-jcal/location/11-phoenix-kenilworth-school">
                          <img class="hasTooltip" title="Phoenix: Kenilworth School<br>1210 N 5th Ave" src="/media/jcalpro/images/events/icon-event-location.png" />
                          </a>
                          <a href="/bookings/mab-schedule-jcal/99-contra/149-phoenix-2nd-saturday" title="Phoenix 2nd Saturday Contra">Phoenix 2nd Saturday Contra</a>
                          </span>
                          <span class="jcalpro_events_date">Sat. Sep 10, 2016 7:00 pm</span>
                          <span class="jcalpro_events_category"><a href="/bookings/mab-schedule-jcal/99-contra">Contra</a></span>
                          <span class="jcalpro_events_description">Band: Clusterfolk</span>
                          </li>

                          ... more <li>s
                          </ul>
                          </div>
                          </code>
                          SOLVED!

                          Here is my code that fixed it. Thanks to all who provided help along the way.

                          jQuery(document).ready( function(){
                          var l = document.getElementsByClassName("jcalpro_events_event");
                          var c = document.getElementsByClassName('jcalpro_events_category');
                          for (i = 0; i < c.length; i++) {
                          l[i].classList += ' ' + c[i].textContent;
                          } );

                          Comment

                          Working...
                          X