Develop Reference

Why is my jQuery resize firing inconsistently?

I'm wrapping up a site that involves a few elements (image / text / diagonal line) that have to scale proportionately on different screens.
Because there's text that has to be resized, I'm using jQuery to calculate the measurements for all of the elements based on a ratio. This was the best solution I could think of at the time, and with a deadline approaching, I think I'm stuck with it. It's a single-page site that scrolls by the page (e.g., full pages in the viewport).
Here's a link to the demo site
The idea behind the code:
We check the height of the viewport to set the container size
Set the wrapper element height, based on the container size and necessary
margins
Set the width based on a ratio
Use these values to calculate font size, image size, and offsets
As the screen is re-sized, the element shrinks proportionately to fill the available space.
It looks kind of like this:
There are two panels like this. I re-use the same code (with different variable names, and a few sizing differences) for the second panel.
Here's my Javascript/jQuery for the first:
// Set panel height on page load & resize
$(window).on("resize", function () {
var $panelHeight = $(window).height();
var $headerHeight = $('.banner').height();
// General height for panels
$('.bg-panel').css('height', $panelHeight );
$('.bg-panel').css('padding-top', $headerHeight);
}).resize();
// We want to scale content proportionately
// First let's get some breakpoints
var $breakPoint = 768;
var $breakPointSM = 480;
// Panel 1
$(window).on("resize", function () {
// Check height of current panel
// If on single-column view, we want to measure the space between the text column and bottom of screen
// Otherwise, height of entire panel
var $windowHeight = $('.panel-test').height();
// But we need to subtract the header height, so our math is correct
var $headerHeight = $('.banner').height();
var $windowHeight = $windowHeight - $headerHeight;
// Now we have the correct height to work with
// We're at 768px or below, subtract the text element from the overall height
if ( $(document).width() <= $breakPoint) {
var $heightofDiv = $('.panel-1-text').height();
var $mobileHeight = $windowHeight - $heightofDiv;
var $windowHeight = $mobileHeight;
}
// Save the window height for calculating our margins!
var $windowHeightforMargins = $windowHeight;
// Top and bottom margins
var $marginTop = $windowHeight * (102/792); // ratio from PSD
var $marginBottom = $windowHeight * (84/792); // ratio from PSD
var $marginTotal = $marginTop + $marginBottom;
// Responsive solution
// As browser shrinks, reduce the height of panel so it produces a smaller container
if ( $(document).width() > 1200 && $(document).width() <= 1440) {
var $windowHeight = $windowHeight * 0.9;
var $marginTop = $marginTop * 2;
}
else if ( $(document).width() > 990 && $(document).width() <= 1200) {
var $windowHeight = $windowHeight * 0.8;
var $marginTop = $marginTop * 3;
}
else if ( $(document).width() > $breakPoint && $(document).width() <= 990) {
var $windowHeight = $windowHeight * 0.7;
var $marginTop = $marginTop * 3.5;
}
else if ( $(document).width() < $breakPoint) { // Ratio here goes up again because we're accounting for new height with $mobileHeight
var $windowHeight = $windowHeight * 0.8;
}
// This ratio determines the width of the container
var $ratio = 697 / 607; // from PSD
// Set container height, depending on height of panel
if ( $(document).width() <= $breakPointSM) {
var $taglinesHeight = ($windowHeight * 1.5); // Scale up for phones
}
else if ( $(document).width() > $breakPointSM && $(document).width() <= $breakPoint ){
var $taglinesHeight = ($windowHeight * 1); // Scale down for tablet
}
else {
var $taglinesHeight = $windowHeight - $marginTotal;
}
// Set container width as ratio of height
if ( $(document).width() <= $breakPoint) {
var $taglinesWidth = $taglinesHeight * $ratio
} else {
var $taglinesWidth = $taglinesHeight * $ratio
}
$('.panel-test .bg-taglines').css("width", $taglinesWidth);
$('.panel-test .bg-taglines').css("height", $taglinesHeight);
// Add top margin if above breakpoint
if ( $(document).width() > $breakPoint) { // No margin unless above 768px
$('.panel-test .bg-taglines').css("margin-top", $marginTop);
}
else {
$('.panel-test .panel-1-tagline').css("bottom", $marginTop);
}
// Set font size
var $fontSize = $taglinesWidth * 0.12;
$('.bg-panel h4').css("font-size", $fontSize);
// Set pink line origin (relative to bottom-left of frame)
var $pinkX = $taglinesWidth * (286 / 705);
var $pinkY = $taglinesHeight * (192 / 607);
$('.panel-test .animation-wrapper').css("left", $pinkX);
$('.panel-test .animation-wrapper').css("bottom", $pinkY);
// Set image size
var $imageWidth = $taglinesWidth * 0.556;
$('.panel-test .scaleable-image').css("width", $imageWidth);
// Set h3 margin from top
if ( $(document).width() >= $breakPoint) {
var $marginH3 = $windowHeight * (217/792); // ratio from PSD
$('.panel-test h3').css("margin-top", $marginH3);
} else {
// CSS
}
// Set line offset from top
var $lineOffset = $taglinesHeight * 0.7;
$('.panel-test .line-wrapper').css("top", $lineOffset);
// Set line length
var $lineLong = $taglinesWidth * 1;
$('.panel-test .pink-line').css("width", $lineLong);
}).resize();
It works: MOST of the time.
If I drag my window to resize, some of the elements get resized. Others don't.
A page refresh generally solves it, but right now, elements (mostly the images!) just aren't scaling properly and in sync with other elements.
I'm very new to jQuery and this is my first big undertaking. New to using resize as well. Hoping I just made a goof that's easy to fix.
Thanks!
LIVE SITE LINK
Other plugins in use: jQuery Scrollify (for full page scrolling) and ScrollReveal.

