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

**alru111** · 09-17-2006, 12:21 AM

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>

**jscheuer1** · 09-17-2006, 04:32 AM

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.

**alru111** · 09-17-2006, 08:28 AM

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?

**jscheuer1** · 09-17-2006, 08:48 AM

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.

**alru111** · 09-17-2006, 08:53 AM

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

**jscheuer1** · 09-17-2006, 09:56 AM

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>

**alru111** · 09-17-2006, 10:52 AM

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.

**jscheuer1** · 09-17-2006, 11:13 AM

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.

**alru111** · 09-17-2006, 10:07 PM

Thanks, John, for all the help

**alru111** · 09-19-2006, 09:36 AM

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"

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions