Home/ Questions/Q 3696752
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-19T04:46:37+00:00

I want the the text to randomly appear left, center, or right within the

  • 0

I want the the text to randomly appear left, center, or right within the text box.

Here is the test page: http://www.creativewritingstudio.com/Home_2.html

Below is the script I am using:

<font face="helvetica" color="1b1b1b" size="5px" repeat>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Random Text w/ jQuery</title>
<style type="text/css">
#text-box {

 padding: 4px;
 width: 602px;
}
#text-content {
 color: #1b1b1b;
 text-align : center;

}
#text-reload {

 display: block;
 margin-top: 4px;
 text-align: right;
 outline: none;
}
</style>

</head>
<body>

<div id="text-box">
 <div id="text-content"></div> <!-- random text goes in ther -->

</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready( function() {
  var textArray = [
   'Flow',
   'Precision',
   'Voice',
   'Imagery',
   'Pace',
   'Unity',
   'Word Choice',
   'Rhythm',
   'Inspiration',
   'Balance',
   'Clarity',
   'Simplicity',
   'Revision',
   'Discipline',
   'Fundamentals',
   'Dedication',
   'Practice',
  ];
  $('#text-content').loadText( textArray, 5500 ); // ( array, interval )
 });
 // custom jquery plugin loadText()
 $.fn.loadText = function( textArray, interval ) {
  return this.each( function() {
   var obj = $(this);
   obj.fadeOut( 'slow', function() { 
    obj.empty().html( random_array( textArray ) ); 
    obj.fadeIn( 'slow' );
   });
   timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
   // reload random text (if not animated) -- entirely optional, can be removed, along     with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
   $("#text-reload").click( function(){ 
    if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray,     interval );} // animation check prevents "too much recursion" error in jQuery 
   });
  });
 }
 //public function
 function random_array( aArray ) {
  var rand = Math.floor( Math.random() * aArray.length + aArray.length );
  var randArray = aArray[ rand - aArray.length ];
  return randArray;
 }
</script>
</html>

Many thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Seems really complex, quite a lot of code. Here’s a bit of JavaScript that randomly aligns the text of an element:

    <div id="myid">hello</div>
<script type="text/javascript">
window.onload=function(){
    var alignarray=['left','center','right'];
    var elem=document.getElementById('myid');
    elem.style.textAlign=alignarray[Math.round(Math.random()*2)];
}
</script>

    EDIT: This is probably more along the lines of what you want:

    <div id="myid">hello</div>
<script type="text/javascript">
var myarray=['hello','goodbye','gone tomorrow','I like apples'];
var elem=document.getElementById('myid');
window.setInterval(function(){
    elem.innerHTML=myarray[Math.round((myarray.length-1)*Math.random())];
},1500);
</script>

    Also, keep in mind that 1500 means 1 and a half seconds, and you can put in any HTML in myarray, not just text.

    • 0