PDA

View Full Version : Dynamically calculate padding-left



Rain Lover
04-17-2011, 03:00 AM
Hi,

Here's a sample division:


<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...


<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...


<!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. :o

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...


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

...instead of...


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. ;)