Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Randomly Generated Marquee

    Alright so I was doing a lot of googling and I found (and edited) a code that successfully randomizes the order that elements go into the scroll. However, I want it to look like a ticker and not all bunched up together like it is. If anyone can point out what I'm missing or tell me an easier way to do this it would be very much appreciated. Thanks in advance

    Code:
    <script language="JavaScript" type="text/javascript">
    //Highlight image script- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use
    
    function makevisible(cur,which){
    strength=(which==0)? 1 : 0.2
    
    if (cur.style.MozOpacity)
    cur.style.MozOpacity=strength
    else if (cur.filters)
    cur.filters.alpha.opacity=strength*100
    }
    </script>
    
    <style type="text/css">
    .jsclass body .randomordercontent{
    display: none;
    }
    </style>
    
    <script type="text/javascript">
    /***********************************************
    * Random Order Content (from DIVs) script- by JavaScript Kit (www.javascriptkit.com)
    * This notice must stay intact for usage
    * Visit JavaScript Kit at http://www.javascriptkit.com/ for this script and 100s more
    ***********************************************/
    
    if (document.getElementById)
    document.documentElement.className = 'jsclass'; //hide content for DOM capable browsers
    
    
    var randomordercontentdisplay={
       divholders:new Object(),
       masterclass: "randomordercontent",
    
       init:function(){
          if (!document.getElementById)
             return
          var alldivs=document.getElementsByTagName("div")
          var randomcontentsearch=new RegExp(this.masterclass+"\\s+(group\\d+)", "i") //check for CSS class="randomcontent groupX" (x=integer)
          for (var i=0; i<alldivs.length; i++){
             if (randomcontentsearch.test(alldivs[i].className)){
                if (typeof this.divholders[RegExp.$1]=="undefined"){ //if object to hold this group of divs doesn't exist yet
                   this.divholders[RegExp.$1]=new Object() //create object
                   this.divholders[RegExp.$1].ref=[] //create array to hold each div within group
                   this.divholders[RegExp.$1].contents=[] //create array to hold each div's content within group
                }
                   this.divholders[RegExp.$1].ref.push(alldivs[i]) //add this div to the array
                   this.divholders[RegExp.$1].contents.push(alldivs[i].innerHTML) //add this div's content to the array
             }
          }
       this.scrambleorder()
       },
    
       scrambleorder:function(){
          for (group in this.divholders){ //loop thru each array within object
             this.divholders[group].contents.sort(function() {return 0.5 - Math.random()}) //scramble contents array
             for (var i=0; i<this.divholders[group].ref.length; i++){
                this.divholders[group].ref[i].innerHTML=this.divholders[group].contents[i]
                this.divholders[group].ref[i].style.display="block"
             }
          }
       }
    }
    </script>
    
    <marquee behavior='scroll' direction='left' scrollamount='5'>
    
    
    <div class="randomordercontent group1">
    DRUGSTEP: christian parents worried about teenage son
    "have you been smoking dubstep?"
    "mom what??"
    "DON'T LIE TO ME WHERE'S THE SKRILLEX"
    </div>
    
    <div class="randomordercontent group1">
    UNEMPLOYED: teen fills out a job application
    HAVE YOU EVER BEEN CONVICTED OF A FELONY? Yes.
    IF YES, EXPLAIN. I murder every beat I rap on.
    </div>
    
    <div class="randomordercontent group1">
    JOURNALISM: Teen girl claimed she was "literally dying" after reading a text from her friend. Sources indicate she is in fact, not dying.
    </div>
    
    <div class="randomordercontent group1">
    SHY: teen refuses to get naked in front of her bf b/c she's "too fat" sources indicate bf "doesn't care" & "just wants to see some titties"
    </div>
    
    <div class="randomordercontent group1">
    CIGS: teen takes up smoking to appear cooler to his peers "have you taken up smoking?" "yes, i have" "you appear cooler to me now"
    </div>
    
    </marquee>
    
    <script type="text/javascript">
    randomordercontentdisplay.init()
    </script>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,454
    Thanks
    0
    Thanked 632 Times in 622 Posts
    That's a really antiquated script (as is easily seen by the use of the long dead language attribute at the top of the script).


    The easiest solution to this would be to use a separate script for each part of what you want to do.

    For example:

    http://www.felgall.com/jstip109.htm - my marquee script that can convert any div into a marquee simply by adding a class to the div.

    Then you simply add a second script above it that populates the div with the content in a random order. For example if you were to also give the div an id="rnd" you could use the following to populate it with entries from an array in random order:

    Code:
    Array.prototype.shuffle = function() {
       var s = [];
       while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
       while (s.length) this.push(s.pop());
       return this;
    }; 
    (function(ary) {
    document.getElementById('rnd').innerHTML = ary.shuffle().join(' ');
    })([
    'first random string',
    'second random string',
    'etc.'
    ]);
    With those scripts attached just before the </body> the HTML above it that it would uinteract with would simply read:
    Code:
    <div id="rnd" class="marquee"></div>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •