We Keep Coding

Basic JS - Is this function okay?

I have a carousel (Owl Carousel) with vertically centered controls. Because of the structure, I have to absolutely position the previous and next arrow. Because the page is responsive, their position is dynamic. The size of the controls may also change.
I've written a function that runs on load and resize. It gets the height of the image and the height of the controls, subtracts the latter from the former, divides by two, and then uses that number as the controls' margin-top.
It works, but I'm questioning if I'm getting and using all the variables correctly. Does JavaScript read in order? Where it runs the first line, then the next, then the next... I'm strong in CSS but JS has always been a crutch.
Can I write this more efficiently?
function centerCarouselControls() {
var carouselImage = $('.carousel-card > img');
var carouselControls = $('.owl-nav > div');
var carouselHeight = carouselImage.outerHeight();
var controlHeight = carouselControls.outerHeight();
var controlMargin = (carouselHeight - controlHeight) / 2;
carouselControls.css('margin-top', controlMargin);
}
$('.carousel-card > img').load(centerCarouselControls);
$(window).on('resize', centerCarouselControls);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I feel like this might be the type of question that gets flagged on here for not being specific enough. If that's the case, could someone please point me to a community where this would be more appropriate? Thanks!

In some browsers your code works like firefox 51, but it is more complete code this:
carouselControls.css('margin-top', controlMargin + 'px');

Parallax Custom Function scroll effect issue

Example http://jsfiddle.net/5MsUd/
I am having issues with this code for the scroll up and down effect. The key issue is this:
//create the event listener of the users choice.
window.addEventListener(this.trigger,function(){
//get the current position of scroll and add it to the object
self.scrollPos= this.scrollY || this.pageYoffset;
//get the current position of the element
newPos = getPosition(self.target,self.dir);
//HERE IS THE BIG ISSUE!!!!!!!
//adjust the current position depending on the scroll direction
if(scrollex.direction == "down"){
self.target.style[self.dir]= newPos + (self.scrollPos * self.offset)+"px";
}else{
self.target.style[self.dir]= newPos - (this.scrollY * self.offset)+"px";
}
//run callback if there is one
if(callback !== null && typeof callback=='function'){
callback.call(self);
}
}, false);
I'm not getting the correct PXs to go back to the correct position. I added the fiddle as that has all the major code with notes. As well as extra functions that I've added to help assist this scrollex function
Can anyone suggestion a better mathematical equation to get the correct pxs back and forth. Try it out and play with it, let me know of any good suggestions. I've gone pretty deep with this and have more to add but as of now the scroll down and up part system is majorly buggy. You can see once you start scrolling back and forth it does move back and forth but moving up gives less pixels than what down did.

Scroll by pushing side of screen with JavaScript

Windows 8 has this neat feature where you scroll through your apps by "pushing" the side of the screen.
I want to know if anyone has any ideas to accomplish this in JavaScript.
Essentially, the screen does should NOT scroll if you hover over the side of the screen, but should rather be able to detect when the user is attempting to go beyond the viewport and cannot.
Is such a thing possible?

Sure, you just need to figure out their algorithm if you want to duplicate it.
You can track the last several known locations of the pointer to determine velocity and direction and stop the scrolling as soon as the direction changes, for example.

I'm using something along the lines of:
$(window).mousemove(function (e) {
if (getIsPageEdge()) {
if (lastX == e.pageX) {
console.debug('pushing the page');
}
var now = new Date().getTime();
if (lastUpdate == null || now - lastUpdate > 500) {
lastUpdate = now;
lastX = e.pageX;
}
}
});
Essentially, onmousemove, if the cursor is at the edge of the viewport, and the X value is not changing (with a time delay added to compensate for the event processing delay), then change the scroll position of the containing div.

Creating an Expanding DIV/Canvas with Horizontal Scrolling with Wheel JavaScript

Ok - here is what I am trying to do. I was looking online for a cool timeline that I can purchase - allowing zoom in zoom out, posting of events on it, and so on. However, all the examples I found are either too expensive or just downright useless.
So, I have decided to create my own, but there are two elements that I am having trouble with.
1) Converting the wheel scroll to left-right scrolling (so not up-down). I can't seem to find an easy and quick way to do this.
But, more importantly..
2) I need the area I will be showing the timeline on to automatically expand as I go about my scrolling. So, if I scroll down, it will add an "equivalent" area on the right, and down, on the left. So I was thinking like making an iFrame (already use these) and when you scroll it just adds more "timeline" on the left or the right, loads what ever it needs to load from the DB/list of events, and so on, ad infinitum, thus creating an ever-expanding list of blocks that are time-sized.
If I can do the two things above, then I am set - the rest (loading/positioning) I can figure out - just these two things are eluding my imagination and ability to find an answer.

