We Keep Coding

I want to use javascript to resize my browser so that it doesn't scroll

I want to use a background color with Gradient on the intro page, but when I shrink my browser, I want to work to reduce the height value without scrolling.
I don't know what method to use when it's resizing.
The code is as follows.
function __screenResize () {
var innerHeight = window.innerHeight;
var availHeight = window.screen.availHeight;
document.getElementById('section').style.height = innerHeight + 'px';
window.onresize = function () {
document.getElementById('section').style.height = availHeight + 'px';
}
}

opacity on scroll with jquery

I'm trying make the opacity of my div gradually increasing, as will moving the scroll, like this
$(document).ready(function() {
$(document).scroll(function(e) {
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade() {
var opacityPercent = window.scrollY / 100;
if (scrollPercent <= 1) {
element.css('opacity', opacityPercent);
}
}
});
is working but the opacity is uping very fast i find example decrease opacity but no uping upacity if in my rule css my div is declared opacity 0 any knwo how should be

Altered:
jsFiddle
$(document).ready(function() {
$(document).scroll(function(e){
opacidade();
});
var element = $('#element');
var elementHeight = element.outerHeight();
function opacidade(){
var opacityPercent = window.scrollY / $(document).height();
console.log(window.scrollY, opacityPercent);
element.css('opacity', opacityPercent);
}
});
The scrollY is a pixel value, so unless you limit your possible scroll range [0 - 100], there's no reason to divide it by 100.
So what you need is divide the scroll by the total document's height (or whatever it's parent that contains it and display a scrollbar)

Keep aspect ratio of div when resizing window

I have an issue which is a little hard to explain. I have a div which has a 2:1 aspect ratio. And I want it to have a 100% width or height based on the browsers window size.
If the window height is greater than the divs height the the size should be based on 100% width.
And if window height is less than the divs height the size should be based on 100% height.
With my curren approach it is flashing when I size larger.
Look at this link http://acozmo.com/me/ for a demo.
HTML
<section id="container">
</section>
JQuery
function update() {
var $documentHeight = $(document).height();
var $windowHeight = $(window).height();
var $documentWidth = $(document).width();
var $windowWidth = $(window).width();
var $container = $('#container');
if ( $windowHeight >= $documentHeight ) {
$container.width($windowWidth);
$container.height($windowWidth / 2);
}
if ( $windowHeight < $documentHeight ) {
$container.width($windowHeight * 2);
$container.height($windowHeight);
}
}
$(document).ready(function() {
update()
});
$(window).resize(function() {
update();
})

To resize to fit inside the window while maintaining aspect ratio, set up your container with an initial size and then divide the area width by the container's width to get the scale. You then need a check to make sure that scale doesn't make the height too great. See code below and fiddle - I've added the case where the height is greater than the width too for completeness.
To stop the flashing, throttle your resize function using setTimeout. This will ensure that update is only called once every n milliseconds. You can play with the number until you find the right balance.
var container = $('#container'),
updateTimeout,
threshold = 100;
function update() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
width = container.width(),
height = container.height(),
scale;
if ( windowWidth > windowHeight ) {
scale = windowWidth / width;
if ( height * scale > windowHeight ) {
scale = windowHeight / height;
}
}
else {
scale = windowHeight / height;
if ( width * scale > windowWidth ) {
scale = windowWidth / width;
}
}
container.width(Math.round(width * scale));
container.height(Math.round(height * scale));
}
$(document).ready(function() {
update();
});
$(window).resize(function() {
clearTimeout(updateTimeout);
updateTimeout = setTimeout(update, threshold);
});

It's probably happening because the fact that you are using a second if, instead of an else . . . it hits the first if, shrinks the height, and then hits the second if and increases it.
Try changing this (the second if):
if ( $windowHeight < $documentHeight ) {
. . . to this:
else {

Trying to set a div to auto in Firefox

I have a div that dynamically scales based on the viewport size.
function zoomSquare() {
var $square = $('.square');
var viewportWidth = $square.parent().width();
var squareWidth = $square.width();
var desiredWidth = Math.round(viewportWidth * 0.95);
var zoom = (desiredWidth / squareWidth);
$square.css('zoom', zoom);
$square.css('-moz-transform', 'scale(' + zoom + ')');
$square.css( '-o-transform', 'scale(' + zoom + ')');
}
// When the browser is resized
$(window).on('resize', function(){ zoomSquare(); });
// When the page first loads
$(document).ready(function(){
zoomSquare();
});
http://jsfiddle.net/sarahwhatsup/YDwds/8/
I want have the parent set to auto to as the div scales, the divs underneath adjust their position. This works in Chrome, IE, Safari but for some reason I can't get this to work in Firefox. Anyone have any idea?

You could change the height of the wrapper div.
$('.wrapper').css('height', squareWidth * zoom);
http://jsfiddle.net/YDwds/22/

Keep aspect ratio with image width in css

Is there a way to fix the aspect ratio of images given a smaller width using css? Maybe by using jQuery / javascript?
Thanks!

With plain CSS, you could set only one dimension of the images, either width or height and set the other as auto, e.g.:
.thumb {
width:200px;
height:auto;
}
The images will have a fixed 200px width, and the height will depend on the aspect ratio.

Here is the jQuery solution ;)
function fixImage(elm) {
elm = $(elm);
var x = elm[0];
var allowedHeight = 80;
var allowedWidth = 80;
if (width > height) {
elm.css('width', allowedWidth + 'px');
elm.css('height', 'auto');
}
else {
elm.css('height', allowedHeight + 'px');
elm.css('width', 'auto');
}
}