Click here to Skip to main content
11,575,635 members (62,648 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
I have an image element in a single celled table, when i click on a button i want to set the height and width of the image element to the size of the table cell.

The table cell is defined by user and we do not know the dimensions of the cell. I know if we set the height and width of an image to 100% it grabs or adjusts itself to the exact dimension of its parent (which is the cell in this case). So here is the code i am using to change the image size to 100%.

<td class="image">
<img alt="" class="CustomImage"  önerror="this.src='/Image1.bmp'" src="/Image2.bmp" 
         style="position: inherit; top: 0px; left: 50%; height: 50%; width: 50%;" /></td>

function onClick()
{
iterating through some objects
if(node.className=="Image")
{
//the 0th node is the image element
node.childNodes[0].width = 100+"%"; 
node.childNodes[0].height = 100+"%";//here is where the code is failing and below are various ways i tried to solve
}
}

//various ways
var x = 100;
var size = x.toString()+"%";
 
var size = "100%"
 
var size = 100+"%";
var newsize = size.valueof();
var newsize1 = parseInt(size, 10);

no matter whatever i do, the size i am defining is "100%" with quotes. In runtime the height is (height = 50%) without quotes. But when i put the height, its taking (height = "100%") with quotes, so its not working.

How do i achieve this? how do i remove the quotes and assign 100% to the height?


Hint/Extra Information:
the function .toString() converts 100 to "100"
is there anything that converts "100%" to 100%
Posted 28-Sep-12 6:24am
amarasat1.3K
Edited 28-Sep-12 6:27am
v2
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 3

function onClick()
{
   //iterating through some objects
   if(node.className=="Image")
   {
      //the 0th node is the image element
      node.childNodes[0].width = node.clientHeight; 
      node.childNodes[0].height = node.clientWidth;//this is the only solution i see as of now
   }
}
  Permalink  
v3
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Have you tried using '100%' or 100 +'%'?
  Permalink  
v2
Comments
amarasat at 28-Sep-12 13:40pm
   
Yes ofcourse,

thats what i showed in the various ways, i tried both of them
Deepak Jena at 28-Sep-12 13:41pm
   
Tried with single quotes ?
you didn't mention that !
amarasat at 28-Sep-12 14:03pm
   
I am sorry, i misunderstood

yes i have tried now with single quotes in all possible ways, it didn't work still!!
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

If you know the Pixel height , then you can also use
node.childNodes[0].width = "400px"// Your Pixel or you can it's parent element's Height in pixel and set to it.
  Permalink  
Comments
amarasat at 28-Sep-12 14:50pm
   
This is what i am explaining from the start:

1.) No i dont know the pixel height, since i am calculating it dynamically
2.) What you have suggested is not working and i already told that.
3.) Yes its parent elements height, that is the whole key y i ahve posted a question, get the parent elments height in pixel without quotations, that the whole reason for the question

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


Advertise | Privacy | Mobile
Web04 | 2.8.150624.2 | Last Updated 28 Sep 2012
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100