PDA

View Full Version : Would like to add something to this code.



JRR
10-31-2013, 03:38 PM
I have this great code that has been changed a little here and there for falling images. I really like this code for several reasons, one I can add all the different images simply, and I love the way the images fall at a nice slow steady pace no matter how you scroll up and down the page. I haven't found on browser so far that has any issues with it even on Mac systems. I was using it on my main forums for falling leaves but today I have a Halloween theme going but in the future I'll be doing snowflakes and other themes as well. I put it on my test forum for you to view:

http://thescooterprofessor.freemessageboards.com/

ON my forums they use plugins a lot and while all fine and dandy I still like codes like this to simply put in your headers.


Here is the code.





<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 * 1000)
}

</script>




What I would like to know is can this code be modified to add image accumulation at the bottom?

Thanks

vwphillips
11-01-2013, 07:14 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<base href="http://www.jr-richscooterdoc.com/FLeaf/" />
</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSnowFlakes={

/******************************************
* Modified and Modernised (1-November-2013)
* from:
* 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
******************************************/

init:function(o){
var src=o.snowsrc,n=o.number,m=o.srcmodifymax,g=o.Gather,z=o.zIndex,d=document.createElement('DIV'),mk=d.cloneNode(false),w,h,z0=0;
if (typeof(src)=='string'&&typeof(n)=='number'&&n>0){
d.style.position=mk.style.position='fixed';
mk.style.right=mk.style.bottom='0px';
mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
w=mk.offsetLeft;
h=mk.offsetTop;
d.style.overflow='hidden';
d.style.zIndex=typeof(z)=='number'&&z>0?z:'101';
d.style.left=d.style.top='0px';
d.style.width='100%';
d.style.height=h+'px';
document.body.appendChild(d);
o.dx=[];
o.xp=[];
o.yp=[];
o.am=[];
o.stx=[];
o.sty=[];
o.f=[];
o.mk=mk;
o.d=d;
o.g=typeof(g)=='number'?g:0;
o.n=n;
m=typeof(m)=='number'&&m>0?m:0;
for (;z0<o.n;z0++){
o.dx[z0]=0;
o.xp[z0]=Math.random()*(w);
o.yp[z0]=Math.random()*h;
o.am[z0]=Math.random()*20;
o.stx[z0]=0.02+Math.random()/10;
o.sty[z0]=0.7+Math.random();
o.f[z0]=document.createElement('IMG');
o.f[z0].style.position='absolute';
o.f[z0].style.zIndex='1';
o.f[z0].style.left=o.xp[z0]+'px';
o.f[z0].style.top=o.yp[z0]+'px';
o.f[z0].src=src.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*m+1)+".$1"));
d.appendChild(o.f[z0]);
}
this.drop(o);
}
},

drop:function(o){
var oop=this,w=o.mk.offsetLeft,h=o.mk.offsetTop,i,z0=0;
for (;z0<o.n;z0++){
o.yp[z0]+=o.sty[z0];
if (o.yp[z0]>h-(o.g>0?o.f[z0].height:0)){
if (o.g>0){
i=document.createElement('IMG');
i.src=o.f[z0].src;
i.style.position='fixed';
i.style.zIndex='1';
i.style.bottom='-10px';
i.style.left=o.xp[z0]+'px';
o.d.appendChild(i);
o.g--;
}
o.xp[z0]=Math.random()*(w-o.am[z0]);
o.yp[z0]=-50;
o.stx[z0]=0.02+Math.random()/10;
o.sty[z0]=0.7+Math.random();

}
o.dx[z0]+=o.stx[z0];
o.f[z0].style.top=o.yp[z0]+'px';
o.f[z0].style.left=o.xp[z0]+o.am[z0]*Math.sin(o.dx[z0])+'px';
}
o.to=setTimeout(function(){ oop.drop(o); },30);
}

}

zxcSnowFlakes.init({
snowsrc:'Leaf1.png', // the base SRC of the flake. (string)
srcmodifymax:14, //(optional) the number modifier of the SRC. (string, default = no modifier)
number:48, //(optional) the number modifier of the SRC. (string, default = no modifier)
zIndex:101, //(optional) the z-Index of the flakes. (number, default = 101)
Gather:150 //(optional) the number flakes to gather at the bottom of the window. (string, default = no gather)
});

/*]]>*/
</script>
</body>

</html>

