PDA

View Full Version : 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/dynamicindex17/randomcontentorder.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:


<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:


<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:


<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
<!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
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"

jscheuer1
09-19-2006, 10:00 AM
Yes:


contents.ref[i].style.display="inline"

alru111
09-19-2006, 10:12 AM
:) figured it out myself - that was kind of obvious ;)

alru111
09-19-2006, 10:35 AM
75% of the time script gives 0 results for some reason.
Something might not work correctly.

alru111
09-19-2006, 11:03 AM
I found what the solution to my initial problem when content didn't randomize.
<table> and </table> tags were not inside of divs. For some reason script doesn't work with rows, only with whole tables.

jscheuer1
09-20-2006, 01:00 AM
I found what the solution to my initial problem when content didn't randomize.
<table> and </table> tags were not inside of divs. For some reason script doesn't work with rows, only with whole tables.

Yes, that is very much like what I meant by:


More likely there is something in the large block of text that is causing an error, like unopened or unclosed tags.

Having a table row or cell implies a table. These cannot be yanked around (in this case, randomized) without taking the implied table with them but, if you then have other table tags just 'hanging around', it confuses the heck out of the browser.

KingSky
08-08-2011, 09:21 PM
Thanks for posting this code, I was happy to find a correct answer to my question so quickly :)