Develop Reference

Textarea change is not detected on onkeyup event?

Textarea change needs to be detected onkeyup event when page is loading. Textarea resizing is working fine but textarea is not detected onkeyup event when page is loaded.I tried following code.
<script>
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
</script>

try by running your code in window.onload
window.onload=function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function() {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function(el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function() {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
//trigger when modal showing
$('.modal').on('shown.bs.modal', function () {
jQuery('textarea[data-autoresize]').trigger('keyup');
})
}
fiddle here

You shall execute jquery once the doc has finished loading.
Wrap it like this:
<script>
$(document).ready(function(){
jQuery.each(jQuery('textarea[data-autoresize]'), function () {
var offset = this.offsetHeight - this.clientHeight;
var resizeTextarea = function (el) {
jQuery(el).css('height', 'auto').css('height', el.scrollHeight + offset);
};
jQuery(this).on('keyup input', function () {
resizeTextarea(this);
});
jQuery(this).trigger('keyup');
});
});
</script>

Function not starting when scroll point is over top of the div

I use a scrollTop function to start animations, delays, etc when the div is scrolled to. It works for other things on my page, but for some reason, this function is not working and it loads on page load.
Does anyone see anything wrong in my code? This can be seen live here:
<div class="blue-box-container">
</div>
$(function() {
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});
$('.fadeBlock').css('display', 'none');
blueBoxDelays();
function blueBoxDelays() {
var delay = 0;
$('.fadeBlock').each(function(i) {
$(this).delay(400 + delay).fadeIn(1000);
delay = 200 * (i + 1);
});
};

I extracted your code to a fiddle and it works correctly https://jsfiddle.net/26jw7Low/3/, you just need to remove the call to blueBoxDelays() which is outside of the initial function as seen below.
$(function() {
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});
$('.fadeBlock').css('display', 'none');
// REMOVE THIS blueBoxDelays();
function blueBoxDelays() {
var delay = 0;
$('.fadeBlock').each(function(i) {
$(this).delay(400 + delay).fadeIn(1000);
delay = 200 * (i + 1);
});
};

Function $('.fadeBlock').css('display', 'none'); maybe not yet execute
You can put it to $(function(){}) end try again:
$(function() {
$('.fadeBlock').css('display', 'none');
var oTop = $('.blue-box-container').offset().top - window.innerHeight;
$(window).scroll(function() {
var pTop = $('body').scrollTop();
console.log(pTop + ' - ' + oTop);
if (pTop > oTop) {
blueBoxDelays();
}
});
});

Trying to turn off requestAnimation function when resizing browser

I have the following code and I am trying to turn off the function when window resize is run, currently it just keeps running on window.resize.
function headerParallax(x) {
if (x ==="true"){
$(window).scroll(function() {
// Store scrollTop in variable
var scrollPos = $(window).scrollTop();
// var viewportHeight = $(window).height();
console.log(scrollPos + 'bgbottle1');
var bouncePos = ((-1 * (scrollPos - 75) * 1.5) + scrollPos).toFixed(2);
var bouncePos1 = ((-1 * (scrollPos - 150) * 1.25) + scrollPos).toFixed(2);
$(".bottle1").css({ 'background-position': "right " + bouncePos + 'px'});
if (scrollPos > 150){
$(".bottle2").css({ 'background-position': "left " + bouncePos1 + 'px'});
}
});
}else if(x === "false"){
alert("no");
}
}
$(window).resize(function(){
if ($(window).width() < 1200){
window.requestAnimationFrame(headerParallax("false"));
}
});
if ($(window).width() > 1200){
window.requestAnimationFrame(headerParallax("true"));
}

You can try something like this:
var _preflag = -1;
var _unbindScroll = function(){};
// it will be fired only once (when flag is changed)
function headerParallax(flag){
if (flag === _preflag){
return;
}
_preflag = flag;
if (flag){
// TODO adjust the UI for true
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // It's duplicate work to unbind scroll here, but there's no harm calling it :)
$(window).on('scroll', _onscroll);
// update the ubind scroll so that anyone can ubind it safely
_unbindScroll = function(){
$(window).off('scroll', _onscroll);
_unbindScroll = function(){};
};
} else {
// TODO adjust the UI for false
window.requestAnimationFrame(theCalculatedValue);
_unbindScroll(); // unbind scrolling, this is what you want, right?
}
function _onscroll(){
// TODO
}
}
function resize(){
// this will be fired multipe times, need to check it in sub functions to take it once
headerParallax($(window).width() < 1200);
}
$(window).resize(resize);
resize();

jQuery absolute sidebr scrolling, stop at the top of parent and at bottom

hi guys so i have this code ive done which when scrolling the sidebar moves up from bottom to top but im stuck with how to stop the scrolling once the sidebar hits the top of the main conatiner - can someone maybe help me with this?
code is:
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-sidebar').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
I have a fiddle example here: http://jsfiddle.net/06qwtgt6/1/
Many thanks!

$(document).ready(function () {
/********************************************************************************/
/* Parallax Scrolling */
// Cache the Window object
var $window = $(window);
$('[data-type]').each(function () {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('div[data-type="background"]').each(function () {
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
$(window).bind('scroll', function () {
if (($window.scrollTop() + $window.height()) > (topOffset) &&
((topOffset + $self.height()) > $window.scrollTop())) {
var yPos = -($window.scrollTop() / $self.data('speed'));
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
var coords = '50% ' + yPos + 'px';
$self.css({ backgroundPosition: coords });
};
});
});
// For each element that has a data-type attribute
$('div[data-type="content"]').each(function () {
$(window).bind('scroll', function () {
var scrolledY = $(window).scrollTop();
$('.parallax-content').css('bottom', '+' + ((scrolledY * 1.3)) + 'px');
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 150) {
$('.sidebar').addClass('fixed');
} else {
$('.sidebar').removeClass('fixed');
}
});
});
CSS
.fixed {position:fixed; top:0;}
DEMO

Force "overscrolling" at Chrome/Mac with javascript

When you get to the limit of document, you can keep scrolling and can see an background behing the document before it bounces back (overscrolling).
How can I force the window to overscroll like this with javascript?

This is not the ultimate solution since I think the animation is imperfect and it's really only for desktops, but it can at least get you started. What I have done is increase the height of the body for animation on scroll.
$(document).on('scroll mousewheel', function (e) {
//Check for mousewheel scrolling down (or not used at all)
if (!e.originalEvent || !e.originalEvent.wheelDeltaY
|| e.originalEvent.wheelDeltaY < 0) {
if ($(window).height() + $(this).scrollTop() == $(this).height()) {
//Prevent simultaneous triggering of the animation
if (!$("body").data('bouncing')) {
$("body").height(function (_, h) { return h + 15; })
.data('bouncing', true);
$("body, html").animate({
'scrollTop': '+=15'
}, 125).animate({
'scrollTop': '-=15'
}, {duration: 125, complete: function () {
$(this).height(function (_, h) { return h - 15; })
.data('bouncing', false);
}});
}
}
}
}).on('keydown', function (e) {
//The "down" arrow; still bounces when pressed at the bottom of the page
if (e.which == '40') {
$(this).trigger('scroll');
}
});

I've been playing with this version that imitates the effect using a div, that slides in and out of view at the bottom of the page. If you have a high res monitor, you may need to increase the height of the main div to test it.
<div id="main" style="background:#f5f5f5;height:1000px"></div>
<div id="overscroll" style="background:#666666;height:120px"></div>
<script type="text/javascript">
var $doc = $(document);
$doc.ready(function () {
var $wnd = $(window),
$oscroll = $('#overscroll'),
block = false;
$wnd.bind('scroll', function () {
if (!block) {
block = true;
var scrollTop = $wnd.scrollTop(),
wndHeight = $wnd.height(),
docHeight = $doc.height();
try {
if (scrollTop + (wndHeight + 120) > docHeight) {
$oscroll.slideUp('slow');
}
else if ($oscroll.css('display') === 'none'
&& (scrollTop + (wndHeight + 120) < docHeight)) {
$oscroll.slideDown();
}
} finally {
block = false;
}
}
});
});
</script>