<td> size to auto-match background pic size

Forum Moderators: open

Message Too Old, No Replies

<td> size to auto-match background pic size

sssweb

10:30 pm on Feb 4, 2006 (gmt 0)

Is there a way to get a table cell size to automatically match the background pic size? I'm using a template that will fill the table cell with different background pics, so I can't set a pixel x pixel size because the pic sizes change. I tried not specifying anything, hoping it would auto-expand to the required size (like it does if you put any <img> in the cell), but that doesn't work. Also tried setting height & width to 'auto' and to '100%', but neither worked.

Any tricks that would do this?

DrDoc

10:51 pm on Feb 4, 2006 (gmt 0)

Why not just use an <img> tag?

sssweb

11:51 pm on Feb 4, 2006 (gmt 0)

I'm overlaying an image on the background, but it's smaller than the backround so it doesn't size up the <td> enough.

DrDoc

11:55 pm on Feb 4, 2006 (gmt 0)

There is no way of getting the TD to resize according to its background.

Well, I shouldn't say "no way". You can get it to do this using either a server side solution (PHP/Perl/ASP) or a JavaScript solution ...

DrDoc

12:10 am on Feb 5, 2006 (gmt 0)

JavaScript example:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Auto TD resize to background image</title> 
<script type="text/javascript"> 
function resize(which) { 
  tempImg = new Image(); 
  which = document.getElementById(which).firstChild; 
  for(i = 0; i < which.childNodes.length; i++) { 
    for(j = 0; j < which.childNodes[i].childNodes.length; j++) { 
      curTD = which.childNodes[i].childNodes[j];  
      bkg = (curTD.background? curTD.background : curTD.style.backgroundImage).replace(/^url\(¦\)$/g, ''); 
      tempImg.src = bkg; 
      curTD.style.height = tempImg.height; 
      curTD.style.width = tempImg.width; 
    } 
  } 
} 
</script> 
</head> 
<body onload="resize('mytable')"> 
<table border="1" id="mytable"> 
  <tbody> 
    <tr> 
      <td background="http://www.google.com/intl/en/images/logo.gif">&nbsp;</td> 
    </tr> 
    <tr> 
      <td style="background-image: url(http://www.google.com/intl/en/images/logo.gif)">&nbsp;</td> 
    </tr> 
  </tbody> 
</table> 
</body> 
</html>

Replace broken pipe ¦ with a regular vertical pipe.

[edited by: DrDoc at 12:11 am (utc) on Feb. 5, 2006]

sssweb

12:10 am on Feb 5, 2006 (gmt 0)

okay, I'm investigating using getimagesize() in php to get the background pic size & apply it to the <td> size. Sound good? I'll post in the php forum if I have questions.

DrDoc

12:12 am on Feb 5, 2006 (gmt 0)

Yes, getimagesize() should work quite well. :)

sssweb

7:23 pm on Feb 5, 2006 (gmt 0)

Thanks a lot for that javascript code -- I appreciate your taking the time to do that.

It works perfect as is, but I ran into a glitch when I tried applying it to my page. I'm assigning the <td background via CSS in the <head> section, not in the <td> tag itself. Can you mod your script to account for that? My code basically looks like this:

<head>

</head>

</body>

DrDoc

7:57 pm on Feb 5, 2006 (gmt 0)

In the script, simply change:

bkg = (curTD.background? curTD.background : curTD.style.backgroundImage).replace(/^url$¦$$/g, '');

... to:

bkg = (curTD.background? curTD.background : (curTD.style.backgroundImage? curTD.style.backgroundImage : curTD.currentStyle.backgroundImage)).replace(/^url$¦$$¦[\"\']/g, '');

sssweb

9:10 pm on Feb 5, 2006 (gmt 0)

That works great, but...um...I'm using this in a php print string (don't ask...it's a long story) and need to escape all double quotes -- there's one at the end of your new line, and when I escaped it with a backslash, I got the following error in that line:

Parse error: parse error, unexpected T_CHARACTER, expecting T_STRING or T_VARIABLE or T_NUM_STRING

My code line looks like:

bkg = (curTD.background? curTD.background : (curTD.style.backgroundImage? curTD.style.backgroundImage : curTD.currentStyle.backgroundImage)).replace(/^url$�$$�[\\"\']/g, '');

DrDoc

10:02 pm on Feb 5, 2006 (gmt 0)

you need to escape both the double-quote and the backslashed used to escape it in the JavaScript itself.

\" = \\\"

...replace(/^url\$�\$$�[\\\"\\']/g, '');

sssweb

10:27 pm on Feb 5, 2006 (gmt 0)

hmm...still get the same error. Do the js & php escapes conflict?

I have:

...replace(/^url\$�\$$�[\\\"\\']/g, '');

also tried:

...replace(/^url\$�\$$�[\\"\\']/g, '');

DrDoc

10:48 pm on Feb 5, 2006 (gmt 0)

The first should work ... assuming you replace the broken pipes "¦" with a regular vertical bar.

sssweb

3:40 pm on Feb 6, 2006 (gmt 0)

Thanxs Doc -- I luv ya.