Falling leaves

[Timebomb007]

Oct 8, 2013 15:24:13 GMT -8 Chris said:

As for the other code, I'll just repeat what I said about having multiple copies of this one code. It uses global variables and globally defined functions so even if you try to put if(1=="2") like I see you're doing that WILL NOT stop them from interfering with each other

I'm not sure I understand what you mean. I see I still had Falling Images plugin enabled, but I just disabled it and it had no image links in it. I just have this code as a main header. If you're referring to using both, plugin and header, I understand and would just use one or the other.

[Chris]

It doesn't matter if you set the images to "" the functions and variables that the code defines still gets attached to the global window when the code is processed and overwrites functions and variables of the same name causing inconsistencies in any computations a given code would be trying to make based on those inadvertently changed variables, that coupled with the fact that they are then each spawning a timer callback specifically meant to update that data means they'll be continuously overwriting each others data.

I see no copies of that code now but I saw more than one earlier so are you saying all you did was disable the plugin and multiple copies disappeared? I still have the old view source window open and looking at multiple copies sandwiching jrryan's code

[Timebomb007]

I enabled the plugin again and it looks like there are multiple codes in the view source.

[Chris]

41x50

34x42

53x66

47x56

48x60

34x40

Remember what I told you about the code being modified to cater to what YOU were trying to do with it jrryan, it isn't just one leaf image but six (you only input one but it randomly chooses from six) based on the structure of the url that was used for the first image). These two lines in the modified code calibrates it for a size of 60 or less.

