I have a web page which has a number of images each in their own div and with html rendered text in each div too - something like:
<div class="yui3-u-1-3 first promosLeft" style="width: 318px; margin: 0 0 0 15px;"><a href="/somepage" title="Image"><img class="lazy" src="http://www.mysite.com/image.gif")" alt="Alt Text" width="318" height="394" style="display:block" border="0"></a>
<a class="ed1 textFade" href="/somepage" style="position: absolute; left: 412px; top:226px; font-family: Times,'Times New Roman', serif; font-size: 16px; line-height: 18px; text-align: center; text-decoration:none; color:#000;" title="Image">Text to fade in when image loads</a>
<a class="textFade" href="/somepage" style="position: absolute; left: 439px; top:276px; font-family:Helvetica, Arial, sans-serif; text-decoration:none; color:#000; font-size:18px; font-weight: bold !important;" title="Sell Link">More text to fade in when image loads</a></div>
So the page loads fine, LazyLoad works perfectly on the images, as the page is scrolled the images fade in. I have used the following coder to achieve this:
effect : "fadeIn"
What I am trying to do is fade in the html text relevant to each specific div - that is all text with the class textFade, at the same time as the image. I have achieved this through the following code, but through testing it seems a bit heavy in Firefox and IE7:
Briefly let me explain, I'm quite a beginner too - but I got a book published by SitePoint called jQuery Novice to Ninja, and found a bit of code in there and coupled that with some code I had used on a previous website, to bring together two aspects of functionality to make my script work. What my script does is this.
1) It targets text blocks with a class of "textFade" and fades them into the page - in my example these are anchor tags with the class "textFade".
2) however before fading them in, it checks the position of the element containing the text blocks (the containing block - in my case an html div). If the containing block is in the viewport - calculated by using jQuery to detemine the window height plus the amount the window has been scrolled (value a) and comparing this with the offset of the containing block plus the containing blocks height (value b). So if value b is less than value a, the text with the class "textFade" within the containing block will fade in.
The function is divided into 2, the first part checks for the text to fade in on page load, and the second part handles what happens once the page scrolls, note the $(window).scroll(function()...
Hope that makes sense, not very good at explaining things!
Anyway my code has problems in IE7 and to a lesser extent on Firefox, I have been working on a revised version which seems to be more lightweight, but needs more testing. The code on jsfiddle does work, but again it appears to have problems in IE7/8. I think I may end up running alternative code that simply fades the text blocks in regardless of where they are on the page for IE7/8.
I will check all this out later this week and let you know. If you have any success, let me know too.
Last edited by A_Tame_Lion; 01-07-2013 at 02:22 PM.