We Keep Coding

using requestAnimationFrame

I'm using this function to set a transform property of some elements,but the animation is not so smooth in firefox and it's less smooth when window size is bigger(in any browser).I have read a lot of thing's on blogs which are saying that I can make much smoother animation using requestAnimationFrame,but I don't understand how I can implement it inside of my function.Can somebody explain me how I can use it inside of my function?
function sectionMovement(delay,section) {
setTimeout(function () {
var val = ((v.sectionIndex + 1) > v.leavingSection) ?
val = 100 :
val = 0;
document.getElementById("sec_"+section+"").style.transform = "translateY(-"+val+"%)"
}, delay);
};

Something like this:
function updateSection(selector) {
var elem = document.getElementById("sec_" + section);
return function step() {
var val = ((v.sectionIndex + 1) > v.leavingSection) ? // not sure what 'v' is?
100 :
0;
elem.style.transform = "translateY(-"+val+"%)";
requestAnimationFrame(step);
}
}
var sel = "myElementId";
requestAnimationFrame(updateSection(sel));
You will also likely want an external variable to check against to know when to stop the animation.

$.fn.<new_function> 'is not a function' jQuery

EDIT: code link with better formatting:
EDIT: code updated with improvements from JSHint
http://pastebin.com/hkDQfZy1
I am trying to use $.fn to create a new function on jQuery objects by using it like:
$.fn.animateAuto = function(x,y) { }
And calling it by:
var card = $(id);
.....
var expanderButton = card.find(".dock-bottom");
.....
expanderButton.animateAuto('height', 500);
and I get:
Uncaught TypeError: expanderButton.animateAuto is not a function
What am I doing incorrectly? The $.cssHooks extension works just fine along with $.fx.
Here is the code:
var CSS_VIS = 'visibility'
var CSS_VIS_VIS = 'visible';
var CSS_VIS_HID = 'hidden';
var CSS_TEXTBOX_CONTAINER = ".text-box-container";
$.cssHooks['rotate'] = {
get: function (elem, computed, extra) {
var property = getTransformProperty(elem);
if (property) {
return elem.style[property].replace(/.*rotate\((.*)deg\).*/, '$1');
} else {
return '';
}
},
set: function (elem, value) {
var property = getTransformProperty(elem);
if (property) {
value = parseInt(value);
$(elem).data('rotatation', value);
if (value == 0) {
elem.style[property] = '';
} else {
elem.style[property] = 'rotate(' + value % 360 + 'deg)';
}
} else {
return '';
}
}
};
$.fn.animateAuto = function (prop, speed) {
return this.each(function (i, el) {
el = jQuery(el);
var element = el.clone().css({ 'height': 'auto' }).appendTo("body");
var height = element.css("height");
var width = element.css("width");
element.remove();
if (prop === "height") {
el.animate({ 'height': height }, speed);
} else if (prop = "width") {
el.animate({ 'width': width }, speed);
} else if (prop = "both") {
el.animate({ 'height': height, 'width:': width }, speed);
}
});
}
$.fx.step['rotate'] = function (fx) {
$.cssHooks['rotate'].set(fx.elem, fx.now);
};
function getTransformProperty(element) {
var properties = [
'transform',
'WebkitTransform',
'MozTransform',
'msTransform',
'OTransform'];
var p;
while (p = properties.shift()) {
if (element.style[p] !== undefined) {
return p;
}
}
return false;
}
function isExpanded(card) {
return card.find(CSS_TEXTBOX_CONTAINER).css(CSS_VIS) == CSS_VIS_VIS;
}
function expandCard(id) {
var card = $(id);
var isCardExpanded = isExpanded(card);
var expanderButton = card.find(".dock-bottom");
card.animate({
height: isCardExpanded ? '80px' : '270px'
}, 500);
var startValue = isCardExpanded ? 1 : 0;
var endValue = isCardExpanded ? 0 : 1;
var visibilityValue = isCardExpanded ? CSS_VIS_HID : CSS_VIS_VIS;
var textBoxes = card.find(CSS_TEXTBOX_CONTAINER);
textBoxes.fadeTo(0, startValue);
textBoxes.css(CSS_VIS, visibilityValue).fadeTo(500, endValue);
var topValue = isCardExpanded ? 'auto' : '200px';
if (isCardExpanded) {
expanderButton.animateAuto('height', 500);
} else {
expanderButton.animate({
top: '200px'
}, 500);
}
expanderButton.find("span").text(isCardExpanded ? "More Info" : "Less Info");
var buttonthing = expanderButton.find("button");
expanderButton.find("button").animate({ rotate: isCardExpanded ? 0 : -180 });
};

