adding class automation

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • anand1287
    New Member
    • Jun 2013
    • 1
    #1

    adding class automation

    i need to add class to dynamically created span tags so that i can highlight it for some duration of time and then i need to remove it from this span and add class to other span tag.. In short u can say add class and remove class should continues based on time on each of the span tags..

    example:
    Code:
    <span>some text1</span><span>some text2</span><span>some text3</span>
    like this and i want text1 to be highlighted first and after few seconds second one should highlighted and so on..

    Thanks in Advance
    Anand kumar Singh
    Last edited by gits; Jun 14 '13, 07:54 AM. Reason: added code tags
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      what have you tried?

        Comment

        • gits
          Recognized Expert Moderator Expert
          • May 2007
          • 5390
          #3
          a simple start would be like this:

          Code:
          <html>
    <style type="text/css">
        .hl {
            color: red;
        }
    </style>
    <script type="text/javascript">
        function highlightNodes() {
            var nodeBase = document.getElementsByTagName('SPAN');
            var curNode = -1;
            
            for (var i = 0, n; n = nodeBase[i]; i++) {
                if (n.className == 'hl') {
                    curNode = i;
                    n.className = '';
                    
                    if (curNode == nodeBase.length - 1) {
                        curNode = -1;
                    }
                }
            }
            
            nodeBase[curNode + 1].className = 'hl';
        }
    </script>
    <body onload="window.setInterval(highlightNodes, 1000);">
        <span>some text1</span>
        <span>some text2</span>
        <span>some text3</span>
    </body>
</html>
          check it and try to understand it and adapt it to what u need. then come back with more specific questions.

            Comment

            Previous template Next
            Working...