Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Random Content Order script: How to vary the number of blocks displayed?

  1. #1
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random Content Order script: How to vary the number of blocks displayed?

    1) Script Title: Random Content Order script

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ntentorder.htm

    3) Describe problem: Trying to randomize the number of showing block.
    I need to vary the number of <DIV>...</DIV>blocks from 10 to 20.

    How can I do it?

    <script type="text/javascript">

    //randomize order of contents with DIV class="group1"
    randomizeContent("group1")
    randomizeContent("group2")

    </script>
    Last edited by alru111; 09-17-2006 at 12:28 AM.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    The number of blocks is determined by however many of these:

    HTML Code:
    <div class="group1">content</div>
    or similar with other initialized class names that you put on the page. If you want to add and remove blocks, depending upon just what sort of effect that you are going for, you could put some of them in another container:

    Code:
    <div id="options1">
    <div class="group1">content</div>
    <div class="group1">content</div>
    <div class="group1">content</div>
    <div class="group1">content</div>
    <div class="group1">content</div>
    </div>
    Then all of the items in the options1 container could be toggled with this:

    HTML Code:
    <span onclick="document.getElementById('options1').style.display=document.getElementById('options1').style.display=='none'? 'none' : 'block';">
    Toggle Items</span>
    It really is a separate thing and there are other scripts that can do this more elegantly but, that is the basic idea.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply

    I will try to explain what I mean.
    For example i have 200 <DIV> blocks
    <div class="group2">content1</div>
    but I need to pull only 5 of them.

    Can it be done by modifying the script?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Probably, which five? Would it be a randomly selected five, or would there be a menu of groups of five that one could choose from? Either way the script could be about as easily modified as one could write a separate routine to handle this other matter, which would probably be even easier.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    yes, randomly selected 5, well I actually wanted a range 5 < x < 10
    Is it possible to do?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <script type="text/javascript">
    
    /***********************************************
    * Random Content Order script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    * Modified in http://www.dynamicdrive.com/forums by jscheuer1
    ***********************************************/
    
    //list group name selectors, ex - ['.group1', '.group2']:
    var groups=['.group1']
    
    //set maximum number of items:
    var upperlim=9
    
    //set minimum number of items:
    var lowerlim=6
    
    // !!!!IMPORTANT - total number of items in each group must be greater than upperlim - IMPORTANT!!!!
    
    ////////////////////Stop Editing/////////////////
    
    if(document.getElementById)
    document.write('<style type="text/css">'+
    groups.join(', ')+' {'+
    'display: none;'+
    '}'+
    '<\/style>')
    
    function randomizeContent(classname){
    var x=upperlim*1+1-lowerlim, a=lowerlim*1-1,
    contents=randomizeContent.collectElementbyClass(classname), n=Math.ceil(Math.random()*x)+a;
    contents.text.sort(function() {return 0.5 - Math.random();})
    for (var i=0; i<n; i++){
    contents.ref[i].innerHTML=contents.text[i]
    contents.ref[i].style.display="block"
    }
    }
    
    randomizeContent.collectElementbyClass=function(classname){ //return two arrays containing elements with specified classname, plus their innerHTML content
    var classnameRE=new RegExp("(^|\\s+)"+classname+"($|\\s+)", "i") //regular expression to screen for classname within element
    var contentobj=new Object()
    contentobj.ref=new Array() //array containing references to the participating contents
    contentobj.text=new Array() //array containing participating contents' contents (innerHTML property)
    var alltags=document.all? document.all : document.getElementsByTagName("*")
    for (var i=0; i<alltags.length; i++){
    if (typeof alltags[i].className=="string" && alltags[i].className.search(classnameRE)!=-1){
    contentobj.ref[contentobj.ref.length]=alltags[i]
    contentobj.text[contentobj.text.length]=alltags[i].innerHTML
    }
    }
    return contentobj
    }
    
    </script>
    </head>
    <body>
    <div class="group1">
    Content 1
    </div>
    
    <div class="group1">
    Content 2
    </div>
    
    <div class="group1">
    Content 3
    </div>
    
    <div class="group1">
    Content 4
    </div>
    
    <div class="group1">
    Content 5
    </div>
    
    <div class="group1">
    Content 6
    </div>
    
    <div class="group1">
    Content 7
    </div>
    
    <div class="group1">
    Content 8
    </div>
    
    <div class="group1">
    Content 9
    </div>
    
    <div class="group1">
    Content 10
    </div>
    
    <div class="group1">
    Content 11
    </div>
    
    <div class="group1">
    Content 12
    </div>
    
    <div class="group1">
    Content 13
    </div>
    
    <div class="group1">
    Content 14
    </div>
    
    <div class="group1">
    Content 15
    </div>
    
    <div class="group1">
    Content 16
    </div>
    
    <div class="group1">
    Content 17
    </div>
    
    <div class="group1">
    Content 18
    </div>
    
    <div class="group1">
    Content 19
    </div>
    
    <div class="group1">
    Content 20
    </div>
    
    <div class="group1">
    Content 21
    </div>
    
    <div class="group1">
    Content 22
    </div>
    
    <div class="group1">
    Content 23
    </div>
    
    <div class="group1">
    Content 24
    </div>
    
    <div class="group1">
    Content 25
    </div>
    
    <script type="text/javascript">
    
    //randomize order of contents with DIV class="group1"
    randomizeContent("group1")
    
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, man, will be testing

    I have another question. In the original script is there any limit on the content inside of each <DIV>
    I am putting large blocks of text in them and they don't randomize, while two-three words work fine.

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by alru111
    In the original script is there any limit on the content inside of each <DIV>
    I am putting large blocks of text in them and they don't randomize, while two-three words work fine.
    In theory, there shouldn't be. But, there might be. More likely there is something in the large block of text that is causing an error, like unopened or unclosed tags.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks, John, for all the help

  10. #10
    Join Date
    Sep 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John, I am using this modified script with <span> tag but it inserts a line break.
    I gues to have it inline this has to be modified.
    contents.ref[i].style.display="block"

Bookmarks

Posting Permissions

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