Log in

View Full Version : Random Content Order script


will_hough
11-06-2006, 05:10 AM
1) Script Title: Random Content Order script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/randomcontentorder.htm

3) Describe problem: When using Internet Explorer it seems as if the images will never load in the status bar. After a refresh it works fine. This does not happen with Firefox.
<head>

<script type="text/javascript">

/***********************************************
* Random Content Order script- &#169; 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
***********************************************/

function randomizeContent(classname){
var contents=randomizeContent.collectElementbyClass(classname)
contents.text.sort(function() {return 0.5 - Math.random();})
for (var i=0; i<contents.ref.length; i++){
contents.ref[i].innerHTML=contents.text[i]
contents.ref[i].style.visibility="visible"
}
}

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

<td width="130" align="center"><div style="border:1px solid #fc0;text-align:center;color:#fc0;font-weight:bold;">
<a href="javascript:advertise('http://www.**.com/advertise.htm')">Advertise on **</a>
<div class="leftAd">
<hr align="center" width="100%" size="1" color="#FFFF00">
<a href="http://www.**.com" target="_blank"><img src="images/ads/sw-ad.gif" alt="" width="122" height="142" vspace="2" border="0" /></a>
</div>
<div class="leftAd">
<hr align="center" width="100%" size="1" color="#FFFF00">
<a href="http://www.**.net" target="_blank"><img src="images/ads/ms-ad.gif" alt="" width="122" height="140" vspace="2" border="0" /></a>
</div
><div class="leftAd">
<hr align="center" width="100%" size="1" color="#FFFF00">
<a href="http://www.**.com" target="_blank"><img src="images/ads/speed-blue_ad.gif" alt="" width="122" height="75" vspace="2" border="0" /></a>
</div>
<div class="leftAd">
<hr align="center" width="100%" size="1" color="#FFFF00">
<a href="javascript:advertise('http://www.**.com/advertise.htm')"><img src="images/ads/adhere.jpg" alt="" width="120" height="140" border="0"></a>
</div>
<script type="text/javascript">

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

</script></div></td>

URL's removed to avoid spamming.
jscheuer1
11-06-2006, 06:53 AM
URL's removed to avoid spamming.

Spamming by you or of you? In any case, a reload often just gives the browser more time or another chance at an image that is slow to load. It may be nothing more than that. Is there any reason why this should be the case? Like, are you on dial-up or is the bandwidth from the server tight?

Oh and, you don't have to worry about spamming the forum if the URL's you post are a part of your code and you are sincerely asking for help. In fact, a link to your problem page would assist us in helping you.

Added Later:

What's:


<a href="javascript:advertise('http://www.**.com/advertise.htm')">

do? It may be a part of the problem and better done like so:


<a href="http://www.**.com/advertise.htm" onclick="advertise(this.href);return false;">

if at all possible, especially for IE.
will_hough
11-06-2006, 04:31 PM
Spamming by you or of you?
By Me, no need for unnecessary URL's.


In any case, a reload often just gives the browser more time or another chance at an image that is slow to load. It may be nothing more than that. Is there any reason why this should be the case? Like, are you on dial-up or is the bandwidth from the server tight?

I'm on a T1, plenty of bandwidth on the server. This only happens with IE 6, not Firefox or Opera.


In fact, a link to your problem page would assist us in helping you.

http://www.cobratalk.com Left column.
jscheuer1
11-06-2006, 06:17 PM
Everything loads up the first time fine in all the browsers I used. Most of the images are a bit bloated (byte wise) for their display size but, not all that big of a load (from 1 to 6 K). I notice that you have omitted the style for this script, that may be a factor. I viewed the page in IE 7, IE 6, FF and Opera. The page itself seemed a bit slow to load in all these browsers but, not any more so than your average forum. I doesn't seem to hurt anything, does it?
will_hough
11-06-2006, 08:27 PM
Do you have your Status Bar displayed in IE?
Here is an image -

http://www.cobramini.com/cobratalk/images/post/status-bar.gif

All the images still load on my screen, but the status bar says they are not.
jscheuer1
11-06-2006, 10:34 PM
Yeah, but like I asked, does it hurt anything?
will_hough
11-07-2006, 06:25 AM
No, it does not 'hurt' anything, but it sure is annoying.
jscheuer1
11-08-2006, 10:28 AM
No, it does not 'hurt' anything, but it sure is annoying.

Yes, and I think it might be bad after all. I see in IE 7 that not only does the status bar say that it is still waiting, IE 7's whirling loading icon continues to whirl and a test of the page's load state reveals that it is not 'loaded'. This all means that the server may be continuing to get requests and send data, if so, this could rack up your total usage of bandwidth. This could also overload a server if there were many people viewing the page in any browser that caused this. Even if that's not a real problem, the fact remains that the page is not in a loaded state as far as the browser is concerned. This would prevent any onload functions from firing.

I experimented with the page a bit more and found that I could set a timeout to check if the page was loaded after - say, 5 seconds - and if it was not, reload the page using:


window.location=location.href

This would 'take care of it' But, this is not an acceptable solution because, what if it just takes longer to load the page on some systems? Those users will get caught in a loop of page reloads rendering the back button useless. Even for a one time reload, it adds one load to the history stack, making it so the back button would need to be hit twice to work. There are ways to reload without adding to the history stack but, these didn't solve the initial problem.

I played around a bit more and found that if I removed the other random script and all the linked style, the number of images outstanding was reduced to 1 or 2 on any given load - apparently depending upon an unknown factor or factors.

What I would do next is time consuming and with PHP pages, virtually impossible without access to the server. So I am not going to attempt it but, it would be to validate the page. But, I tried the script by itself with images on a valid fresh page and had the same problem so, it is probably nothing to do with that.

Until this can be figured out, I'd take it off of the page or at least remove it from execution in IE.
jscheuer1
11-08-2006, 12:06 PM
Here is a version of the script that utilizes the DOM to remove the actual elements and replace them with randomized copies of themselves:


<script type="text/javascript">

/***********************************************
* DOM Random Content Order script- © John Davenport Scheuer
* adapted from 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
* as first seen in http://www.dynamicdrive.com/forums
* username:jscheuer1
***********************************************/

function randomizeContent(classname){
if(typeof document.cloneNode!=='undefined'){
var contents=randomizeContent.collectElementbyClass(classname);
contents.ref.sort(function() {return 0.5 - Math.random();});
for (var i=0; i<contents.ref.length; i++){
contents.par[i].replaceChild(contents.ref[i],contents.theNodes[i]);
contents.ref[i].style.visibility="visible";
}
}
}

randomizeContent.collectElementbyClass=function(classname){ //return three arrays containing elements with specified classname, plus a clone of themselves, plus a list of their parentNodes
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 clones of the participating nodes
contentobj.par=new Array(); //array containing participating contents' parentNodes
contentobj.theNodes=[]; //array containing the participating nodes
var alltags=document.all? document.all : document.getElementsByTagName("*");
for (var i_tem = 0; i_tem < alltags.length; i_tem++)
if (typeof alltags[i_tem].className=="string" && alltags[i_tem].className.search(classnameRE)!=-1)
contentobj.theNodes[contentobj.theNodes.length]=alltags[i_tem];
for (var i=0; i<contentobj.theNodes.length; i++){
contentobj.par[contentobj.par.length]=contentobj.theNodes[i].parentNode;
contentobj.ref[contentobj.ref.length]=contentobj.theNodes[i].cloneNode(true);
}
return contentobj
}


</script>

This took care of the problem on a valid page at least. Usage is the same as the old version.
will_hough
11-13-2006, 04:14 PM
Here is a version of the script that utilizes the DOM to remove the actual elements and replace them with randomized copies of themselves:


<script type="text/javascript">
. . . .

This took care of the problem on a valid page at least. Usage is the same as the old version.

That worked perfectly! Thank you soooo mutch. I wish I knew a lot more about javascript, but my strong points are xhtml and css.

Thanks again, I'll be sticking around here and hopefully lend a hand to someone else. "Pay it forward"