Cant get my Javascript to run properly on local machine?

Question

I am using some Javascript that is suppose to appear a certain id when you scroll to a certain point, it works and appears but when you scroll back up it doesn't stay rather it disappears.

Here is the Jsfiddle where it works - http://jsfiddle.net/rkerswell/jrpof73y/1/

And where it doesn't? - http://jsfiddle.net/rkerswell/t18m2tds/

Before you ask, I have copied the working code across above but that doesn't work. So if there is way to get it working using the second Jsfiddle then it should work. Any ideas?

This is also the Javascript as it is in my JS file.

$(function(){

    var startY = 300;

    $(window).scroll(function(){
        checkY();
    });

    function checkY(){
        if( $(window).scrollTop() > startY ){
            $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
        }
        else{
            $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideUp();
        }
    }

    checkY();

});

It is just when it scrolls back up that I am having the problem. Anything im missing?

Why so quick to downvote? He clearly tried to get this to work and wasn't able to and is now posting the question with code samples and two jsfiddles... — Tom
– Tom, Commented Mar 16, 2015 at 18:03
You wanna tell me you seriously dont see the else clause in the if statement? Or am i missing something... — Banana
– Banana, Commented Mar 16, 2015 at 18:05
I forgot to mention that I know basic coding. Also if you mean removing the else part of the JS, I tried this and the script didn't run :) @banana — Ryan Kerswell
– Ryan Kerswell, Commented Mar 16, 2015 at 18:11
@ryan removing the else clause solves the problem. Make sure not to remove the curly bracket befpre the "else" word as it belongs to the first clause. And note that its not the else part of the "js", its the else part of the "if statement". — Banana
– Banana, Commented Mar 16, 2015 at 18:14

Junior Dev · Accepted Answer · 2015-03-16 18:17:03Z

1

My assumption here is that you want the animation to remain after scrolling up. To do that, let's take a look at your code.

$(function(){

//  Define the height the loading bar should appear at
var startY = 300;

//  Run this function whenever you scroll
$(window).scroll(function(){
    checkY();
});

//  The function ran when scrolling
function checkY(){
    //  If the window position is greater than the preset height
    if( $(window).scrollTop() > startY ){
        //  Make all of these ids slide down
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
    //  If the window position isn't greater
    } else {
        //  Make all of these ids slide back up
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideUp();
    }
}

//  Run this function again?
//  Not really needed with the scroll function
checkY();

});

tl;dr As you can see, the else statement in that function removes your loading icon if your if statement isn't true. So, if you want it to stay and only appear once, all you have to do is remove the else in the if statement.

Was that what you wanted to know?

//  Try this in place of your original checkY function
function checkY(){
    if( $(window).scrollTop() > startY ){
        $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideDown();
    }
}

answered Mar 16, 2015 at 18:17

Junior Dev

11410 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Ryan Kerswell Over a year ago

Thank you for the clarification, I have applied this code and it doesn't not work unless I have input or altered something wrong. This is what is in my JS File. jsfiddle.net/rkerswell/0nme4qj0

Junior Dev Over a year ago

The issue you seem to be having is your selector. I messed around with it a bit, and as soon as I added a #skills-left to the selector, it worked fine. jsfiddle.net/0nme4qj0/1

Ryan Kerswell Over a year ago

Thank you for that but it is still not working, the code doesnt seem to work even though the code is valid? Here is an address so you can see the page in action with the above code. ryankerswell.co.uk/design/about.html

Ryan Kerswell Over a year ago

Are you able to take a look when you are next on @Junior Dev? :)

Junior Dev Over a year ago

I took a quick look at your code on the site. It works on Chrome, but the "slideDown" style is already put on it before you ever slide down. Try adding this line of code just below your "var startY" and tell me if it fixes it. $('#sketch-progress, #photoshop-progress, #illustrator-progress, #indesign-progress, #css-progress, #html-progress, #mac-progress, #windows-progress').slideUp();

|

Collectives™ on Stack Overflow

Cant get my Javascript to run properly on local machine?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related