...

View Full Version : Need help with JQuery driven script to resize all images to parent element



xlrustylx
08-27-2011, 01:24 AM
Hello,

I have this short script here:



function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array

for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image

var parentWidth = parentElement.width(); //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].width(); //Gets image width

var parentHeight = parentElement.height(); //Gets height of parent element
var imgHeight = img[i].height();//Gets image height

if (parentWidth < imgWidth){
img[i].width(parentWidth); //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}

if (parentHeight > imgHeight){
img[i].height(parentHeight); //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}

alert(parentWidth); //To test if parentNode is working correctly. Should return an integer.
}
}



It's got some JQuery in it (.width() and .height()) to make manipulation of the dimensions easier to manage.

Basically, it's supposed to resize all the images on the webpage to the size of their parent elements (divs) without losing aspect ratio. Image overflow will be hidden so that no matter what the aspect ratio of the image and it's container the largest possible area of the image will be exposed.

The alert() function I have at the bottom is supposed to run as a test that each loop is working correctly. However, my images don't get resized and I get no alert. I think the loop may be breaking out before it goes through everything. Anyone have ideas? I'm not a Javascript coder.

Thank you,
Jared

webdev1958
08-27-2011, 01:44 AM
Anyone have ideas? I'm not a Javascript coder.


What you are trying to to is relatively easiy, and btw you don't need jquery to do it. Do you want to learn how to do it or are you looking for someone to fix the code for you?

xlrustylx
08-27-2011, 02:02 AM
What you are trying to to is relatively easiy, and btw you don't need jquery to do it. Do you want to learn how to do it or are you looking for someone to fix the code for you?

Of course I don't need JQuery lol. I wrote this script and yes, I would like to learn, that's why I'm asking for help.

xlrustylx
08-27-2011, 02:19 AM
I tried it without JQuery. I get the alert message this time, but there's nothing in it. It's supposed to output the final image height for each image.



function resizeImages() { //Function will be ran onload in the <body> tag
var img = document.images; //Puts all the images in an array

for (var i = 0; i < img.length; i++) { //A loop to execute a set of functions for every image
var parentElement = img[i].parentNode; //Gets parent element of image

var parentWidth = parentElement.style.width; //Gets width of parent element (value is an integer without "px")
var imgWidth = img[i].style.width; //Gets image width

var parentHeight = parentElement.style.height; //Gets height of parent element
var imgHeight = img[i].style.height;//Gets image height

if (parentWidth < imgWidth){
img[i].style.width = parentWidth + "px"; //Sets width of image to width of parent element
img[i].style.height = "auto"; //Scales height
}

if (parentHeight > imgHeight){
img[i].style.height = parentHeight + "px"; //Sets height of image to height of parent element
img[i].style.width = "auto"; //Scales width
}

alert(img[i].style.height); //To test if parentNode is working correctly. Should return an integer.
}

}

webdev1958
08-27-2011, 03:22 AM
I get the alert message this time, but there's nothing in it.



alert(img[i].style.height);


That means img[i].style.height hasn't got a value. To get the rendered height of elements you should be using cleintHeight or offsetHeight (http://www.w3schools.com/jsref/dom_obj_all.asp)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum