One of my project on Codepen doesn't work anymore

1

As stated in topic name one of my projects don’t work as supposed to anymore. It worked last night. The only thing that is of semi help is removing all javascript code. Commenting out all code doesn’t help, only removal of said code.

Code itself isn’t anything special, just some smooth scrolling and couple animations. Checking in codepen doesnt produce any errors, neither in browser console. What can it be? I noticed codepen has been changed, maybe something they did messed up my project? All my other projects with JS code work fine but not this one: Link

And here is js code:

var crock = 0;
var hash = "";
$(document).ready(function() {
  $("#navbar a").on("click", function(event) {
    if (this.hash !== "") {
      event.preventDefault();

      hash = this.hash;

      $("html, body").animate(
        {
          scrollTop: $(hash).offset().top
        },
        800,
        function() {
          window.location.hash = hash;
        }
      );
    }
  });

  if (!$("#menu").is(":checked")) {
    console.log("unchecked");
    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  }

  $("#menu").on("click", function() {
    if ($("#menu").is(":checked")) {
      $(".animated:even").addClass("bounceInRight");
      $(".animated:odd").addClass("bounceInLeft");
      console.log("checked");
      $(".container").animate(
        {
          width: "100%"
        },
        "slow",
        "swing"
      );

      $("section").animate(
        {
          "padding-right": "30px"
        },
        "slow",
        "swing"
      );
    } else {
      if ($(".animated").hasClass("bounceInRight")) {
        $(".animated").removeClass("bounceInRight");
      }

      if ($(".animated").hasClass("bounceInLeft")) {
        $(".animated").removeClass("bounceInLeft");
      }
    }
  });

  $("#main-doc").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Introduction_to_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Basics_things_about_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Data_types']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Variable_scope']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Loops']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Functions_in_PHP']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });

  $("[href='#Reference']").on("click", function() {
    $("#menu").prop("checked", false);

    $(".container").animate(
      {
        width: "75%"
      },
      "slow",
      "swing"
    );

    $("section").animate(
      {
        "padding-right": "0px"
      },
      "slow",
      "swing"
    );
  });
});
3

How?Do smoothscrolling and animations work? Can you post a screenshot? Here is how look for me, it’s alll messed up.

er
er1920×1080 286 KB

4

Small correction: It doesn’t work when Codepen is in “Full Page” mode.In editor view works, even if you make height high as possible. And i also tried on phone and ancient laptop that i have. Edit: Just found out something: Even if all js code is deleted and if just press enter to go newline in js section, project button and css goes haywire as if uncommented js code is present. Really peculiar. Different browsers, cleaning cache, different devices … I tried it all. Whomever be so kind to post screenshot of it working if just to put my mind at ease. Tried it in “Debug Mode” also, works there, but not in “Full Page” mode(still).

5

it seems when on full page your pen does not load bourbon neat resources to process your sass code.

try to manually add the bourbon cdn to your project in codepen->settings->javascript or if you develop your page locally just upload to codepen-css the already compiled css.

Hope that helps.

6

Yep.something wrong with codepen not loading bourbon-neat when on full page.

Here a forked pen of yours but i’ve uploaded to css panel the compiled sass code and its working as it should. So, your js part has nothing to do with the problem.

1 Like
7

Thanks dude. I thought i’m losing my mind considering all other people said it works on their side.