PDA

View Full Version : Can't get more images to show with this code?



JRR
10-27-2013, 05:51 PM
Hello.

I have this old javascript code that I want to use on Halloween for my forum. I have put it in my test forum and it is actually putting the images in a the number it was made for but I want to add more images. When I add them to the array it still only displays six of the images and it also randomly chooses which six it wants to display also? You can open the page and see the images like a ghost and zombie along with four others and then open the page again and it may have dropped the zombie and displayed another?

I currently have it on my test forum to view:


http://betaitistheride.freemessageboards.com/

Here is the code with a added seventh image in the array:



<script type="text/javascript">
<!--

//Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
//Modified by Dynamic Drive for NS6 functionality
//visit http://www.dynamicdrive.com for this script
//Modified by jscheuer1 in http://www.dynamicdrive.com/forums
//to fall up, add doctype compatibility & account for
//differences in speeds among browsers

var speed=60 // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

//Pre-load your image below!
grphcs=new Array(7)
Image0=new Image();
Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif ";
Image1=new Image();
Image1.src=grphcs[1]="http://www.jr-richscooterdoc.com/HW/skel2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://www.jr-richscooterdoc.com/HW/skel3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://www.jr-richscooterdoc.com/HW/skel4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://www.jr-richscooterdoc.com/HW/skel5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://www.jr-richscooterdoc.com/HW/skel6.gif"
Image6=new Image();
Image6.src=grphcs[6]="http://www.jr-richscooterdoc.com/HW/skel7.gif"



//////////////// Stop Editing //////////////

function iecompattest(){
return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
}

Ypos=new Array();
Xpos=new Array();
Speed=new Array();
Step=new Array();
Cstep=new Array();
ns=(document.layers)?1:0;
ns6=(document.getElementById&&!document.all||window.opera)?1:0;

speed=ns6? speed-12 : speed

if (ns){
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write("<LAYER NAME='sn"+i+"' LEFT=0 TOP=0><img src="+rndPic+"></LAYER>");
}
}
else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}
document.write('</div></div>');
}
WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
for (i=0; i < Amount; i++){
Ypos[i] = Math.round(Math.random()*WinHeight);
Xpos[i] = Math.round(Math.random()*WinWidth);
Speed[i]= (Math.random()*5+3)*-1;
Cstep[i]=0;
Step[i]=Math.random()*0.1+0.05;
}
function fall(){
var WinHeight=(ns||ns6)?window.innerHeight:window.iecompattest().clientHeight;
var WinWidth=(ns||ns6)?window.innerWidth-70:window.iecompattest().clientWidth;
var hscrll=(ns||ns6)?window.pageYOffset:iecompattest().scrollTop;
var wscrll=(ns||ns6)?window.pageXOffset:iecompattest().scrollLeft;
for (i=0; i < Amount; i++){
sy = Speed[i]*Math.sin(90*Math.PI/180);
sx = Speed[i]*Math.cos(Cstep[i]);
Ypos[i]+=sy;
Xpos[i]+=sx;
if (Ypos[i] < 0 ){
Ypos[i]=WinHeight+60;
Xpos[i]=Math.round(Math.random()*WinWidth);
Speed[i]=(Math.random()*5+3)*-1;
}
if (ns){
document.layers['sn'+i].left=Xpos[i]+wscrll;
document.layers['sn'+i].top=Ypos[i]+hscrll;
}
else if (ns6){
document.getElementById("si"+i).style.left=Math.min(WinWidth,Xpos[i])+wscrll+'px';
document.getElementById("si"+i).style.top=Ypos[i]+hscrll-100+'px';
}
else{
document.all["si"+i].style.left=Xpos[i]+wscrll+'px';
document.all["si"+i].style.top=Ypos[i]+hscrll+'px';
}
Cstep[i]+=Step[i];
}
setTimeout('fall()',60);
}

window.onload=fall
//-->
</script>




I changed this to 7 thinking that would do the trick but not so?

grphcs=new Array(7)

Can someone help me fix this so it will display all of the images I want to add?

Thanks.

jscheuer1
10-28-2013, 07:14 AM
As long as the Amount is equal to or greater than the length of the array (it is here, 8 > 7), it will sometimes. The problem is that each image that's shown is picked at random from the array. In order to be sure to get them all, they must be selected in order with any overflow looping back to the first and starting from there. Make the change (red) to the highlighted line:


else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=i%grphcs.length;
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}

But this will result in the same images being picked in the same order each time. If that's OK with you, fine. For a more random effect that selects at least one of each image, use the more recent version of this script that we've been working on in the Autumn Leaves thread. It also has several other advantages over this version.

JRR
10-31-2013, 01:34 AM
Sorry John I haven't replied I've been ill I'll check this out and get back

Thanks

JRR
10-31-2013, 02:04 AM
John I tried this and I'm a bit confused? I did not find this line you mentioned in this section of code?




else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=i%grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}



I do see a section that is close?



else{
document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">');
for (i = 0; i < Amount; i++){
var P=Math.floor(Math.random()*grphcs.length);
rndPic=grphcs[P];
document.write('<img id="si'+i+'" src="'+rndPic+'" style="position:absolute;top:0px;left:0px">');
}


I tried this change and it was a real mess up. I changed this line:


var P=Math.floor(Math.random()*grphcs.length);

To this:


var P=i%Math.floor(Math.random()*grphcs.length);

But that was a total mess up in fact the software would not keep the small i but rather changed it to a capital I. It wiped out my banner and login page and I'm waiting for a solution from POB to get it out.

I don't mind the images loading in order, I just want to be able to see all the images I put in the array. I don't want to put in 7 images and the code limit it to 6 and choose what 6 for me to see.

JRR
10-31-2013, 02:11 AM
Ok I've got things back in order on my site so I'll wait for the next reply.

jscheuer1
10-31-2013, 06:43 AM
Change this:


var P=Math.floor(Math.random()*grphcs.length);

to:


var P=i%grphcs.length;

JRR
10-31-2013, 11:42 AM
OK John I did this and the code shuts down, nothing, nada. Not one image will appear or load? So what's next?

Thanks

jscheuer1
10-31-2013, 12:25 PM
Oops, I had a typo. I fixed it in my two previous posts, it should be:


var P=i%grphcs.length;

Not:


var P=i%grphcs.length);

romeshlogan
10-31-2013, 01:00 PM
There is nothing wrong in your coding. Only the skel2.gif was not displayed due to a semicolon mistake as seen at JRR's website. If the first image code is rectified without the semicolon as detailed below, all 7 images would be displaying perfectly fine.

Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif "; // wrong with a semicolon

Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif" // correct without a semicolon

Rgds
romeshlogan

jscheuer1
10-31-2013, 01:59 PM
That's not exactly true. The semi-colon there is optional. What needs to be removed is that space near the end (after gif and before "):


Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif ";

That image probably wasn't showing up. But that has nothing to do with how many images are shown, that's controlled by:


Amount=8; //Smoothness depends on image file size, the smaller the size the more you can use!

As long as that's equal to or greater than the length of the array of images, they will all be shown, sometimes. To make sure that they're always all shown make the change to (this code is slightly different, before it had a typo):


var P=i%grphcs.length;

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

JRR
10-31-2013, 02:19 PM
OK first here are both sites the code is on:

http://itistheride.boards.net/

http://www.thescooterprofessor.proboards.com/

Now I went in and cleaned up the suggested things, changed the AMOUNT to 7 to go with the ARRAY 0f 7. Took out the space at the end of one of the image lines and made the code change as John said and all is well.

Now one last question John? If I want to add more images in the array just be sure the Amount and array = the same number of images, correct?

Thanks

jscheuer1
11-05-2013, 02:52 PM
Yes and no. You can follow that practice and things will work out. But array declaration doesn't have to be so formal, in fact it's better if it's not. Instead of doing (formal array declaration):


var grphcs = new Array(6);

You can just do (informal array declaration):


var grphcs = [];

Now it doesn't matter how many images there are in the array as long as there's at least one. The number of images shown at once is what the Amount controls. So if you have only one image and the amount is 10, you will see ten of the same image at a time. If you have 20 images in the array and the amount is still 10, you will see only the first ten.

This is the same in the more recent code, except with it, each time the page loads the images are shuffled, so if you have more images in the array than set for in the amount property, different ones will be used each time the page loads.

JRR
11-05-2013, 04:20 PM
Ok so if I set this code section like this:




var speed=60 // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount=7; //Smoothness depends on image file size, the smaller the size the more you can use!

//Pre-load your image below!
var grphcs = [];
Image0=new Image();
Image0.src=grphcs[0]="http://www.jr-richscooterdoc.com/HW/skel1.gif ";
Image1=new Image();
Image1.src=grphcs[1]="http://www.jr-richscooterdoc.com/HW/skel2.gif"
Image2=new Image();
Image2.src=grphcs[2]="http://www.jr-richscooterdoc.com/HW/skel3.gif"
Image3=new Image();
Image3.src=grphcs[3]="http://www.jr-richscooterdoc.com/HW/skel4.gif"
Image4=new Image();
Image4.src=grphcs[4]="http://www.jr-richscooterdoc.com/HW/skel5.gif"
Image5=new Image();
Image5.src=grphcs[5]="http://www.jr-richscooterdoc.com/HW/skel6.gif"
Image6=new Image();
Image6.src=grphcs[6]="http://www.jr-richscooterdoc.com/HW/skel7.gif"


with the informal declaration, 7 images, and the amount at 7 then all 7 images will load each time? But If I set the amount to say 4 then it would grab 4 images and it may reload a different set of 4 each time? If this is the case then one could store many images in their host and then put the link in to match what you want it to grab and control the number of images shown with the "amount number"

That would be cool.

jscheuer1
11-05-2013, 05:42 PM
With this code it would just grab the first 4 each time. With the newer code in our other thread it it would grab 4 at random each time the page loads.

JRR
11-06-2013, 01:48 AM
I understand Thanks.

JRR
10-09-2014, 01:05 AM
http://itistheride.boards.net/

http://thescooterprofessor.proboards.com/

Good Evening John.

I've got this falling images code on 3 of my forums and I listed two above. I'm having something weird happening. If I out my cursor off the edge of the page on the screen all is well, leaves and banner work at normal speed. But if I put my cursor anywhere on that page with the leaves falling everything goes into slow motion. Is this just me or can you check to see if it does the same for you and help fix it please?

I just asked another member and it is actually slowing down the forum?

EDIT: I checked this on IE9 with W7 and IE11 using W8.1 and it seems this is a IE issue. When trying it on Firefox there are no issues at all, leaves fall nicely and the forum isn't slowing down.

jscheuer1
10-09-2014, 04:28 PM
There's such a thing as too much animation on a page. With a crawler, a slider and falling leaves, you're getting there - probably already are there for some people. Animation uses clock ticks of CPU time. And often requires memory to hold its motion logic. The browser must mediate with the OS, which in turn is the go between for the hardware itself. If the computer and/or browser/OS combo isn't up to supporting that much animation, things will slow down, particularly if one additional thing is thrown on the heap - like keeping track of a moving cursor.

I didn't have that problem, but as I started inspecting the page to see more of what was going on, at that point things did bog down.

I know many people like the leaf thing this time of year, but believe me, on a page that has much information (like yours), it's more of a distraction/annoyance than anything else. I'd get rid of it, especially as it's probably the most intensive animation on those pages, and even if it isn't, it's close, and it's not really contributing much to the page.

JRR
10-09-2014, 04:58 PM
All sounds very correct John but if it doesn't have any problems on FF then why IE? This is a old code made back in the time of IE6 and NS6 I believe and the funny thing also is I can use a different version of it with now sway and no issues?

I don't use this very often, right now the leaves are falling and my members like it. I'll change it to a Halloween theme for a few days around Halloween, same with thanksgiving and Christmas. Even use it for snow too. If need be I'll use the one without the sway but I really like the sway. I was thinking it needed updating to the newer IE format? You updated some yourself:


Modified by jscheuer1 in http://www.dynamicdrive.com/forums
* 01/11 for optional direction, allow effect to
* work fully on wide pages, to not create 'dancing scrollbars' on small
* pages & use jQuery methods. Requires standards mode DOCTYPE
* tested in all current version major browsers including IE 8 & IE 9 Beta. */
/* Updated further 10/13 to allow for stop and start and multiple usage per page, adds preload confirmation before start */




I don't know how much differences there are between IE8,IE9 and the current one I use IE11? I checked this on my wife's computer with IE9 and it was the same way which for sure says maybe too much as you stated earlier?

JRR
10-09-2014, 06:50 PM
John I've changed to this oldie code and for the life of me I can't speed it up any? Can you help me with that? It doesn't slow the rest of the forum down.




<script type="text/javascript">

/******************************************
* Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
* Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
* Last updated Nov 9th, 05' by DD. This notice must stay intact for use
******************************************/

//Configure below to change URL path to the snow image
var snowsrc = "http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png";
// Configure below to change number of snow to render
var no = 48;
// Configure whether snow should disappear after x seconds (0=never):
var hidesnowtime = 0;
// Configure how much snow should drop down before fading ("windowheight" or "pageheight")
var snowdistance = "pageheight";


///////////Stop Config//////////////////////////////////

var ie4up = (document.all) ? 1 : 0;
var ns6up = (document.getElementById && !document.all) ? 1 : 0;

function iecompattest() {
return (document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body
}

var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 800, doc_height = 600;

if (ns6up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
} else if (ie4up) {
doc_width = iecompattest().clientWidth;
doc_height = iecompattest().clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
//snowsrc = (snowsrc.indexOf("dynamicdrive.com") != -1) ? "snow.png" : snowsrc
for (i = 0; i < no; ++i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random() * (doc_width - 50); // set position variables
yp[i] = Math.random() * doc_height;
am[i] = Math.random() * 20; // set amplitude variables
stx[i] = 0.02 + Math.random() / 10; // set step variables
sty[i] = 0.7 + Math.random(); // set step variables
if (ie4up || ns6up) {
if (i == 0) {
document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" + snowsrc.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*14+1)+".$1"))
+ "' border=\"0\"><\/a><\/div>");
} else {
document.write("<div id=\"dot" + i + "\" style=\"POSITION: absolute; Z-INDEX: " + i + "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" + snowsrc.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*14+1)+".$1"))
+ "' border=\"0\"><\/div>");
}
}
}

function snowIE_NS6() { // IE and NS6 main animation function
doc_width = ns6up ? window.innerWidth - 10 : iecompattest().clientWidth - 10;
doc_height = $(document).height()
for (i = 0; i < no; ++i) { // iterate for every dot
yp[i] += sty[i];
if (yp[i] > doc_height - 60) {
xp[i] = Math.random() * (doc_width - am[i] - 60);
yp[i] = 0;
stx[i] = 0.02 + Math.random() / 10;
sty[i] = 0.7 + Math.random();
}
dx[i] += stx[i];
document.getElementById("dot" + i).style.top = yp[i] + "px";
document.getElementById("dot" + i).style.left = xp[i] + am[i] * Math.sin(dx[i]) + "px";
}
snowtimer = setTimeout(snowIE_NS6, 10);
}

function hidesnow() {
if (window.snowtimer)
clearTimeout(snowtimer)
for (i = 0; i < no; i++)
document.getElementById("dot" + i).style.visibility = "hidden"
}

if (ie4up || ns6up) {
snowIE_NS6();
if (hidesnowtime > 0)
setTimeout("hidesnow()", hidesnowtime * 2000)
}

</script>