CODEWITHSUNDEEP
javascriptjquery
Jake
Jake

Reputation: 1186

Entire JS file not working after I place in a new function that doesn't work on it's own

I have a JS file that I tried adding a parallax feature to via Jquery but it seems to not work, also breaking the entire file's functionality.

I'm wondering if I made a typo somewhere or if there is something else causing the issue.

Here is my JS File (that works fine on its own):

// This enables bootstrap tooltips.
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Fades out (and dismisses) bootstrap alerts after 5 seconds.
window.setTimeout(function() {
  $('.alert').fadeTo(500, 0, function(){
    $(this).remove();
  });
}, 5000);

// Use this instead of href="javascript:void(0);" to avoid violating the Content Security Policy on CSP-enabled HTTPS.
// This prevents the empty link from scrolling to the top of the page AND from adding a # to the URL.
$('a[href="#"]').click(function(e) {
    e.preventDefault ? e.preventDefault() : e.returnValue = false;
});

// Hides the navbar when scrolling down and reveals it when scrolling up.
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById('navbar').style.top = '0';
  } else {
    document.getElementById('navbar').style.top = '-56px';
  }
  prevScrollpos = currentScrollPos;
}

This is where things get messy:

// Creates a parallax effect for the home page.
var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {

    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /2 +'%)'
    });

  }

)};

// Expands recipe cards animation when in viewport
$(window).scroll(function() {
  var hT = $('#recipeStack').offset().top,
      hH = $('#recipeStack').outerHeight(),
      wH = $(window).height(),
      wS = $(this).scrollTop();

  if (wS > (hT+hH-wH)){

    $('#recipeStack img:nth-child(4)').css({
      'transform' : 'translate(160px, -160px)'
      'opacity' : '1'
    });

    $('#recipeStack img:nth-child(3)').css({
      'transform' : 'translate(120px, -120px)'
      'opacity' : '.8'
    });

    $('#recipeStack img:nth-child(2)').css({
      'transform' : 'translate(80px, -80px)'
      'opacity' : '.6'
    });

    $('#recipeStack img:nth-child(1)').css({
      'transform' : 'translate(40px, -40px)'
      'opacity' : '.4'
    });

  }

});

I'm thinking the problem is within this code:

$('.logo').css({
  'transform' : 'translate(0px, '+ wScroll /2 +'%)'
});

Am I adding in the variable correctly via 'translate(0px, '+ wScroll /2 +'%)'?

Upvotes: 0

Views: 67

Answers (1)

Silver
Silver

Reputation: 406

You missing "," in your tuple

 $('#recipeStack img:nth-child(3)').css({
      'transform' : 'translate(120px, -120px)',
      'opacity' : '.8'
    });

I just need to copy it and paste to Sublime to see the problem You miss order the last )}, and that make me acttually laugh when I found out I have the same problem with my project too ==))

var pContainerHeight = $('#parallaxImage').height();
$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  if (wScroll <= pContainerHeight) {

    $('.logo').css({
      'transform' : 'translate(0px, '+ wScroll /2 +'%)'
    });

  }

});

Upvotes: 2

Related Questions