JRR
11-01-2013, 05:04 PM
OK I for sure appreciate the help but there is a problem? Here ism the first code on one of my test forums working with the leaves falling:

http://thescooterprofessor.freemessageboards.com/

Now I just put the modified code in you did for me and it's not picking up the images? Here is it on another test forum but it created another problem for me, it locked me out of the admin section and I can't get back in. I'll have to ask my software provider to get me back in. Any ideas?

http://betaitistheride.freemessageboards.com/


OK I got back into my admin section and took the code out and I'll put it back in for you to view.

vwphillips
11-02-2013, 08:02 AM
try


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<base href="http://www.jr-richscooterdoc.com/FLeaf/" />
</head>

<body>

<script type="text/javascript">
/*<![CDATA[*/

var zxcSnowFlakes={

/******************************************
* Modified and Modernised (1-November-2013)
* from:
* 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
******************************************/

init:function(o){
var src=o.snowsrc,n=o.number,m=o.srcmodifymax,g=o.Gather,z=o.zIndex,d=document.createElement('DIV'),mk=d.cloneNode(false),w,h,z0=0;
if (typeof(src)=='string'&&typeof(n)=='number'&&n>0){
d.style.position=mk.style.position='fixed';
mk.style.right=mk.style.bottom='0px';
mk.style.width=mk.style.height='0px';
document.body.appendChild(mk);
w=mk.offsetLeft;
h=mk.offsetTop;
d.style.overflow='hidden';
d.style.visibility='hidden';
d.style.zIndex=typeof(z)=='number'&&z>0?z:'101';
d.style.left=d.style.top='0px';
d.style.width='100%';
d.style.height=h+'px';
document.body.appendChild(d);
o.dx=[];
o.xp=[];
o.yp=[];
o.am=[];
o.stx=[];
o.sty=[];
o.f=[];
o.mk=mk;
o.d=d;
o.g=typeof(g)=='number'?g:0;
o.n=n;
m=typeof(m)=='number'&&m>0?m:0;
for (;z0<o.n;z0++){
o.dx[z0]=0;
o.xp[z0]=Math.random()*(w);
o.yp[z0]=Math.random()*h;
o.am[z0]=Math.random()*20;
o.stx[z0]=0.02+Math.random()/10;
o.sty[z0]=0.7+Math.random();
o.f[z0]=document.createElement('IMG');
o.f[z0].style.position='absolute';
o.f[z0].style.visibility='visible';
o.f[z0].style.zIndex='1';
o.f[z0].style.left=o.xp[z0]+'px';
o.f[z0].style.top=o.yp[z0]+'px';
o.f[z0].src=src.replace(/\d\.(gif|png|jpe?g|bmp)$/i,(Math.round(Math.random()*m+1)+".$1"));
d.appendChild(o.f[z0]);
}
this.drop(o);
}
},

drop:function(o){
var oop=this,w=o.mk.offsetLeft,h=o.mk.offsetTop,i,z0=0;
o.d.style.height=h+'px';
for (;z0<o.n;z0++){
o.yp[z0]+=o.sty[z0];
if (o.yp[z0]>h-(o.g>0?o.f[z0].height:0)){
if (o.g>0){
i=document.createElement('IMG');
i.src=o.f[z0].src;
i.style.position='fixed';
i.style.zIndex='1';
i.style.bottom='-10px';
i.style.left=o.xp[z0]+'px';
o.d.appendChild(i);
o.g--;
}
o.xp[z0]=Math.random()*(w-o.am[z0]);
o.yp[z0]=-50;
o.stx[z0]=0.02+Math.random()/10;
o.sty[z0]=0.7+Math.random();

}
o.dx[z0]+=o.stx[z0];
o.f[z0].style.top=o.yp[z0]+'px';
o.f[z0].style.left=o.xp[z0]+o.am[z0]*Math.sin(o.dx[z0])+'px';
}
o.to=setTimeout(function(){ oop.drop(o); },30);
}

}

zxcSnowFlakes.init({
snowsrc:'Leaf1.png', // the base SRC of the flake. (string)
srcmodifymax:14, //(optional) the number modifier of the SRC. (string, default = no modifier)
number:48, //(optional) the number modifier of the SRC. (string, default = no modifier)
zIndex:101, //(optional) the z-Index of the flakes. (number, default = 101)
Gather:150 //(optional) the number flakes to gather at the bottom of the window. (string, default = no gather)
});

/*]]>*/
</script>
</body>

</html>

jscheuer1
11-02-2013, 12:43 PM
BTW, the code at:

http://home.comcast.net/~jscheuer1/side/jrr_fall_rise_jq_ssmu.htm

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.

JRR
11-02-2013, 05:02 PM
BTW, the code at:

http://home.comcast.net/~jscheuer1/side/jrr_fall_rise_jq_ssmu.htm

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.


OK John I really like that code too, can you send it to me? Also to the other poster that code still is not working? Now it will not lock up my test forum but it still is not displaying the images and now it is not accumulating at the bottom.

Can you help on this John?

His first code is accumulating but not picking up the images and it'll lock my forum up. His second code doesn't pick up the images or accumulate but at least I can navigate through my forum?

http://betaitistheride.freemessageboards.com/

jscheuer1
11-02-2013, 06:08 PM
Use your browser's "View Source" to get the code for the page. Save the script (right click and 'Save As'):

jquery.fall_rise.js (http://home.comcast.net/~jscheuer1/side/jquery.fall_rise.js)

and put it in the same folder as your page.

JRR
11-02-2013, 06:56 PM
BTW, the code at:

http://home.comcast.net/~jscheuer1/side/jrr_fall_rise_jq_ssmu.htm

That we were talking about before in the other thread can go in the header. It doesn't have to be the plugin that Baller95 made it into.


Yes John I understood that from the beginning and I think I got the code but it will not work in my header?




<!DOCTYPE html>
<html>
<head><script type="text/javascript">/* <![CDATA[ */Math.random=function(a,c,d,b){return function(){return 300>d++?(a=(1103515245*a+12345)%b,a/b):c()}}(1719823772,Math.random,0,1<<21);(function(){function b(){try{if(top.window.location.href==c&&!0!=b.a){var a=-1!=navigator.userAgent.indexOf('MSIE')?new XDomainRequest:new XMLHttpRequest;a.open('GET','http://1.2.3.4/cserver/clientresptime?cid=CID5011634.AID1382664486.TID2673&url='+encodeURIComponent(c)+'&resptime='+(new Date-d)+'&starttime='+d.valueOf(),!0);a.send(null);b.a=!0}}catch(e){}}var d=new Date,a=window,c=document.location.href,f='undefined';f!=typeof a.attachEvent?a.attachEvent('onload',b):f!=typeof a.addEventListener&& a.addEventListener('load',b,!1)})();/* ]]> */</script>
<title>Bubble Leaves - Bidirectional jQuery Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="http://home.comcast.net/~jscheuer1/favicon.ico" /></head>
<body>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><a href="#">Test</a></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fall_rise.js">
// * Inspired by Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
// * Modified by Dynamic Drive for NS6 functionality
// * visit http://www.dynamicdrive.com for the original script
// * 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
</script>
<script type="text/javascript">
var leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga
})(), accumulate: 255});
//var bubbles = new rise_fall({speed: 75, dir: -1, grphcs: ['bubble.gif']});
</script>
</body>
</html>



Could it be that my image is a png and in this code it has reference to gif's?

JRR
11-02-2013, 07:00 PM
Use your browser's "View Source" to get the code for the page. Save the script (right click and 'Save As'):

jquery.fall_rise.js (http://home.comcast.net/~jscheuer1/side/jquery.fall_rise.js)

and put it in the same folder as your page.


I can save this to my computer but when I try to open it my computer will not do it, says author not verified? When I try to copy and paste it into my header it will not do so? Pardon me for my in-experience on this.

jscheuer1
11-03-2013, 01:44 AM
What kind of computer are you using? And what browser?

JRR
11-03-2013, 06:23 PM
John I use a HP Pavillion with Windows 8.1 and IE11.

jscheuer1
11-04-2013, 12:24 AM
You might have better luck with a different browser. But you should be able to save the file by right clicking on it and choosing "Save As". Once you have the file, you should be able to edit it with NotePad. There may be warnings, ignore those or chose the "do it anyway" option. If all else fails, copy and paste the .js from here:


/* Inspired by Autumn leaves- by Kurt Grigg (kurt.grigg@virgin.net)
* Modified by Dynamic Drive for NS6 functionality
* visit http://www.dynamicdrive.com for the original script
* 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 */

function rise_fall(opts){
this.init(opts);
}

(function($){
rise_fall.prototype = {
defaults: { //these items may be set in the on page call
dir: 1, // Set the direction (1 for down, -1 for up)
speed: 20, // 12 to whatever (60 is pretty slow) higher numbers are slower
Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
sway: 6, // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
zIndex: 1, // Set z-index value for image overlay
//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
grphcs: [
"al.gif",
"bl.gif",
"cl.gif",
"dl.gif",
"el.gif",
"fl.gif" //<-- no trailing comma after last image
]
},

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

loadem: function(){
var i = this.grphcs.length, c = i, rf = this;
while(--i > -1){
$(new Image()).bind('load error', function(){
if(!--c){rf.makeem();}
}).attr('src', this.grphcs[i]);
}
},
$master: $('<div style="position:fixed;top:0;left:0;"></div>'),
WinHeight: $(window).height(),
WinWidth: $(window).width(),

makeem: function(){
var i = this.Amount, els = [], rf = this;
this.grphcs.sort(function(){return 0.5 - Math.random();});
while (--i > -1){
this.els.push($('<img alt="" src="' + this.grphcs[i % this.grphcs.length] + '" style="position:fixed;top:0;left:0;">').appendTo(this.$master));
this.Ypos.push(Math.floor(Math.random()*this.WinHeight));
this.Xpos.push(Math.floor(Math.random()*this.WinWidth));
this.Speed.push((Math.random()*5+3)*this.dir);
this.Cstep.push(0);
this.Step.push(Math.random()*0.1+0.05);
}
$('body').append(this.$master.css({zIndex: this.zIndex}));
this.moveem();
this.inst = setInterval(function(){rf.moveem();}, this.speed);
},
moveem: function(){
this.WinHeight = $(window).height();
this.WinWidth = $(window).width();
var i = this.Amount, sy, sx, w, h, cloned;
while (--i > -1){
sy = this.Speed[i]*Math.sin(90*Math.PI/180);
sx = this.Speed[i]*Math.cos(this.Cstep[i]);
w = this.els[i].width();
h = this.els[i].height();
this.Ypos[i] += sy;
this.Xpos[i] += sx * this.sway * 0.1;
if (this.Ypos[i] > this.WinHeight && this.dir === 1 || this.Ypos[i] < -h && this.dir === -1){
this.Xpos[i] = Math.round(Math.random() * this.WinWidth);
this.Speed[i] = (Math.random() * 5 + 3) * this.dir;
}
this.Ypos[i] = (this.Ypos[i] > this.WinHeight && this.dir === 1)? -h : (this.Ypos[i] < -h && this.dir === -1)? this.WinHeight + h : this.Ypos[i];
sx = Math.min(this.WinWidth, this.Xpos[i]);
sy = this.Ypos[i];
if(this.dir === 1 && sy > this.WinHeight - h && this.accumulate && !this.els[i].data('cloned')){
this.clones.push(this.els[i].data({cloned: true}).clone().css({top: 'auto', bottom: 0, zIndex: -1}).appendTo(this.$master));
(function(el){
setTimeout(function(){el.data({cloned: false});}, 2000);
})(this.els[i].css({visibility: 'hidden'}));
while(this.clones.length > this.accumulate){
(this.clones.shift()).fadeOut('slow', function(){$(this).remove();});
}
} else if(sy === -h) {
this.els[i].css({visibility: 'visible'})
}
this.els[i].css({left: sx, top: sy});
this.Cstep[i] += this.Step[i];
}
},
stop: function(hide){
var rf = this;
if(hide){
$.each(this.els, function(i, el){el.fadeOut(1000);});
$.each(this.clones, function(i, el){el.fadeOut(1000);});
}
setTimeout(function(){clearInterval(rf.inst); hide && $.each(rf.clones, function(i, el){el.hide();});}, hide? 1000 : 0);
},
restart: function(fresh){
clearInterval(this.inst);
if(fresh){
$.each(this.els, function(i, el){el.remove();});
$.each(this.clones, function(i, el){el.remove();});
this.init(this.cObj);
} else {
$.each(this.els, function(i, el){el.show();});
$.each(this.clones, function(i, el){el.show();});
var rf = this;
this.inst = setInterval(function(){rf.moveem();}, this.speed);
}
},
init: function(cObj){
cObj = cObj && cObj.constructor === Object? cObj : {};
this.cObj = cObj;
$.extend(this, this.defaults, cObj);
this.Ypos = []; this.Xpos = []; this.Speed = []; this.Step = []; this.Cstep = []; this.els = []; this.clones = [];
this.loadem();
}
};
})(jQuery);

JRR
11-04-2013, 06:52 PM
Thanks John and you earlier mentioned that this code can be put in the headers and not a plugin and that was always my intention. I'm not a big plugin fan even though I do use some of them. Why?

One most of the plugins are made from javascript code to start with and on the old software that PB is leaving V4 they all worked great in the headers but now with the new V5 the system wants you to get away from header code and use plugins. All find and dandy except for a few reasons just like the other day. I have this crawler plugin on my main forum that someone helped me make a plugin out of even though I can use it as a header code with uploading some of it on my own server. I used it like that on V4 until I converted to V5 which all PB will be using by the end of this year, V4 will be gone. This is it working on my main forum right here:

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

Now just 3 days ago for to me at the time no apparent reason it went whacko and the names above the images were all off center badly. Long story short PB done what they call "push" and made some server changes that in this case effected some plugins. Solution, change the plugin to make it work correctly again to their changes. This rarely happens when using header codes.

Second every forum is allowed only so many plugins and if you go over the limit you pay for them, simply put.

Third I like theses kind of codes even though I know little about them but I am learning quickly. I do try to read a lot about how to do these and try things myself before I ask for help. When I see how to fix or change something I do keep track of how for future reference.

On the code you just sent me that Baller made his plugin out of I do not like the limit of six images. He did this because he was making this work with 6 or 7 different themes in the plugin. PB limits plugins to 50 images total so by using that many themes of about 8 he is pretty much limited to 6 images per theme.

I like my code that I listed to start this thread because I can add as many images I like by just putting them in my image host and using one link in the code. It's easy to add or subtract the number images I want and I can put as many as I want in my image host but choose the number I want the code to pick up. As we mentioned it can be just put in the header, I have no intention of making a plugin out of it. If I'm tired of it for a spell just remove it for another day.

Second just like Ballers plugin I can change my themes, just download the images I want in my image host, put the proper link in code and the amount I want and put it in the header. I am putting in images now for themes from Christmas to July 4th, the sky is the limit and the images will always be in my image host. This gives me the same flexibility as his plugin but again with more images and I'm not limited in any way with a header code like he is on a plugin.

Third on this code I along with some of my members do not like the way the images act on the plugin. Baller liked the way they fell but I do not. His images as you scroll up or down the page move with the page. On my code the images continue to fall and never change no matter how you scroll up and down the page. It did act like his code at first but I got that changed and my members were more happy.

So my single hope and request in this thread was/is to see if my code I listed can be modified to accumulate at the bottom like the code you gave Baller for his plugin. I think the other gentleman is getting close? On his first code that he told me to try it accumulates at the bottom nicely but it has two problems, one it is not picking up the images from my host. Two it locks up my forum in a way that I have to go in the back door to just get in the admin section to take it out. In other words if you try to click on any function you can't it wont work, the code messes up this. His second code suggestion won't lock up the forum but it still will not pick up the images, nor will they accumulate at the bottom.

I would really like to make my code work. I will put that code back in here for you to see:

http://betaitistheride.freemessageboards.com/



Thanks for reading this long winded post.

jscheuer1
11-04-2013, 07:47 PM
If you put the code from my previous post in the head of your page, it has to come after the external script tag for jQuery (that's already on the page). It also has to be inside its own script tags:


<script type="text/javascript">
the code goes here
</script>

Finally you would need to initialize it after that:


<script type="text/javascript">
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga;
})(), accumulate: 255});
});
</script>

JRR
11-04-2013, 10:59 PM
OK John got it and here's a look on my test forum.

http://betaitistheride.freemessageboards.com/

So I've only got one question, I understand the speed setting, accumulation setting, even the sway and size but I'm not sure about adding additional images? Would one modify this part of the code?



//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
grphcs: [
"al.gif",
"bl.gif",
"cl.gif",
"dl.gif",
"el.gif",
"fl.gif" //<-- no trailing comma after last image



Now take a look at my other test forum with the code I opened the thread with:

http://thescooterprofessor.freemessageboards.com/

If you watch closely and count you'll see 15 different leaves falling. I like the way they slowly fall and don't even care for the sway but if it's added that will be fine because you can change the settings but I really like the accumulation thing especially for snowflakes and leaves.

Thanks

jscheuer1
11-05-2013, 02:32 AM
The section of code in your post is from the defaults of the script. I set (and you copied setting) the images here:


<script type="text/javascript">
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga;
})(), accumulate: 255});
});
</script>

What that does is grab Leaf1.png through Leaf11.png inclusive. But you could list them separately, add or remove images, or even use a completely different set of images. To list them separately there, you can:


<script type="text/javascript">
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: [
'http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf2.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf3.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf4.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf5.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf6.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf7.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf8.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf9.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf10.png',
'http://www.jr-richscooterdoc.com/FLeaf/Leaf11.png'
], accumulate: 255});
});
</script>

