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>
The number of blocks is determined by however many of these:
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:HTML Code:<div class="group1">content</div>
Then all of the items in the options1 container could be toggled with this: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>
It really is a separate thing and there are other scripts that can do this more elegantly but, that is the basic idea.HTML Code:<span onclick="document.getElementById('options1').style.display=document.getElementById('options1').style.display=='none'? 'none' : 'block';">
Toggle Items</span>
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?
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.
yes, randomly selected 5, well I actually wanted a range 5 < x < 10
Is it possible to do?
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>
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.
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.Quote:
Originally Posted by alru111
Thanks, John, for all the help
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"
Yes:
Code:contents.ref[i].style.display="inline"
:) figured it out myself - that was kind of obvious ;)
75% of the time script gives 0 results for some reason.
Something might not work correctly.
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:Quote:
Originally Posted by alru111
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.Quote:
Originally Posted by myself
Thanks for posting this code, I was happy to find a correct answer to my question so quickly :)