Here's my JS code:
$(window).scroll(function (event) {
var scrollTop = $(window).scrollTop();
var height = $(window).height();
var opacity = ((height - scrollTop) / height);
var scale = ((height - (scrollTop/10)) / height);
console.log(opacity);
if(opacity>=0.05){
$.each(links, function( i, link ) {
$(link).css({
'opacity': opacity,
});
})} else {
$(link).css({
'opacity': 0.05
});
}
if(scale>=0.9){
$('#index').css({
'transform': 'scale('+scale+')'
});
} else {
$('#index').css({
'transform': 'scale(0.9)'
});
}
});
$( document ).ready(function() {
$('#aboutContent').waypoint(function(direction) {
alert('hit!');
});
});
The .scroll() function works exactly as I want it but the waypoint doesn't at all. If however, I remove the .scroll() function the waypoint works as it should. Can anyone spot what could be causing the issue? I can't find any know conflicts between .scroll() and waypoints. Here's a JSFiddle: https://jsfiddle.net/zocdvefx/ If you remove the .scroll() function the waypoint should work.
Thanks!
Jamie
In your fiddle the issue is in this if-else block:
if (opacity >= 0.05) {
$.each(links, function(i, link) {
$(link).css({
'opacity': opacity,
});
})
} else {
$(link).css({ // <-- link is no longer in scope and is undefined
'opacity': 0.05
});
}
Changing link to links in the line I highlighted above will resolve your issue.
For future reference always check your browser's developer console (usually F12) when you're running into an issue. As soon as I opened it in your jsfiddle it immediately started telling me what the issue was: ReferenceError: link is not defined.
Related
Got a lazyload style script I'm working on whereby a function gets called when the user comes into view (its graphs raising from the ground). problem I'm having is that the graphs tend to be constantly changing their height (50.04012040% etc). I also have other divs that are shown once this height reaches it's data-attr.
JS:
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var total = 100;
if( ! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
// Quote Form x-slide in
if(wScroll > $('#statistics').offset().top - ($(window).height() / 1.7)) {
// Animated graph
$(function() {
$("#bars li .bar").each( function( key, bar ) {
var percentage = $(this).data('percentage');
$(this).animate({
'height' : percentage + '%'
}, 1000);
});
});
}
}
});
$(".stat-button").each(function(){
$(this).mouseover(function () {
console.log('hover');
$(this).siblings(".stat").fadeIn('1000');
}).mouseout(function () {
$(this).siblings(".stat").fadeOut('1500');
});
});
problem is that the stat buttons can't come into view until the percentage has been met, but if this is constantly change it never will.
Fiddle is: https://jsfiddle.net/no0mvffz/
(first question so be nice :) )
I'm trying to disable scroll, animate a div, then re-enable scrolling. So far I have accomplished the first two parts of this incredible quest, but alas, I cannot seem to get it to scroll again.
I am using lockScroll() and unlockScroll() functions defined by JeanValjean on How to programmatically disable page scrolling with jQuery
Any help would be much appreciated. Please see demo http://jsfiddle.net/Chris_James/1xxL5dnp/6/
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast');
unlockScroll();
},700);
}
})
});
jQuery(document).ready(function(){
$(window).scroll(function(){
var p = $( ".testi" );
var offset = p.offset();
if ($(this).scrollTop() > offset.top - $(window).height()/2) {
lockScroll();
$('.testi').addClass( 'testishow' );
setTimeout(function(){
$('.testimonial').fadeIn('fast', function() {
unlockScroll();
});
},700);
}
})
Like Good.luck recommended, you can you use callbacks for unlocking (Well, I was a few seconds to late...). I think you don't have to declare a function just unlockScroll.
The lock/unlockScroll() methods seems to a bit to be overweight.
I would recommend cubbius answer with an "overflow: hidden" style for the html element.
Make a function out of your current scroll event and unlock it with:
$(window).off("scroll touchmove mousewheel", function () {
$(window).on("click", yourScrollMethod);
})
Solution - adding a class (scrolllocked) to if statement, and checking for it (with &&). Simples. http://jsfiddle.net/Chris_James/1xxL5dnp/6/
if ($(this).scrollTop() > offset.top - $(window).height()/2 && !p.hasClass("scrollLocked")) {
lockScroll();
p.addClass("scrollLocked");
$('.testi').addClass( 'testishow' );
You can use function callbacks for this e.g.
$('.testimonial').fadeIn('fast', function(){
unlockScroll();
});
In this case function unlockScroll() will execute only after fadeIn finished it's animation.
UPD: Added Fiddle
I'm extremely new to JavaScript so I apologize in advance. I'm trying to create a one page html document for a school project using a list of links for navigation that change when the anchor is scrolled to. I've tried various different methods found on Jfiddle and through stackoverflow. This is the method I am trying now: http://jsfiddle.net/m2zQE/
var topRange = 200, // measure from the top of the viewport to X pixels down
edgeMargin = 20, // margin above the top or margin from the end of the page
animationTime = 1200, // time in milliseconds
contentTop = [];
$(document).ready(function () {
// Stop animated scroll if the user does something
$('html,body').bind('scroll mousedown DOMMouseScroll mousewheel keyup', function (e) {
if (e.which > 0 || e.type == 'mousedown' || e.type == 'mousewheel') {
$('html,body').stop();
}
});
// Set up content an array of locations
$('#nav').find('a').each(function () {
contentTop.push($($(this).attr('href')).offset().top);
});
// Animate menu scroll to content
$('#nav').find('a').click(function () {
var sel = this,
newTop = Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height()); // get content top or top position if at the document bottom
$('html,body').stop().animate({
'scrollTop': newTop
}, animationTime, function () {
window.location.hash = $(sel).attr('href');
});
return false;
});
// adjust side menu
$(window).scroll(function () {
var winTop = $(window).scrollTop(),
bodyHt = $(document).height(),
vpHt = $(window).height() + edgeMargin; // viewport height + margin
$.each(contentTop, function (i, loc) {
if ((loc > winTop - edgeMargin && (loc < winTop + topRange || (winTop + vpHt) >= bodyHt))) {
$('#nav li')
.removeClass('selected')
.eq(i).addClass('selected');
}
});
});
});
I'm still not having any luck. I've already searched to see if I could debug the problem and have tried changing the order of the code as well as the order of calling jquery.
Here is a link to the site: https://googledrive.com/host/0BwvPQbnPrz_LMlZDeGlFY2Yydmc/index.html
I used html5boilerplate as a starting point.Thank you in advance.
Don't have much time to look into your code, but when I input the line
Math.min(contentTop[$('#nav a').index($(this))], $(document).height() - $(window).height())
into the console of developer tools, it return NaN.
So I guess the problem is you don't have your scrollTop correctly set.
I suggest you give each element an id and try:
$('html, body').animate({
scrollTop: $("#elementID").offset().top
}, 2000);
or if you insist not giving id,
$('html, body').animate({
scrollTop: $("#container-fulid:nth-child(2)").offset().top
}, 2000);
but notice that this is not working on all browser as the nth-child selector is a CSS3 selector.
Or, if you know how to correctly use other's work, you may try to use bootstrap 3.0, where there is already a function named scrollspy included, which do exactly the thing you are doing.
http://getbootstrap.com/javascript/#scrollspy
I wish someone could help me, I'm a little bit irked about this problem since I've been resolving other issues with this scroll behavior that I'm trying to implement on this site... as you see my sub-menu (on the left) follows the window position as you scroll or you can click any option on the sub-menu wich will trigger an animation, well what seems to be the problem is that everytime I click a second time it won't work, until I re-click it, it will work...
Here's my code
Variables
var startDistance = 210;
var $scrollingDiv = $("#sub-menu");
var position = $("#footer").position();
var height = $("#sub-menu").height();
var pos = position.top - (height + 460);
This is to differ between users and animation scroll
$("body,html").bind("scroll mousedown DOMMouseScroll mousewheel keyup", function(e){
if ( e.which > 0 || e.type === "mousedown" || e.type === "mousewheel"){
if($(window).scrollTop() > startDistance && $(window).scrollTop() < pos) {
$scrollingDiv.stop().animate({
paddingTop: ($(window).scrollTop() - 75) + "px"
}, 'slow');
}
if($(window).scrollTop() == 0) {
$scrollingDiv.stop().animate({
paddingTop: 0
}, 'slow');
}
}
});
Click behavior
$("#sub-menu ul li a").live('click', function(ev) {
var $anchor = $(this);
console.log($anchor.attr('href'));
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo', function() {
$scrollingDiv.stop().animate({
paddingTop: ($($anchor.attr('href')).offset().top - 556) + "px"
}, 'slow');
});
event.preventDefault();
});
It might be the silliest thing but I've been watching my screen for last hour w/o being able to realize what's going on.
Edit: I'm posting my scroll code behavior too because I feel that It might be a global problem and not only related to my click code
Thank you in advance!
[22:00:25.137] ReferenceError: event is not defined # http://altivamedia.com/pruebas/romulos/wp/wp-content/themes/romulos/_/js/functions.js:45
You've accidentally wrote event instead of ev:
});
event.preventDefault();
});
Since event hasn't been defined a ReferenceError gets thrown. Simply use the correct variable:
});
ev.preventDefault();
});
Remark
In order to find such errors on your own use your browser's error console.
This works:
$.fn.center = function () {
this.css("position", "absolute");
this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");
this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");
return this
};
$('#container').center();
.. but the element stays in the same position if the window is resized, how do I center it with the resize too?
Thanks
You would need to execute that code in the window resize event. But, if the browser is resized this event fires huge! So it's in general a good idea to create a little "balancer".
$(window).bind('resize', function() {
var that = this;
if(!('balancer' in that) ) {
that.balancer = setTimeout(function() {
$('#container').center();
delete that.balancer;
}, 200);
}
});
This will absorb the many events that are fired when resizing the browser window. In fact, it only calls the .center() at a maximum of 200ms. You probably should even increase that value and cache the node reference to the #container element.
EDIT::
giving percentage to top and left can put at center. but this bad ... really really bad.
$.fn.center = function () {
$(this).css({'position': 'absolute',
'top': '40%',
'left': '40%'
});
};
$(function (){
$('#container').center();
})
On jsfiddle.