Bewegende regenboog kleur text

    This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

    • Bewegende regenboog kleur text

      Hallo,

      Ik wil dus een bewegende regenboog kleur text toevoegen op mijn forum. Het probleem is echter dat het scriptje wat ik gebruik, met ID's werkt, en dat is dus niet optimaal gezien meerdere users de regenboog kleur text krijgen, en gezien hun meerdere keren op één pagina gezien zullen worden.

      Heb veel gekloot met het scriptje maar het is toch iets lastiger als ik gehoopt had (mijn javascript is belabberd).

      Dit is de functie wat de regenboog kleur maakt:

      JavaScript Source Code

      1. <script type="text/javascript">
      2. <!-- Begin
      3. /* This script and many more are available free online at
      4. The JavaScript Source!! http://javascript.internet.com
      5. Created by: HaganeNoKokoro :: http://tinyurl.com/buvp9 */
      6. /*
      7. * Notes on hue
      8. *
      9. * This script uses hue rotation in the following manner:
      10. * hue=0 is red (#FF0000)
      11. * hue=60 is yellow (#FFFF00)
      12. * hue=120 is green (#00FF00)
      13. * hue=180 is cyan (#00FFFF)
      14. * hue=240 is blue (#0000FF)
      15. * hue=300 is magenta (#FF00FF)
      16. * hue=360 is hue=0 (#FF0000)
      17. *
      18. * Notes on the script
      19. *
      20. * This script should function in any browser that supports document.getElementById
      21. * It has been tested in Netscape7, Mozilla Firefox 1.0, and Internet Explorer 6
      22. *
      23. * Accessibility
      24. *
      25. * The script does not write the string out, but rather takes it from an existing
      26. * HTML element. Therefore, users with javascript disabled will not be adverely affected.
      27. * They just won't get the pretty colors.
      28. */
      29. /*
      30. * splits par.firstChild.data into 1 span for each letter
      31. * ARGUMENTS
      32. * span - HTML element containing a text node as the only element
      33. */
      34. function toSpans(span) {
      35. var str=span.firstChild.data;
      36. var a=str.length;
      37. span.removeChild(span.firstChild);
      38. for(var i=0; i<a; i++) {
      39. var theSpan=document.createElement("SPAN");
      40. theSpan.appendChild(document.createTextNode(str.charAt(i)));
      41. span.appendChild(theSpan);
      42. }
      43. }
      44. /*
      45. * creates a rainbowspan object
      46. * whose letters will be colored [deg] degrees of hue
      47. * ARGUMENTS
      48. * span - HTML element to apply the effect to (text only, no HTML)
      49. * hue - what degree of hue to start at (0-359)
      50. * deg - how many hue degrees should be traversed from beginning to end of the string (360 => once around, 720 => twice, etc)
      51. * brt - brightness (0-255, 0 => black, 255 => full color)
      52. * spd - how many ms between moveRainbow calls (less => faster)
      53. * hspd - how many hue degrees to move every time moveRainbow is called (0-359, closer to 180 => faster)
      54. */
      55. function RainbowSpan(span, hue, deg, brt, spd, hspd) {
      56. this.deg=(deg==null?360:Math.abs(deg));
      57. this.hue=(hue==null?0:Math.abs(hue)%360);
      58. this.hspd=(hspd==null?3:Math.abs(hspd)%360);
      59. this.length=span.firstChild.data.length;
      60. this.span=span;
      61. this.speed=(spd==null?50:Math.abs(spd));
      62. this.hInc=this.deg/this.length;
      63. this.brt=(brt==null?255:Math.abs(brt)%256);
      64. this.timer=null;
      65. toSpans(span);
      66. this.moveRainbow();
      67. }
      68. /*
      69. * sets the colors of the children of [this] as a hue-rotating rainbow starting at this.hue;
      70. * requires something to manage ch externally
      71. * I had to make the RainbowSpan class because M$IE wouldn't let me attach this prototype to [Object]
      72. */
      73. RainbowSpan.prototype.moveRainbow = function() {
      74. if(this.hue>359) this.hue-=360;
      75. var color;
      76. var b=this.brt;
      77. var a=this.length;
      78. var h=this.hue;
      79. for(var i=0; i<a; i++) {
      80. if(h>359) h-=360;
      81. if(h<60) { color=Math.floor(((h)/60)*b); red=b;grn=color;blu=0; }
      82. else if(h<120) { color=Math.floor(((h-60)/60)*b); red=b-color;grn=b;blu=0; }
      83. else if(h<180) { color=Math.floor(((h-120)/60)*b); red=0;grn=b;blu=color; }
      84. else if(h<240) { color=Math.floor(((h-180)/60)*b); red=0;grn=b-color;blu=b; }
      85. else if(h<300) { color=Math.floor(((h-240)/60)*b); red=color;grn=0;blu=b; }
      86. else { color=Math.floor(((h-300)/60)*b); red=b;grn=0;blu=b-color; }
      87. h+=this.hInc;
      88. this.span.childNodes[i].style.color="rgb("+red+", "+grn+", "+blu+")";
      89. }
      90. this.hue+=this.hspd;
      91. }
      92. // End -->
      93. </script>
      Display All



      En dit is het stukje wat de tekst oproept:

      Source Code

      1. <script type="text/javascript">
      2. var r1=document.getElementById("r1"); //get span to apply rainbow
      3. var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect
      4. myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
      5. </script>


      Ik heb dingen geprobeerd als:

      JavaScript Source Code

      1. var x = document.getElementsByClassName("rainbow");
      2. for (var i = 0; i < x.length; i++)
      3. {
      4. var myRainbowSpan=new RainbowSpan(x[i], 0, 360, 255, 50, 18); //apply static rainbow effect
      5. myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
      6. }
      Maar dat werkte allemaal niet.

      Zou iemand mij willen helpen? Alvast bedankt!
      Met vriendelijke groet,

      Djordy.
    • En als je nu een mechanisme hebt/verzint waarbij je unieke id's genereert, dan kun je je regenboogcode blijven gebruiken zoals voorheen omdat je dan niets aan functionaliteit hoeft te wijzigen.

      Je zegt dat je dit gebruikt op een forum, heb je daar UBB-code of wat dan ook? De oplossing hangt voor een groot deel af van hoe iemand passages tekst kan markeren voor regenboog-opmaak. Dit bepaalt namelijk in een grote mate je oplossingsrichting.

      Mijn eerste vraag zou dan ook zijn: hoe markeer je tekst voor deze opmaak?
    • D.Oomens wrote:

      Ik heb dit snel voor je in elkaar gekunsteld, maar dat bedoel je niet.
      Ziet er wel leuk uit, zal je een voorbeeldje plaatsen later vandaag (of je moet even zelf de code in een html bestand gooien met een span met als ID r1.) Kan op het moment even niets doen.

      FangorN wrote:

      En als je nu een mechanisme hebt/verzint waarbij je unieke id's genereert, dan kun je je regenboogcode blijven gebruiken zoals voorheen omdat je dan niets aan functionaliteit hoeft te wijzigen.

      Je zegt dat je dit gebruikt op een forum, heb je daar UBB-code of wat dan ook? De oplossing hangt voor een groot deel af van hoe iemand passages tekst kan markeren voor regenboog-opmaak. Dit bepaalt namelijk in een grote mate je oplossingsrichting.

      Mijn eerste vraag zou dan ook zijn: hoe markeer je tekst voor deze opmaak?
      Dat gaat hem helaas niet worden. De code wordt gebruikt om een gebruikersnaam te markeren, ik kan dan een begin en een end prefix meegeven. Dat is dan prefix accountname prefix. Wat ik daar dus doet nu is <span id="r1"> als begin prefix en </span> als end prefix.
      Het wordt dus geen ubb code, en het is helaas ook niet iets wat ik zomaar kan aanpassen in het forum software.

      Het makkelijkste leek mij om de javascript aan te passen, maar dat viel mij helaas wat tegen. Alhoewel ik wel in de goede richting kwam, denk ik.
      Met vriendelijke groet,

      Djordy.
    • Laat ik het anders verwoorden: wat is/zijn de conditie(s) voor het toevoegen van die span? En waar regel je dat dit specifiek "r1" moet zijn? Komt hier een scriptingtaal aan te pas? Regel je dit rechtstreeks in een template/in HTML?

      Je hebt het over een markeren van een gebruikersnaam? Een specifieke? Alle?

      Je zou al die delen die met een regenboog opgemaakt moeten worden (als dit vantevoren al op een of andere manier vastligt) kunnen voorzien van een class X. Vervolgens voeg je een snippet JavaScript toe die alle spans met class X afloopt en deze voorziet van een uniek id waar je vervolgens de regenboog-functionaliteit aan koppelt. Je maakt dus via een tussenstap een koppelstuk zodat je deze delen aan de regenboog-code kunt klikken zonder dat je hiervoor de regenboog-code inhoudelijk hoeft aan te passen.

      Het implementeren van dit principe wordt wel lastig als je niet uitlegt hoe dit proces verloopt of wanneer je zelf niets/heel weinig kunt schuiven in de forumcode.