Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Need help with JQuery driven script to resize all images to parent element

    Hello,

    I have this short script here:

    Code:
    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

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by xlrustylx View Post
    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?

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    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.

  • #4
    New Coder
    Join Date
    Apr 2008
    Posts
    33
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.


    Code:
    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.
    	}
    	
    }

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by xlrustylx View Post
    I get the alert message this time, but there's nothing in it.

    Code:
            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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •