Dynamically calculate padding-left

**Rain Lover** · 04-17-2011, 03:00 AM

Hi,

Here's a sample division:

Code:

<div style="padding:0 0 0 30px; background:url(http://www.google.com/help/hc/images/sidewiki_157505_comment_bubble.gif) left center no-repeat;">some text</div>

I wonder how I can calculate the padding-left:30px dynamically so that any icon I choose the padding-left value changes according to the image width.

Any help is appreciated!

**coothead** · 04-17-2011, 09:30 AM

Hi there Rain Lover,

it is not possible to directly get the dimensions of a background-image.

But this would give the same space between all images and the text...

Code:


<div>
<img style="margin-right:12px;vertical-align:middle" src="http://www.google.com/help/hc/images/sidewiki_157505_comment_bubble.gif" alt="">some text
</div>

But if you have your heart set on javascript, then here is one possible solution...

Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>get computed style</title>

<style type="text/css">
#foo {
    background-image:url(http://www.google.com/help/hc/images/sidewiki_157505_comment_bubble.gif);
    background-repeat:no-repeat;
    background-position:left center;
 }
.hide {
    display:none;
 }
</style>

<script type="text/javascript">

function init(){

   var obj=document.getElementById('foo');
   var obj1=document.getElementById('blah');

if(obj.currentStyle) {
   image=obj.currentStyle.backgroundImage;
 }
else{
   compStyle=getComputedStyle(obj,'');
   image=compStyle.getPropertyValue('background-image');   
  }
   //obj1.src=image.slice(5,image.length-2);  this does not work in Safari and Chrome
   obj1.src=image.split('(')[1].split(')')[0];
   obj.style.paddingLeft=obj1.offsetWidth+12+'px';
   obj1.className='hide';
 }
   window.addEventListener?
   window.addEventListener('load',init,false):
   window.attachEvent('onload',init);

</script>

</head>
<body>

<div><img id="blah" src="#" alt=""></div>

<div id="foo">some text</div>

</body>
</html>

coothead

**Rain Lover** · 04-17-2011, 09:51 AM

this would give the same space between all images and the text

Dear coothead,

Thanks for the answer, but I'd prefer to use the image as a background image.

if you have your heart set on javascript, then here is one possible solution

Would you please try a wider image? It doesn't work in Chrome and Safari.

**coothead** · 04-17-2011, 12:53 PM

Hi there Rain Lover,

sorry about that.

I did not test in Safari, just Firefox and IE.

If you look at the code in my original post you will see that I have now used...

Code:


   obj1.src=image.split('(')[1].split(')')[0];

...instead of...

Code:


   obj1.src=image.slice(5,image.length-2);

Also note that the background-image height will be dependent on the font-size or line-height that you use.

coothead

**Rain Lover** · 04-17-2011, 03:15 PM

Your solutions always work. Thanks!

**coothead** · 04-17-2011, 03:52 PM

No problem, you're very welcome.

Thread: Dynamically calculate padding-left

Thread Tools

Search Thread

Dynamically calculate padding-left

The Following User Says Thank You to coothead For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions