change text on poster every refresh/reload page

hello fmsoftware :)
i want to ask

how to give/add css on javascript code in order to be like this

you can see this image,


i have code when reload/refresh page, text always change (random text)
this code about random text, but this is the basic code, still no css code:)

Code:

      function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "Real success is determined by two factors. First is faith, and second is action."
        text[number++] = "Keep going and never quit! The champion is never quit."
        text[number++] = "Make a history in your life, not just a story."
        text[number++] = "If you want to get the best, follow the best person."
        text[number++] = "Delay does not make us deserve to be success."
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //-->

how to add css so to be like this
https://i.imgur.com/7ErplEX.png

source: http://duelacademy.net/

please help me admin fmsoftware,
im very appreciate, thanks a lot

And what you want to make , I don't see any difference between the first image and the second.

hmm :)
ok now you can see this image,  
This text on poster


and when reload/refresh page, text change again


more details you can visit to this forum
http://duelacademy.net/forum

---------
this code for random text,
and now i need  my  code for javascript add some class about css

Code:

function text() {
        };
        text = new text();
        number = 0;
        // textArray
        text[number++] = "Real success is determined by two factors. First is faith, and second is action."
        text[number++] = "Keep going and never quit! The champion is never quit."
        text[number++] = "Make a history in your life, not just a story."
        text[number++] = "If you want to get the best, follow the best person."
        text[number++] = "Delay does not make us deserve to be success."
        // keep adding items here...
        increment = Math.floor(Math.random() * number);
        document.write(text[increment]);
        //-->

so can be set positions, margins, font color, font type, at least, can be set with css. :)

help me admin fmsoftware,
im very appreciate, thanks a lot

Add that in your overall_header , where you want :

Code:

<ul id="tips">
   <li>Real success is determined by two factors. First is faith, and second is action.</li>
   <li>"Keep going and never quit! The champion is never quit.</li>
   <li>Make a history in your life, not just a story.</li>
   <li>If you want to get the best, follow the best person.</li>
   <li>Delay does not make us deserve to be success.</li>
</ul>

now , go in administration Panel -> Display -> Colors -> CSS Stylesheet and add that

Code:

#tips, #tips li{
   margin:0;
   padding:0;
   list-style:none;
   }
#tips{
   width:250px;
   font-size:16px;
   line-height:120%;
   }
#tips li{
   padding:20px;
   background:#e1e1e1;
   display:none; /* hide the items at first only */
   }

Now create a javascript , name : base of random, tick in all pages and add that :

Code:


this.randomtip = function(){
   var length = $("#tips li").length;
   var ran = Math.floor(Math.random()*length) + 1;
   $("#tips li:nth-child(" + ran + ")").show();
};

$(document).ready(function(){   
   randomtip();
});

Create other javascript , name : base2 , tick in all pages and fill with that

Code:


this.randomtip = function(){

   var pause = 3000; // define the pause for each tip (in milliseconds)
   var length = $("#tips li").length;
   var temp = -1;      

   this.getRan = function(){
      // get the random number
      var ran = Math.floor(Math.random()*length) + 1;
      return ran;
   };
   this.show = function(){
      var ran = getRan();
      // to avoid repeating
      while (ran == temp){
         ran = getRan();
      };
      temp = ran;
      $("#tips li").hide();   
      $("#tips li:nth-child(" + ran + ")").fadeIn("fast");      
   };
   
   show(); setInterval(show,pause);
   
};

$(document).ready(function(){   
   randomtip();
});

I have tried, and the result is like this. :)


but that's not what I want, because the code you provided is the form of slides, words change every second.

what I want is, text change every refresh/reload page.

ex:
This text on poster
https://i.imgur.com/7dOu62H.png

and when reload/refresh page, text change again
https://i.imgur.com/7ErplEX.png

more details you can visit to this forum
http://duelacademy.net/forum

and this code similar like that.. :)
and now i need my code for javascript add some class about css

Code:

        function text() {
                };
                text = new text();
                number = 0;
                // textArray
                text[number++] = "Real success is determined by two factors. First is faith, and second is action."
                text[number++] = "Keep going and never quit! The champion is never quit."
                text[number++] = "Make a history in your life, not just a story."
                text[number++] = "If you want to get the best, follow the best person."
                text[number++] = "Delay does not make us deserve to be success."
                // keep adding items here...
                increment = Math.floor(Math.random() * number);
                document.write(text[increment]);
                //-->

thanks for help admin, i need you help me and add some class for css in javascript.
thanks a lot  

my frum
http://budokai.indonesianforum.net/