Develop Reference

Get element position relative to screen. (Or alternative solution)

I am aware this had been asked before, but no answer actually did the trick as far as I tested them.
Basically what I need is to change some element styles as soon as it "hits" the top border of the screen while scrolling down. This element is a 'Back to Top' button that will be sitting in a section and start following the user when they scroll pass said section.
I am not asking about CSS properties, I am asking about some JS property or method that allow me to know this. IE:
$('#back').distanceFromTopOfTheScreen() // This value will decrease as I scroll down
I know there are other soultions, but the client has asked for this behavior.
Any idea?

You can :
distance = $('#eleId')[0].getBoundingClientRect().top;
For more about getBoundingClientRect() look at the MDN Documentation
Note: This value change when you're scrolling, it gives you the distance between the top border of the element and the top of the Page

Sometimes JQuery make's everything more confusing than Native Javascript, even forgothing the very basics functions:
window.onscroll = function() { fixPosition()};
function fixPosition() {
var Yplus = 4; //number of lines in every scroll
document.getElementById('element').style.top = document.body.scrollTop + Yplus ;
}
This will allows you to move an "element" static on the window following the scroll.

change start position of horizontal scrollbar without jquery

In Jquery I'm aware you can move the scrollbars' starting location. Is this possible with pure javascript? To clarify, when the user loads the page I simply want the horizontal scrollbar to start scrolled all the way to the right, instead of starting at the left. If there are cross-browser issues, I'm particularly concerned with this working in Chrome.

document.body.scrollLeft = ( divRef.scrollWidth - divRef.offsetWidth ) / 2 ;
NOTE:
This can give odd results with IE8 and earlier.

I've made an example with a div, you can easily adjust this to your body tag, or another div, please see the demo.
var a = document.getElementById('body');
console.log(a.clientWidth)
function moveWin(a) {
window.scrollTo(a.clientWidth,0);
}
moveWin(a)
DEMO
SIDENOTE:
To select the body, simply use
var a = document.getElementsByTagName('body')[0]

Using Javascript for Background Image Change on Page Refresh - Responsive?

I am new to javascript, but I am currently using javascript in my head tag that changes images randomly on page refresh. This has been working great. The javascript can be seen below.
<script type="text/javascript">
function changeImg(imgNumber) {
var myImages = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"];
var imgShown = document.body.style.backgroundImage;
var newImgNumber =Math.floor(Math.random()*myImages.length);
document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
}
window.onload=changeImg;
Now I want to take it one step further and make the images responsive. I've tried a number of different tags via media queries, but nothing seems to work 100%. This particular page has a top section with a height of 310px, which is also where the images are displayed - they also have a height of 310px. Is this something I can do with CSS or CSS3? Or will I need to add additional javascript?
Thanks for the help in advance... my brain hurts!

Use plain javascript rather then Jquery

I am attempting to code the game breakout in javascript. Currently I have it working using JQuery in several locations. My professor does not want the class to use Jquery so I have to change the areas I use jquery to javascript.
function windowsize() {
WIDTH = $("#canvas")[0].width = ($(window).width()-20.5);
HEIGHT = $("#canvas")[0].height = ($(window).height()-20.5);
}
windowsize();
I am using this function to get reference to the canvas element and subtracting from the sides to remove the scrollbar. (on a side note if anyone knows how to remove the scroll bar without subtracting let me know!)
I attemped the following code to get reference to the canvas, but cannot get it to work?
var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
Here is my fiddle: http://jsfiddle.net/Kinetic915/kURvf/29/
Any help is appreciated!
Thanks!

Assuming Chrome, document.documentElement.clientWidth seems to do it for you. Or, find a 100% width element on the page and get the width of that.

Test if element can be seen by the user on an html page

Is there any way to know if an element is visible on an html page?
Like this:
One can probably do it considering the horizontal/vertical scrolling positions, the width/height of the browser window and the position/size of the element on the page, but I have little experience in jQuery so I don't know how to do it. And there might be a simple function one can call, I don't know.

You can use the .is(':visible') selectors to check if an element is currently visible in the DOM.
Edit:
However, as #BenM mentioned, this doesn't check if the elements on your page are actually out of your scrollable range - a great little plugin you could use in that case would be Viewport Selectors for jQuery.

Here is some code that I use to do this. It has been tested to work great.
function isVisible($obj) {
var top = $(window).scrollTop();
var bottom = top + $(window).height();
var objTop = $obj.offset().top;
var objBottom = objTop + $obj.height();
if(objTop < bottom && objBottom > top) {
//some part of $obj is visible on the screen.
//does not consider left/right, only vertical.
}
}