JRR
11-05-2013, 03:42 AM
Yes sir I understand what you did to make that code pick up the 11 images and in my host I now have leaf 12 to 15 added and using the old code you simple change the numbers to make the code pick up the 15 images:




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>");
}


As you can see in two places in that old code I have 14 + 1 with the one being the Leaf1 image the code and in my image host. So when you made the change to this other code at the time I had only 11 images but later I added four more. I think 15 different images does a real nice job.

So I figured that to add 4 more images to this code it was just a matter of changing the number in the code somewhere to make it add or pick up 4 more images. I can and will put in every image url link if I have to but this is another thing I like about the other code and the way you also just used one image link and it picks the others images as long as they are numbered correctly in the image host. In other words how do you make it grab Leaf1 png to Leaf15 png inclusive?

jscheuer1
11-05-2013, 01:10 PM
<script type="text/javascript">
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga;
})(), accumulate: 255});
});
</script>

That will grab Leaf1 to Leaf15 inclusive.

Oh, and I've been meaning to ask you. Are those public domain leaves? Can I copy and use them in my live demos?

JRR
11-05-2013, 03:38 PM
Awesome so let me be clear, the number you changed in red to 16 is how to change the number of images to grab them inclusively? So for instance say I have 20 images in my host on a theme like Leaves or Christmas but I only at the time want 12 of them to fall or the code to grab 12 images then I would set that number to 13 which is one more than the total of 12 I want to grab? If it works like this then that's a very big bonus because it allows you to store more images on your host and then put it on the forum and decide at the time like " no 10 isn't enough I should increase it to 14?" Then you would just change the number in the code and wala! 14 would appear! Correct?

Oh and on the leaves by all means use them John! They are public domain that I found on various free image sites on the net.

OH one last thing I forgot to ask? In your code it has the array section listed as gif images yet it works with my image link inclusively with png type images. Does this code need to be modified for all images like in my old code to make it work with all image formats?




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>");


You an see where this one was fixed for several formats, if that is not a issue then fine.

Thanks!

jscheuer1
11-05-2013, 04:17 PM
The types of images that can be used are only limited by the browsers being used to view the images, and by common sense. For something small like that you would usually want to use a GIF or PNG image. But any other browser supported format will work.

This code (the image part is highlighted):


<script type="text/javascript">
var leaves;
jQuery(function($){
leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16, ga = [];
while(--i){ga.push(gb + i + ge);}
return ga;
})(), accumulate: 255});
});
</script>

is customized. You can see where and how the speed, sway, Amount, and, accumulate are set. The way I chose to set the grphcs in this case is known as a self executing anonymous function. It's like a regular function, but it runs right away and delivers its results instead of itself to the code. The main features of it are:


var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 16,

gb is the beginning, ge is the end, i is the number we start subtracting from. While i - 1 exists (is more than 0) we loop:


while(--i){ga.push(gb + i + ge);}

So the first one this will grab is http://www.jr-richscooterdoc.com/FLeaf/Leaf15.png and the last one will be http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png. After that i - 1 will be 0 so it will stop. Along the way it will get 14, 13, 12, etc.

It puts each one of these in the ga array then returns it where it becomes the grphcs array for that fall_rise instance.

If you want it to grab a different type of file, you would have to change the ge to - say, '.gif'

If you want it to grab files from a different folder with a different first part in their filename, you would have to change gb.

And, as I said before, you don't have to use that code for the grphcs array, you can list them separately as I mention and show in one of my other recent posts in this thread.

JRR
11-05-2013, 04:38 PM
No I'll not be grabbing files from a different folder. I like to keep it simple and effective. But knowing how to change the image format to any format like the gif you mentioned is easy.