Basically you need a horizontal infinite scroll script.
Take this plugin I wrote:
$.fn.hScroll = function( options )
{
function scroll( obj, e )
{
var evt = e.originalEvent;
var direction = evt.detail ? evt.detail * (-120) : evt.wheelDelta;
if( direction > 0)
{
direction = $(obj).scrollLeft() - 120;
}
else
{
direction = $(obj).scrollLeft() + 120;
}
$(obj).scrollLeft( direction );
e.preventDefault();
}
$(this).width( $(this).find('div').width() );
$(this).bind('DOMMouseScroll mousewheel', function( e )
{
scroll( this, e );
});
}
Initialize it with:
$('body').hScroll();
Makes your website a horizontally scrollable website.
Your content div must be wider than your body (ex. 3000px).
As for the infinite scrolling effect you pretty much gotta do that your self because I can't know what kind of data you'll input. But I'll explain.
Your children elements in the content div must be floated to left. (every new appended div will not go to new line).
Set an interval to check if the user's scrollLeft position is near the end of the content (just like pinterest and similar site).
function loadNewData(){ /* Your search for data and update here. */ }
setInterval('loadNewData', 500);
search for new data according to your last one with AJAX. When you get new data, append it into your content div (in a div that's floated left, as I wrote previously), and mark it as your last item.
Maybe you could use your ID to mark the last item on it's div.
<div data-id="467" class="item"> // your data here </div>
You can fetch it with
$('.item:last').attr('data-id');
with jQuery.

non-linear scrolling

Scrolling s is like, well, linear:
s(x) = x with x among [0, ∞]
I'd like to apply a more fancy function, say x^2:
but I'd don't really know if it's possible and how...
I'd like to know your thougts on this.
EDIT
For example: is it possible to change the scrollTop value while scrolling?
Cheers.

A high level approach to your problem:
Capture scroll events, keep track of the time you got the last one
Compute actual velocity vA based on time to last event
vA(dT):
// if we last scrolled a long time ago, pretend it was MinTime
// MinTime is the dT which, when scrolled
// at or less than, behaves linearly
if (dT > MinTime) dT = MinTime
vA = MinTime / dT
Devise some transformation to perform on vA to get desired velocity vD:
vD(vA):
// quadratic relationship
vD = vA * vA
Calculate a "scroll factor" fS, the ratio of vD to vA:
fS(vD, vA):
// this step can be merged with the previous one
fS = vD / vA
Calculate the delta scroll dS using fS and dSi, the initial scroll size (1 scroll event's worth of scrolling)
dS(fS):
dS = fS * dSi
Scroll by that much
Scroll(dS)
If you scroll less than once per MinTime or slower, you will get typical linear behavior. If you try to scroll faster, you will scroll quadratically with your actual scroll speed.
I have no idea how to actually do this with javascript, but I hope it provides somewhere to start.
Is there a unit of scrolling I can use by any chance? My terminology looks funny.

This should be helpful for capturing mouse wheel 'speed':
$(document).on('DOMMouseScroll mousewheel', wheel);
function wheel (event) {
var delta = 0;
if (event.originalEvent.wheelDelta) {
delta = event.originalEvent.wheelDelta/120;
} else if (event.originalEvent.detail) {
delta = -event.originalEvent.detail/3;
}
if (delta) {
handle(delta, event.currentTarget);
}
if (event.preventDefault) {
event.preventDefault();
}
event.returnValue = false;
}
function handle (delta, target) {
// scrollYourPageDynamiclyWithDelta(delta*delta);
// manipulate of scrollTop here ;)
}

So this is more conceptual, but I think using the functions that others mentioned to detect scroll speed and such this could be helpful.
Logic:
Disable defaults for scrolling on a div.
Add a second div that just detects mouse wheel speed using #Tamlyn's code. Perhaps you could put this div behind your working div or wrap it around or inside your content some how. I'd try to just put it on the side for now.
Next, scroll the div based on the input from this 2nd div. Use your custom scrolling function to change scroll speed based and direction of the scroll. There will be some "devil in the details moments" here probably.