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:



    En dit is het stukje wat de tekst oproept:


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


    Ik heb dingen geprobeerd als:

    JavaScript
    var x = document.getElementsByClassName("rainbow");
    for (var i = 0; i < x.length; i++) 
    {
        var myRainbowSpan=new RainbowSpan(x[i], 0, 360, 255, 50, 18); //apply static rainbow effect
        myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
    }

    Maar dat werkte allemaal niet.


    Zou iemand mij willen helpen? Alvast bedankt!

  • Guest, wil je besparen op je domeinnamen? (ad)
  • De bedoeling is dat die om de X aantal seconden een nieuwe kleur krijgt?

    Yep, je moet het zien als DEZETEKST dan in regenboog kleur en dat verschuift naar links (dus de kleuren scrollen). Dat gebeurd eigenlijk echt op de MS. Het werkt prima, alleen dit is ID based en ik gebruik het meer als 1x.

  • 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?

  • 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.

    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.

  • 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.

  • Daar zitten geen condities aan. Leden zitten allemaal in een bepaalde user-group (admins, moderator, member etc). Ik kan die user-groups van alles meegeven, in de vorm van een begin en een end prefix. Wat ik daar neerzet, ben ik vrij in. De prefix van de member group die ik als regenboog wilt hebben, is dus <span id="r1">.


    Vervolgens heb ik dat stukje javascript in de template gezet van het forum, zoals het moest. Alleen dat scriptje is dus gebaseerd op maar 1 tekst als regenboog, dus werkt het script met IDs. Ik heb mijzelf nu dus in het regenboog groep gezet, en ik kom 4x voor op een pagina. De eerste keer werkt het en heb ik het bewegende regenboog kleur effect, de andere 3 keren wordt ik ook als regenboog gekleurd, maar is de animatie weg. Dat komt doordat de javascript er maar 1 pakt.


    Wat ik dus zoek is, hoe kan dit scriptje zo aangepast worden dat het alle spans pakt met een class "rainbow" of name "rainbow" ipv dat het achter ID's aangaat.

  • @FangorN
    What he said.


    Belangrijkste wat je moet kunnen doen is een class toevoegen. (ID dienen uniek te zijn dus lijkt me zoiezo dat ze niet alemaal r1 zijn.) Mochten ze opvolgend zijn dus r1,r2,r3. En alleen daar worden gebruiken zo je dit ook kunnen lezen met javascript.



    Op basis van jqueryL

    JavaScript
    function findusers(){
    	#amoutofuser = $('.user').length;
    	if(amoutofheaders > 1){
    		$('body').find('.user').each(function(index, element) {
                $(element).attr('id','user_'+index);
            });
    	}
    }



    Of op javascript basis:



    JavaScript
    function findusers() {
       var users =  document.querySelectorAll(".user");
       for (var i = 0; i < users.length; i++)
           users[i].id = 'user_' + i;
       }
    }

    Dan kan je aan de hand van de length van de gevonden elementen de rainbow starten in een for loop.

  • Het is dus niet mogelijk om dat scriptje om te bouwen naar class/name gebruik ipv id? Bovenstaande oplossing kan ik gebruiken maar zit nu al aan 7k users dus dat wordt wel een flinke load.

  • Ok, ik heb hier nog even langer dan goed voor mij is naar gekeken en heb het nu aan de praat.


    Allereerst wat observaties:

    • firstChild.data retourneert "undefined", dit kun je oplossen door voorkomens (2x) van firstChild.data te vervangen door firstChild.innerHTML
    • de regenboog functionaliteit verwacht een element met een id om het element wat de regenboog functionaliteit moet hebben heen anders wordt de "span" (nogal misleidende naam) niet gevonden
    • omdat je nu potentieel meerdere regenbogen hebt is het handig om alle voorkomens op te slaan in een array, te meer omdat deze ook allemaal aparte timers hebben

    Om dit aan de praat te krijgen moet je het volgende doen:

    1. Zoals aangegeven, vervang de voorkomens (2x) van firstChild.data door firstChild.innerHTML
    2. Schrijf wat extra code die het gebruik van meerdere regenbogen mogelijk maakt, bijvoorbeeld als volgt (met gebruikmaking van jQuery):

    Het bovenstaande is getest en werkt in FireFox, Chrome en IE Edge.

    Bovenstaande oplossing kan ik gebruiken maar zit nu al aan 7k users dus dat wordt wel een flinke load.

    Zie niet helemaal hoe dit relevant is want JavaScript = clientside, of ik moet je verkeerd begrijpen.


    EDIT: tijdelijk werkend voorbeeld

Participate now!

Heb je nog geen account? Registreer je nu en word deel van onze community!