We Keep Coding

Parallax background image for top-bottom and not right-left

I wrote a script that changes the BG position as you scroll down, its works good for left and right positions but i cant seem to reach the syntax that will allow me to parallax the background-position top or bottom - instead of right and left.
here is my code:
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position',(scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}

The css attribute background-position has two values, #horizontal #vertical.
See: http://www.w3.org/wiki/CSS/Properties/background-position
Consider something like:
function parallax(){
var scrolledTop = $(window).scrollTop();
var scrolledLeft = $(window).scrollLeft();
$('section.intro .custombg').css('background-position',(scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}
Also, this seems like it will add the scroll event every time the parallax method is called. To correct this, you could try:
function parallax(top, left) {
$('section.intro .custombg').css('background-position',(left * -0.2) + 'px ' + (top * -0.2) + 'px');}
} // end function
$(document).ready(function() {
$(window).scroll(function(e) {
parallax($(window).scrollTop(), $(window).scrollLeft()); // call the method
});
});

This is all wrong, you are setting up an event handler each time you use $(window).scroll(). You only need to do that once. Try this.
var scrolledTop,
scrolledLeft,
background_position,
$custom_bg;
function parallax(){
scrolledTop = window.scrollY,
scrolledLeft = window.scrollX,
background_position = (scrolledLeft * -0.2) + 'px ' + (scrolledTop * -0.2) + 'px');
console.log('background_position', background_position);
$custom_bg.css('background-position', background_position);
}
$(function() {
$custom_bg = $('section.intro .custombg');
$(window).on('scroll', parallax);
});

try
function parallax(){
var scrolled = $(window).scrollTop();
$('section.intro .custombg').css('background-position','center ' + (scrolled * -0.2) + 'px');}
$(window).scroll(function(e){
parallax();
});
}

