Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

Javascript and Jquery function own project

Hello!!

So i solved my previous problems but now i have a new one!

I fixed the code it seems to work but first time i scroll down it fadesin everything.. I am not sure how to fix it! Please help!!

Thanks, Aleks

var selected={
    //// Storing selectors
    items:[],
    /// Function that stores items and hides them from the page
    selectFunc: function(select) {
    //// Store selected element    
    selected.items.push(select);
    /// hide selector from the page    
     $(select).hide();    
    }
};
//// Function triggeres on scroll    
$(window).scroll(function() {


    /// loops trough the selected elements
    for(i=0; i<selected.items.length; i++){    
    var currentItem = selected.items[i];

        ///// calculates your position and item position
        var hT = $(currentItem).offset().top,
           hH = $(currentItem).outerHeight(),
           wH = $(window).height(),
           wS = $(this).scrollTop();
                  ////// check if you are in the position
                    if (wS > (hT+hH-wH)){
                    $( currentItem ).fadeIn( 2500 );
                  }
            }
    });    

    //// Using my function to select id about and p element in it.  
selected.selectFunc("#about p");
selected.selectFunc("#about input");
Jesus Mendoza
Jesus Mendoza
23,289 Points

Try printing the value of currentItem and see if that's what you want to fadeIn

Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

I did i found the problem they all run at the same time when i scroll down

1 Answer

Aleksandr Vinogradov
Aleksandr Vinogradov
12,113 Points

Fixed code feel free to use

var selected = {
    //// Storing selectors
    items: [],
    /// Function that stores items and hides them from the page
    selectFunc: function(select) {
        //// Store selected element
        var items = $(select);
        for (var i = 0, l = items.length; i < l; i++) selected.items.push(items[i]);
        /// hide selector from the page    
        items.css('opacity', 0);
    }
};
//// Function triggeres on scroll    
$(window).scroll(function() {
    /// loops trough the selected elements
    for (i = 0; i < selected.items.length; i++) {
        var currentItem = selected.items[i];
        ///// calculates your position and item position
        var hT = $(currentItem).offset().top,
            hH = $(currentItem).outerHeight(),
            wH = $(window).height(),
            wS = $(this).scrollTop();
        ////// check if you are in the position
        if (wS > (hT + hH - wH)) {
            $(currentItem).animate({
                'opacity': 1
            }, 2500);
        }
    }
});

//// Using my function to select id about and p element in it.  
selected.selectFunc("#about p");
selected.selectFunc("#about input");

// Simulating a scroll to show the first elements
$(window).scroll();