Guess I can answer my own question.
The issue seemed to be that the values were getting mixed up when scrolling from one full-screen panel to another.
Changing this:
$(window).on("resize", function () {
To this:
$(window).on("resize load scroll", function (e) {
... solved the issue. I'm not sure if it's the right way to do it, but the resizes are all working fine now.

Resizing image preview not working

Working JSFiddle before attempting to implement: http://jsfiddle.net/qa9m7t33/
After attempting to implement: http://jsfiddle.net/z1k538sm/
I found how to resize an image however I believe this was not an example for being it prior upload and I am pretty new to this. What I believe is wrong is the variable;'
var width = e.target.result.width(); // Current image width
var height = e.target.result.height(); // Current image height
I am also having the problem with centering my text in the upload field.
Updated Fiddle: http://jsfiddle.net/m5jLf259/

Not exactly a Js answer to this but adding a line-height CSS to the element
#file {
line-height: 37px;
}
will get the job done, I guess if you want it to be jQuery you could do
$('#file').css('line-height',$('#file').height() + 'px');
As for the first part of your problem I couldn't make out a question, sorry.
Edit:
for the first part try this:
var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
readURL(this);
})
$('#file').click(function(){
fileInput.click();
}).show();
function readURL(input) {
$('#blah').hide();
if (input.files && input.files[0]) {
var goUpload = true;
var uploadFile = input.files[0];
if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(uploadFile.name)) {
$('#file').effect( "shake" );
$('#file').text('You must select an image file only');
setTimeout(function() { $('#file').text('Choose file');},5000);
goUpload = false;
}
if (uploadFile.size > 2000000) { // 2mb
//common.notifyError('Please upload a smaller image, max size is 2 MB');
$('#file').text('Please upload a smaller image, max size is 2 MB');
setTimeout(function() { $('#file').text('Choose file');},5000);
goUpload = false;
}
if (goUpload) {
$('#file').text("Uploading "+uploadFile.name);
var reader = new FileReader();
reader.onload = function (e) {
var img = new Image;
img.onload = function() {
var maxWidth = 100; // Max width for the image
var maxHeight = 100; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = this.width; // Current image width
var height = this.height; // Current image height
// Check if the current width is larger than the max
if (width > maxWidth) {
ratio = maxWidth / width; // get ratio for scaling image
$('#blah').css("width", maxWidth); // Set new width
$('#blah').css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
}
// Check if current height is larger than max
if (height > maxHeight) {
ratio = maxHeight / height; // get ratio for scaling image
$('#blah').css("height", maxHeight); // Set new height
$('#blah').css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
$('#blah').attr('src', this.src).show();
$('#file').text(uploadFile.name);
};
img.src = reader.result;
}
reader.readAsDataURL(uploadFile);
}
}
}
You shouldn't have the part where it says:
47 var width = uploadFile.width(); // Current image width
48 var height = uploadFile.height(); // Current image height
twice because you're just undoing your work from the previous IF.
Also it seems the FileReader() is unable to get the image size properties so instead have FileReader, create an image Object, and then make the image Object's onload do all the work.

jQuery jslint var was used before it was defined

I've been using jslint to try see what it says about my code, and i get lots of flags, but i am working through trying improve it. However i am stuck on the error
maxHeight was used before it was defined
My jQuery:
$.fn.thumbSizr = function () { // begin function
"use strict";
return this.each(function () {
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
if(width > maxWidth){
ratio = maxWidth / width; // get ratio for scaling image
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height < minHeight){
ratio = minHeight / height; // get ratio for scaling image
$(this).css("height", minHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
var $img = $(this),
css = {
position: 'absolute',
marginLeft: '-' + (parseInt( $img.css('width') ) / 2) + 'px',
left: '50%',
top: '50%',
marginTop: '-' + (parseInt( $img.css('height') ) / 2) + 'px'
};
$img.css( css );
});
};
I'm no jQuery pro so this might be ropey but i really wanted to make it as good as possible. Can anyone explain and suggest why i am getting this message and how to avoid it in the future?
Thanks

You are using semicolon instead of comma when declaring multiple variable with single "var"
This part is wrong:
var $this = $(this);
maxWidth = $(this).parent().width(); // Max width for the image
minHeight = $(this).parent().height(); // Max height for the image
ratio = 0; // Used for aspect ratio
width = $(this).width(); // Current image width
height = $(this).height(); // Current image height
fixed:
var $this = $(this),
maxWidth = $(this).parent().width(), // Max width for the image
minHeight = $(this).parent().height(), // Max height for the image
ratio = 0, // Used for aspect ratio
width = $(this).width(), // Current image width
height = $(this).height(); // Current image height

jQuery - How to know if window is resizing in width/height or both?

I have a little problem with window resizing using jQuery's function .resize(). I would like to know which dimension is getting bigger/smaller - width or height. I need this because if I just put two conditions - if width is for 50px bigger than div and if height is for 50px bigger than div,
// (pseudocode)
if width = div.width + 50px
width = something
if height = div.height + 50px
height = something
then is working on just one condition and I can resize only width or height.
How could I know which dimension is changing in size or if both are?

By saving last window size values in variables.
var h = $(window).height(), w = $(window).width();
$(window).resize(function(){
var nh = $(window).height(), nw = $(window).width();
// compare the corresponding variables.
h = nh; w = nw; // update h and w;
});

Save the previous size and compare with it, everytime the size changes.
For ex:
var prevW = -1, prevH = -1;
$(document).ready(function() {
// ... other stuff you might have inside .ready()
prevW = $(window).width();
prevH = $(window).height();
});
$(window).resize(function() {
var widthChanged = false, heightChanged = false;
if($(window).width() != prevW) {
widthChanged = true;
}
if($(window).height() != prevH) {
heightChanged = true;
}
// your stuff
prevW = $(window).width();
prevH = $(window).height();
});
Demo: http://jsfiddle.net/44aNW/

Determining the maximum possible size an image can be within a rectangle

I have a function I'm using to determine the absolute maximum size an image can be (while retaining its aspect ratio) within a particular rectangle. The code I'm currently using is definitely wrong but I'm not sure where I went wrong.
// Sets the image to the largest proportional size possible
// based on the current browser window dimensions and original
// image size specified by the image loader
function applyLargestProportionalSize() {
var maxWidth = <width of container>;
var maxHeight = <height of container>;
var realWidth = <actual image width>;
var realHeight = <actual image height>;
if (realWidth < realHeight && maxWidth > maxHeight) {
var scaledWidth = Math.min(realWidth, maxWidth);
$('img').css('width', scaledWidth);
// let height be determined by the browser
} else {
var scaledHeight = Math.min(realHeight, maxHeight);
$('img').css('height', scaledHeight);
// let width be determined by the browser
}
}

I don't know javascript, but the problem is that your code can handle only the cases in which the aspect ratio of the container is less than one, and the aspect ratio of the image is greater than one (or maybe I have that backwards, I'm not sure of the exact definition of aspect ratio). Try this:
if (realWidth/realHeight > maxWidth/maxHeight) {
// everything else the same

Scale the image dimensions for two cases:
To match the container's height, in which case you get a width
scaled_width = image_width * container_height / image_height
scaled_height = container_height
To match the container's width, in which case you get a height
scaled_height = image_height * container_width / image_width
scaled_width = container_width
Then pick the first one where the computed dimension fits within the container.
If the image and the container are the same aspect ratio, they will both fit.
If the image is narrower-aspect than the container, only the first one will fit.
If the image is wider-aspect than the container, only the second one will fit.