Color cycling

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Rajneesh Chellapilla
    New Member
    • Oct 2008
    • 12
    #1

    Color cycling

    Hi I have a general question about cycling background colors.

    when using

    background color: rgb(0,0,0)

    is it ok to write

    Code:
    if {i<250){

i++;
}
else(i == 250){
i= 0;
i++
}

background color: rgb(i,0,0)
    This is pseudo code.

    I tried doing this for the background color of a text field which I set with css however, the css wouldnt read it.

    I am just wondering if there are any special constraints on rgb(0,0,0,) which dont allow you to use looping varibles?

    Seasons Greetings.
    Last edited by gits; Dec 25 '08, 09:48 AM. Reason: added code tags
    Tags: None
    • gits
      Recognized Expert Moderator Expert
      • May 2007
      • 5390
      #2
      have a look at the following example the shows you how you might use it:

      [code=html]
      <html>
      <script type="text/javascript">
      var my_color = 'rgb(0,0,0)';

      function colorize() {
      var n = document.getEle mentById('foo') ;
      var r = /([\d]+)/;
      var c = parseInt(my_col or.match(r), 10);

      if (c < 250) {
      c += 10;
      } else {
      c = 0;
      c += 10;;
      }

      my_color = my_color.replac e(r, c);
      n.style.backgro undColor = my_color;
      }
      </script>
      <body onload="coloriz e();">
      <input type="text" id="foo"/>
      <input type="button" value="colorize " onclick="colori ze();"/>
      </body>
      </html>
      [/code]
      kind regards

        Comment

        • Rajneesh Chellapilla
          New Member
          • Oct 2008
          • 12
          #3
          Thanks Gits,

          It is very kind of you to write the code.

          I do have some trouble underrstanding the example for instance

          var r = /([\d]+)/; ( I have no clue what this syntax means) what are the slashes?

          var c = parseInt(my_col or.match(r), 10); ( am I right to infer that this matches the value passed to the array d and increments it by 10.

          I will be studying this example for a while to understand the logic underlying it.

          If you have any general comments on how you did this I would appreciate hearing them.

          In any case Merry Christmas, and Happy New Year.

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              Originally posted by Rajneesh Chellapilla
              var r = /([\d]+)/; ( I have no clue what this syntax means) what are the slashes?
              the forward slashes are the RegEx delimiter characters, \d simply means "any digit" (like \n means "new line")

              Originally posted by Rajneesh Chellapilla
              var c = parseInt(my_col or.match(r), 10); ( am I right to infer that this matches the value passed to the array d and increments it by 10.
              nope, the 10 denotes the number system (decimal). parseInt() converts its input to a number.

              regards

                Comment

                • gits
                  Recognized Expert Moderator Expert
                  • May 2007
                  • 5390
                  #5
                  yes ... dormilich explained it already ... i just used the regExp to shorten the replacement of the first rgb-value that we need to use as a string-value for the setting of the css-property - and the regExp is quite handy for string-operations like the replace() method ;)

                  kind regards

                    Comment

                    • Rajneesh Chellapilla
                      New Member
                      • Oct 2008
                      • 12
                      #6
                      Thanks again

                      Thanks much,

                      I will use this example and use a set time method so the color cycles automatically. I will let you know how it goes. My goal is to make a series of cycling color squares, as a personal art project.

                      I will be studying this example for a while though, as I never heard of reg expression before.

                      Is there a way to do this example with out reg expression?

                        Comment

                        • gits
                          Recognized Expert Moderator Expert
                          • May 2007
                          • 5390
                          #7
                          of course ... you may do it without regExp ... you just need to construct a string that you may assign to the css-property like that:

                          [code=javascript]
                          var r = 100;

                          var my_color = 'rgb(' + r + '0,0)';

                          n.style.backgro undColor = my_color;
                          [/code]
                          kind regards

                            Comment

                            • Rajneesh Chellapilla
                              New Member
                              • Oct 2008
                              • 12
                              #8
                              Thanks Gits,

                              I hope one day I will be able to program as well as you.



                              ('Cheers' + 'Happy.New.Year ';)

                                Comment

                                • gits
                                  Recognized Expert Moderator Expert
                                  • May 2007
                                  • 5390
                                  #9
                                  ... hope you will avoid all those bugs i always make ;) ... its just experience and the quantity of code that you will produce in a specific language that will let you advance in a special field of programming ... i'm sure you will advance in JavaScript when you just write more and more complex code that you need for your projects ... and i'm even sure that when this will be the case then you will start to see the 'beauty' of JavaScript ... its really a nice language ;)

                                  in case you need more help or explainations, just post back to the forum ...

                                  kind regards

                                    Comment

                                    Previous template Next
                                    Working...