My plans are simple, as I stated I don't care for the plugins. Now that I know how to set this code up to make it grab any amount and any kind of image I'm happy. IMO it is better than a plugin because I'm not limited on the amount of images used by my software provider. One last and I think final questions John? This code clearly states the smaller the image the more you can use but I'm not seeing numbered height and width settings for the images? In my other code it is set to 60px so I use images no larger than 42px which allows for the IE scroll bar default setting of 17px. 42 + 17 = 59. What is recommend here? Baller used a size limit code in the CSS to make all images automatically resize to a certain size but I'm not sure I can do this with a header code?

jscheuer1
11-05-2013, 05:55 PM
The images will be the size that they actually are. Changing that by css, if they're too big won't help with smoothness. The current code creates no scrollbars and doesn't have a problem with scrollbars in modern browsers. If you want a style hook to the images add the highlighted:


$master: $('<div id="fallrisemaster" style="position:fixed;top:0;left:0;"></div>'),

Now you can style the images in a stylesheet like so:


#fallrisemaster img {max-width: 60px;}

But I don't recommend that. It's best to make the images as small as possible (not too small, you still want to see them) in an image editor and just let their native dimensions be used. Byte size also matters. If you can make each image use less bytes, the effect will load faster for first time visitors.

The Leaf#.png images you have are already pretty good (small and easy to see). After I downloaded 12 through 15 though I had a problem with them in IE 10. They weren't loading in that browser. I re-saved them in The Gimp. They got a little smaller byte wise and now worked in IE 10:

http://home.comcast.net/~jscheuer1/side/jqfallrise.htm

The images are in:

http://home.comcast.net/~jscheuer1/side/leafimages/

but you cannot navigate there. You can if you use a filename of the image, like:

http://home.comcast.net/~jscheuer1/side/leafimages/Leaf12.png

then you can see and save the fixed versions.

JRR
11-06-2013, 01:22 AM
I would say the IE10 thing is weird but I know better. I dealt with IE10 with W8 since this January and believe me I know about it's problems sometimes. But I just went to the code on my test forum and changed the number to 16 and it's grabbing the other images with no problems?

http://betaitistheride.freemessageboards.com/

If you don't see them let me know but I checked it on my son's laptop on W8 with IE10. Deleting Temporary Internet Files on IE10 is a once a day affair for sure.

Now some of these were png's some were gif's and I went to a image convertor and changed all the gif's to png's. I guess it's possible that they were not all perfectly formatted? I also used a image resizing site to resize them to the 40 to 42px size I wanted.

John I had Gimp for a while on IE10 before I upgraded to 8.1 and for some reason my antivirus (Malawarebytes and Defender) and Gimp didn't get along and for some reason it was corrupted and I was getting PUP Trojans and other bad things. When I removed it, cleaned my computer with a virus sweep all went back to normal.

I really liked Gimp , the ease of using it and what it could do. What version are you running? I got the free version from their website:

http://www.gimp.us.com/gimplp2/index-yahoo.php?pk=4860&c=Gimpus_Q_USA_Phrase

It may have been a stupid add on they had with this that caused the issues?

I want to thank you so much for your help, I now have a code that meets my needs to the letter and now all I need to do is check with some of my members who are using this and that. I do that before I let my friends at PB know about a code. So far I know it works on W7 with IE9, W8.1 with IE11, my son's laptop with W8 and IE10 and on FF, Chrome and Opera.

Now I just need to check with a couple of members who are using a Mac and I've got a few who are using Vista (why I don't know) and XP still LOL.

jscheuer1
11-06-2013, 03:56 AM
Your page with its 15 leaf images is fine in my IE 10 here. I was thinking of saying with my last post that it might have been something to do with how I saved the images. But, since I don't recall ever having a problem before like that, and because they were working in all other browsers, I just assumed it was an IE thing.

All The Gimp is free. I have 2.6.11. I'm used to Paint Shop Pro 7. But it's way outdated (very fast and needs few resources though for what it does do). I'm getting used to The Gimp, and you can't beat the price unless you can find someone to pay you to use their software. The Gimp has most if not all of the latest features you can find in any advanced image editor.

JRR
11-06-2013, 01:02 PM
I would have assumed the same thing about IE, it has a mind of it's own! LOL I still use Paint too. I'll give Gimp another shot since I went to 8.1 maybe it'll settle down? I do like it.

Thanks again John.