if (yp[i] > doc_height - 60) {
xp[i] = Math.random() * (doc_width - am[i] - 60);


If there is a scroll bar either horizontal or vertical then the width of that would have to be subtracted from that calibration figure to get the true max size for the image. That number (60) is based on a browser window with no scroll bars taking space from the viewport by the way. In Safari on a mac for example the scroll bar width is 15px so if present then the max size of the image would then be 45 else it would start jumping the scroll bar. In another browser on that same mac the scroll bar width would be different and on a windows machine different still so the trick is to keep a safe size image that can allow for these discrepancies or increase the buffer zone size.

[Chris]

Oct 12, 2013 3:41:04 GMT -8 jrryan said:

Chris

OK now I understand and I didn't know about the scroll bar? I found out info and how to adjust it here:

www.ehow.com/how_8647884_change-scrollbar-size.html

I use W8 with IE10 so by this article the default scroll bar is 17px so if you look at my leaves I have 3 there that will make the size over 60px. So I'll go change them to make them all fall to 60px or smaller and report back.



Edit:  Ok Eton I went and resized my leaves vertically and horizontally to 42px or less to allow for the 17px scroll bar and it settled down and worked like a charm. Question, do you think it would cause issues if I reset the height and width a little larger in the code?

Also the jumping is still present in Baller95's plugin, very noticeable in IE10 not so much in FF or Chrome.

support.proboards.com/thread/485634/falling-images?page=5

I went back to the plugin and used his default link image part and put the smaller leaves and it is stable in IE10. I'm thinking this is his issue as well?


thescooterprofessor.freemessageboards.com/

That ehow article appears specific to windows itself and would be of no help to someone on a mac or BSD based OS for example. A solution that is meant for general purpose use would have to take such considerations into account. This is the same premise by which I decided to send the modified code to you in a PM rather than posting it here in the thread, it was modified specifically for your purpose with no consideration for the purpose of anyone else. Increasing the fixed size in the code itself should allow it to accept a larger image but remember that size would be subject to browser scroll bars as explained earlier.


As for the topic at hand which is avoiding the jumpers by using appropriately sized images I believe I made a proposal earlier in this thread (or perhaps a similar thread) where I suggested the code used by the plugin could possibly be modified to actually query the image for its size then use that to recalibrate the computations rather than using fixed values as it is now.
An even simpler solution would be imposing a max size on the image through CSS since that code gives each image an ID corresponding to its creation within the code.
img[id^="si"] {
 max-width: 40px;
}

That would make it virtually capable of handling any size image without the jumping as well as no need to edit the javascript itself. But it, like the other suggestion, depends on an assumption that the scroll bar size would be no larger than 20 for whatever browser/OS the viewer was using which as you know is not 100% dependable especially if the OS allows you to edit it at will. Javascript is capable of detecting the scroll bar size through a series of pre-tests but that would only make the code that much more complex and I've found some people have an irrational bias against codes that "do too much", a bias that originated in the days of 900 and 1400 baud modems.

[Chris]

Oct 13, 2013 6:52:44 GMT -8 jrryan said:

Chris


So are you saying that since the plugin that is jumping in IE right now with some of the images that with the 17px scroll bar that windows uses could be controlled with the CCS code alone and the jumping would stop? ON the autumn leaves only one leaf is oversize at 44px and when added = 61px. The plugin he made has from what I'm seeing a 60px height limit but I don't see anything about width?

Theoretically yes, CSS would keep the image size within a safe range should their natural size exceed the limits hard-coded within the code itself, I never bothered to get IE10 so the word "theoretically" applies here since I have never tried it although I must assume at this point it should support the full attribute selector syntax and I know at some point they said they would be dropping the document.all syntax which might just be in IE10, dunno. However what I am saying is if you're writing code you cannot make the assumption that since your scroll bar is at 17px then everybody else's must also be 17px, a good code never makes such assumptions unless it is an edge case where it is very unlikely to surface as a problem or if it does one simply doesn't care. If someone visits your site with their scroll bar width different from yours due to OS/browser combo or because their cat snuck into their control panel and changed it to 68 while they were answering a call of nature then any assumptions made falls flat on its face.

If you examine the code you'll see it subtracts a fixed value of 70 from the innerWidth for certain browsers so it is making an obvious assumption there not only as to width of scroll bar but also to width of falling image (keep in mind that innerWidth does include the measurement of any scroll bars as defined by specs). It however does no such thing for IE so although that image size restriction CSS may work for other browsers it may not for IE since the problem there may simply be the omission of some sort of buffer space subtracted from the total width.

[Baller95]

Oct 13, 2013 6:27:48 GMT -8 Chris said:

As for the topic at hand which is avoiding the jumpers by using appropriately sized images I believe I made a proposal earlier in this thread (or perhaps a similar thread) where I suggested the code used by the plugin could possibly be modified to actually query the image for its size then use that to recalibrate the computations rather than using fixed values as it is now.
An even simpler solution would be imposing a max size on the image through CSS since that code gives each image an ID corresponding to its creation within the code.
img[id^="si"] {
 max-width: 40px;
}

That would make it virtually capable of handling any size image without the jumping as well as no need to edit the javascript itself. But it, like the other suggestion, depends on an assumption that the scroll bar size would be no larger than 20 for whatever browser/OS the viewer was using which as you know is not 100% dependable especially if the OS allows you to edit it at will. Javascript is capable of detecting the scroll bar size through a series of pre-tests but that would only make the code that much more complex and I've found some people have an irrational bias against codes that "do too much", a bias that originated in the days of 900 and 1400 baud modems.

Chris, I've added the code to the plugins CSS. I'm not noticing any difference. Do I need to resize the images? I don't think I need to as that's the purpose for the CSS?

[Chris]

Oct 16, 2013 7:52:47 GMT -8 Baller95 said:

Chris, I've added the code to the plugins CSS. I'm not noticing any difference. Do I need to resize the images? I don't think I need to as that's the purpose for the CSS?

No, that CSS is meant to downsize any images generated by the code that is greater than 40px to a maximum width of 40px, for example

would be downsized to

so that it fits within the buffer zone created by the code.

However, as I indicated in this post the code used by the plugin does not reserve a buffer zone for IE so a good start would be to add that buffer zone for IE that all the other browsers enjoy.

WinWidth=(ns||ns6)?window.innerWidth-70:window.document.body.clientWidth-70;


Since this is a plugin you could easily add an option for the user to increase that buffer zone so rather than downsizing the image (with the CSS) the zone instead can be expanded so the largest of the images can fit within it and thus avoid that nervous twitch.

[Baller95]

Thanks a lot Chris! I've changed the buffer zone value and it seems to be working. I tried 70 but that was too low so I changed it to 200 for testing purposes and it seems to be working.

jrryan, visit my test forum here and see if it's fixed. Note that I set it to the display the max number of images (100) so there should be lots of falling leaves! I just did it for testing purposes to make sure you don't get the jumping. I hope it works!

[Timebomb007]

Oct 17, 2013 4:19:09 GMT -8 Baller95 said:

Thanks a lot Chris! I've changed the buffer zone value and it seems to be working. I tried 70 but that was too low so I changed it to 200 for testing purposes and it seems to be working.

jrryan, visit my test forum here and see if it's fixed. Note that I set it to the display the max number of images (100) so there should be lots of falling leaves! I just did it for testing purposes to make sure you don't get the jumping. I hope it works!

With Firefox, can you make it so the images don't fall faster when scrolling or move upward when scrolling up?

[Baller95]

Oct 17, 2013 5:11:25 GMT -8 Timebomb007 said:

With Firefox, can you make it so the images don't fall faster when scrolling or move upward when scrolling up?

I'm not sure if that'll be possible. That's how the code was made so I don't know how to change things like that. Maybe Chris might know?

[Baller95]

jrryan, that's a lot of falling leaves on your forum Hmm, side scroll bar jumping huh? Chris, any suggestions? Also, the leaves automatically resize to 40px no matter how big they as I've added the new CSS to the plugin as Eton Bones has told me about.

[Baller95]

Falling Images V4 has been released

support.proboards.com/thread/485634/falling-images