If you're looking to do more with parallax and change other properties as, I'd highly recommend the Skrollr library (https://github.com/Prinzhorn/skrollr).
You can vary almost any CSS property as you scroll, giving you more options than just background position or something else. It might be more than you're looking for, but it's pretty lightweight and has mobile support, too (which you could have trouble accounting for without a well-developed library). Hope it helps!
For example, if you wanted to shift the background-position of a background image, you could simply do the following:
initialize skrollr (in this case without options, but there are parameters you can set)
<script type="text/javascript">
var s = skrollr.init();
</script>
Then, you're able to use simple data-tags to tell Skrollr which elements you want to make fancy and which you don't. In your case, you could do something vaguely like the following:
(whatever element you want to use parallax on)
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">
WOOOT
</div>
However, you'd swap background-color out for background-position
<div data-0="background-position: 0px 0px" data-700="background-position: 0px 100px"> </div>
or
<div data-0="background-position: top center" data-700="background-position: bottom center"> </div>
You can use any of the accepted CSS background-position keywords.
Useful:
https://github.com/Prinzhorn/skrollr

Auto-Align Script misaligns on page load but not on refresh?

Hi please take a look at my site, the code snippet in question i have to center my images since ive never had any luck with the css-html methods. Sometimes it will load centered and sometimes it wont, please tell me how i can center my images on page load.
site: http://bit.ly/11nAQJK
<script type="text/javascript"> //Centering Script
$(document).ready(function () {
updateContainer();
$(window).resize(function() {
updateContainer();
});
});
function updateContainer() {
(function ($) {
$.fn.vAlign = function() {
return this.each(function(i){
var h = $(this).height();
var oh = $(this).outerHeight();
var mt = (h + (oh - h)) / 2;
$(this).css("margin-top", "-" + mt + "px");
$(this).css("top", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);
(function ($) {
$.fn.hAlign = function() {
return this.each(function(i){
var w = $(this).width();
var ow = $(this).outerWidth();
var ml = (w + (ow - w)) / 2;
$(this).css("margin-left", "-" + ml + "px");
$(this).css("left", "50%");
$(this).css("position", "absolute");
});
};
})(jQuery);

To do this you have many variants. In your case you can do some like this
<div style="
background: url('Assets/OrderSheet.png') center center no-repeat;
width: 100%;
height: 500px;
">
<a href="Assets/OrderSheet.xls">
</a>
</div>

I'd use CSS over JavaScript for this, but that another story. To answer your question I think. pageLoad would be better than .ready

You are using $(document).ready(), so the function is executed when the DOM is ready, but not necessarily all the images and such are loaded, so height and width info are not available yet, when you refresh the page, the info is available and you get the desired behavior.
To overcome this, use $(window).load(), so the function is executed when everything on the page is fully loaded, and info like width and height are available and you should get what you are expecting the first time the page is loaded.
Alternatively, if you need to keep using $(document).ready(), you need to specify the dimensions of the elements like the images explicitly so when the DOM is loaded the browser already knows the dimensions and doesn't have to wait for the elements like images to be fully loaded.

Change simple scroll speed on body to a particular class?

This may seem incredibly simple, but I can't figure it out. I'm wanting a very simple parallax style scrolling affect on a particular div, but don't want to bog my page down with some massive plugin that does far more than I want.
I found this code, which does exactly what I want, but does the affect to the body, and I want to be able to apply it to a class.
<script>
function onLoad() {
window.onscroll = function() {
var speed = 8.0;
document.body.style.backgroundPosition = '50%' + (-window.pageYOffset / speed) + "px";
}
}
</script>
I insert that into the head of the page and then attach to the body:
<body onload="onLoad()">
Like I said, perfect for the body. But what if I want the affect to work on a class of "mast". How would I go about doing that. Seems simple...but I'm stumped.
Any help would be great. Thanks!

Just target the .mast element instead :
<script type="text/javascript">
$(function() {
$('.mast').on('scroll', function() {
var speed = 8.0;
this.style.backgroundPosition = '50%' + (-this.pageYOffset / speed) + "px";
});
});
</script>

Getting the width from an scaled image

I'm using Jquery to get the width of an image once it is appended to the body. Have a look at this fiddle to get an understanding of what I'm doing.
What I want to do is add each element with a constrained height and read what the respective width is once after it is scaled. The problem as you will see is that the console.log is giving me the value 0 for the width.

Use jQuery .load() function to do all the calculation after image load:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend(
$('<img/>').attr({
src: "http://www.upress.umn.edu/book-division/images-1/other images/blockc.gif/image_thumb"
id:'img' + (number++)
}).load(function(){
console.log($(this).width())
})
},3000);
});​

http://jsfiddle.net/w7rcn/
The width was being "read" before the image could fully download.
So, we used the same concept, but applied it after the img load event had fired:
$('#img' + String(number)).load(function() {
console.log($(this).width());
});

Mohsen and Justice are right. However, you can still simplify a bit:
var number = 0;
$(document).ready(function(){
setInterval(function(){
console.log();
$('.container').prepend($('<img '
+ 'id="img'+number+'"src="http://www.upress.umn.edu/'
+ 'book-division/images-1/other-'
+ 'images/blockc.gif/image_thumb">').load(function() {
console.log($(this).width());
}));
number++;
}, 3000);
});​

Adding extra CSS with javascript

There's this image on a page I'm coding which should be resized and horizontally and vertically centered depending on some variables. I can't use the CSS sheet for this, as the width and height variables are dynamic. Therefore I want to have javascript add two extra arguments (top and left) to the style of this specific image.
I've tried this (which to me looked quite sensible)
function getStyleSheet() {
for(var i=0; i<document.styleSheets.length; i++) {
var sheet = document.styleSheets[i];
if(sheet.title == 'StyleSheet') {
return sheet;}
}
}
var rule_sheet = getStyleSheet();
function changeText() {
rule_sheet.insertRule(".className { top:" (-(.5*newHeight))+ "; left:" +(-(.5*newWidth))+ ";}");
showRules();
}
I've also tried to add an inline style to the image like so: (in the function where the image was resized)
$(this).style.top= (-(.5*newHeight));
$(this).style.left= (-(.5*newWidth));
Neither solution worked, while to me both methods seemed plausible. What am I missing?
EDIT: I realized I didn't add the suffix 'px' to this, but after doing so, it still doesn't work :(
EDIT II:
After NickFitz hints, I rewrote the last bit of code to this:
$(".className").each(function() {
$(this).css("top", (-(.5*newHeight)), 2);
$(this).css("left", (-(.5*newWidth)), 2);
});
This actually does change the way it looks. Not the way I want it, but at least I'ma tad closer to a solution.

If you're using jQuery, you want the CSS-related methods. $(this) returns a jQuery object, and setting the style property of that isn't going to do anything.

Try this:
$(this).css( 'top', (-(.5*newHeight))+'px' );
$(this).css( 'left', (-(.5*newWidth))+'px' );

You should try something like (using val on the end of the variables)
$(this).css({top: topval + "px", left : leftval + "px", width : widthval + "px", height : heightval + "px"});
or you could use:
$(this).width(widthval);

Can you just get a wrapped set containing the <img> and then use the .css() command to set the appropriate values for it?
$('#img').css({ 'width' : calculatedWidth + 'px', 'height' : calculatedHeight + 'px' });