The issue is that jQuery was loaded multiple times. I am using ASP.NET MVC5 and was loading jQuery in the PartialView (re-usable UI control) and the main page which was causing my extension to be overriden.
I would post code but it would be too verbose and has nothing to do with jQuery or JavaScript. To solve though, all I did was remove the jQuery script import from the PartialView since jQuery is imported on every page by the master page.
Thanks everyone for helping out though, you all proved to me that this was not a simple problem that I was overthinking and that more research was necessary.

jQuery Appear Function

I'm trying to use the jQuery appear plugin. I'm having trouble making it work. I tried to attach it to the (window).scroll event but it makes the page slow. If I don't use the scroll, it only fires once. I need it to work again whenever the element becomes visible. Can you give me some tips on how to make it work.
Here's my code:
jQuery('.home-section-1').appear(function(){
jQuery('.page-scroll-indicator .fa.fa-circle').removeClass('active-ind');
jQuery('.page-scroll-indicator .section-1').addClass('active-ind');
});

As ɴ-ᴀ-ᴛ-ʜ said in his comment, you need to be using .on to listen for the appear event.
jQuery('.home-section-1').on('appear', function(){
jQuery('.page-scroll-indicator .fa.fa-circle').removeClass('active-ind');
jQuery('.page-scroll-indicator .section-1').addClass('active-ind');
});
Here's a code snippit showing it working, you'll notice that your method (Method 1) doesn't fire, while the method above (Method 2) does:
/*
* jQuery appear plugin
*
* Copyright (c) 2012 Andrey Sidorov
* licensed under MIT license.
*
* https://github.com/morr/jquery.appear/
*
* Version: 0.3.4
*/
(function($) {
var selectors = [];
var check_binded = false;
var check_lock = false;
var defaults = {
interval: 250,
force_process: false
}
var $window = $(window);
var $prior_appeared;
function process() {
check_lock = false;
for (var index = 0, selectorsLength = selectors.length; index < selectorsLength; index++) {
var $appeared = $(selectors[index]).filter(function() {
return $(this).is(':appeared');
});
$appeared.trigger('appear', [$appeared]);
if ($prior_appeared) {
var $disappeared = $prior_appeared.not($appeared);
$disappeared.trigger('disappear', [$disappeared]);
}
$prior_appeared = $appeared;
}
}
// "appeared" custom filter
$.expr[':']['appeared'] = function(element) {
var $element = $(element);
if (!$element.is(':visible')) {
return false;
}
var window_left = $window.scrollLeft();
var window_top = $window.scrollTop();
var offset = $element.offset();
var left = offset.left;
var top = offset.top;
if (top + $element.height() >= window_top &&
top - ($element.data('appear-top-offset') || 0) <= window_top + $window.height() &&
left + $element.width() >= window_left &&
left - ($element.data('appear-left-offset') || 0) <= window_left + $window.width()) {
return true;
} else {
return false;
}
}
$.fn.extend({
// watching for element's appearance in browser viewport
appear: function(options) {
var opts = $.extend({}, defaults, options || {});
var selector = this.selector || this;
if (!check_binded) {
var on_check = function() {
if (check_lock) {
return;
}
check_lock = true;
setTimeout(process, opts.interval);
};
$(window).scroll(on_check).resize(on_check);
check_binded = true;
}
if (opts.force_process) {
setTimeout(process, opts.interval);
}
selectors.push(selector);
return $(selector);
}
});
$.extend({
// force elements's appearance check
force_appear: function() {
if (check_binded) {
process();
return true;
};
return false;
}
});
})(jQuery);
// Your method
jQuery('.home-section-1').appear(function(){
alert('Method 1');
});
// Using .on
jQuery('.home-section-1').on('appear', function(){
alert('Method 2');
});
.home-section-1 {
margin-top: 2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="home-section-1">Hello World</div>

Scolling a div up and down

I have set up a fiddle
http://jsfiddle.net/austinind/aadcd/1/
what I am trying to achieve is a parallax effect.
the div should scoll up and down based on the scolling.
in my case the div only scrolls up:
function parallax(){
var scrolled = $(window).scrollTop();
var elempos=$(".bg2").position().top;
$('.bg2').css('top', elempos-(scrolled * 0.2) + 'px');
}
$(window).scroll(function(e){
parallax();
});

Take a look at following Js fiddle
Javscript for scroll
(function($) {
var types = ['DOMMouseScroll', 'mousewheel'];
if ($.event.fixHooks) {
for ( var i=types.length; i; ) {
$.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
}
}
$.event.special.mousewheel = {
setup: function() {
if ( this.addEventListener ) {
for ( var i=types.length; i; ) {
this.addEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = handler;
}
},
teardown: function() {
if ( this.removeEventListener ) {
for ( var i=types.length; i; ) {
this.removeEventListener( types[--i], handler, false );
}
} else {
this.onmousewheel = null;
}
}
};
$.fn.extend({
mousewheel: function(fn) {
return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
},
unmousewheel: function(fn) {
return this.unbind("mousewheel", fn);
}
});
function handler(event) {
var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
event = $.event.fix(orgEvent);
event.type = "mousewheel";
// Old school scrollwheel delta
if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
// New school multidimensional scroll (touchpads) deltas
deltaY = delta;
// Gecko
if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
deltaY = 0;
deltaX = -1*delta;
}
// Webkit
if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
// Add event and delta to the front of the arguments
args.unshift(event, delta, deltaX, deltaY);
return ($.event.dispatch || $.event.handle).apply(this, args);
}
})(jQuery);
// OUR CODE
var winH = $(window).height();
$('.page').height(winH);
var c = 0;
var pagesN = $('.page').length;
$(document).bind('mousewheel', function(ev, delta) {
delta>0 ? --c : ++c ;
if(c===-1){
c=0;
}else if(c===pagesN){
c=pagesN-1;
}
var pagePos = $('.page').eq(c).position().top;
$('html, body').stop().animate({scrollTop: pagePos},1000);
return false;
});

Your script is working fine, your actual problem is your CSS
Remove
position:Fixed
for the class bg2, And it will work fine
Fiddle
http://jsfiddle.net/AmarnathRShenoy/aadcd/2/

Javascript Viewport Fade In Fade Out

I'm trying to accomplish something so simple it's painful, but I've yet to have luck after hours of work.
I have 4 divs, each with the class '.slide'. All I want to do is have them invisible, but fade in when they are in the viewport. If they leave the viewport, they should return to invisible. Any ideas?
$('.slide').waypoint(
function() {
if( $(this).is(":in-viewport") ) {
$(this).animate({
opacity: 1
}, 100);
}
$('.slide').not(this).animate({
opacity: 0
}, 100);
},
{
offset: function() {
return $.waypoints('viewportHeight') - document.getElementById('navigation').clientHeight;
}
}
);
http://jsfiddle.net/Agdax/3/

So i played a little and got this:
/*jslint browser: true */
/*global $ */
(function () {
'use strict';
var invisibleClassName = 'invisible',
scrollWait = 500;
function isInvisible(el) {
var wh = $(window).height(),
wt = $(window).scrollTop(),
eh = $(el).height(),
et = $(el).offset().top;
return ((wh + wt) <= et || wt >= (et + eh));
}
function checkVisibleAll(elements) {
elements.each(function () {
$(this)[(isInvisible(this) ? 'add' : 'remove') + 'Class'](invisibleClassName);
});
}
$.fn.visible = function () {
var elements = this,
scrollTimer = null;
// Don't check too often
function scrolled() {
clearTimeout(scrollTimer);
scrollTimer = setTimeout(function () {
checkVisibleAll(elements);
}, scrollWait);
}
// Onload
checkVisibleAll(elements);
$(window).bind("scroll resize", scrolled);
return this;
};
}());
Animation is visible in modern browsers.