Forum Moderators: open
I've got divs that all have a class name and then images and paragraphs inside of the divs. The paragraph is a caption, and I can't think of any possible CSS-only way to make it so that it doesn't extend past the image.
Here's my HTML:
<body onload="setCaptions();">
<div class="container">
<h1>DOM test</h1>
<div class="photo">
<img src="joker.jpg" alt="Why so serious?" id="jokerpic" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div></body>
I know I need to do something like "get the width of the images inside of divs, then set that value as the width of the div". This isn't complete, but it's as far as I keep getting before things get worse.
Here's the script from the <head>.
<script type="text/javascript">
function setCaptions() {
var picwidth = document.getElementById('jokerpic').clientWidth;
// alert(picwidth);
document.getElementsByClassName('photo').style.width = picwidth;
}
</script>
When it's not commented out alert(picwidth) does return the proper width of the image (300 pixels). But When I try to set the width of the div with the class "photo" to picwidth, I get an undefined value.
Any ideas?
there is no document.getElementsByClassName(). :(
So you need to find the <div class="photo"> by other means. ;)
Try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><script type="text/javascript">
window.onload=function() {
setCaptions();
}function setCaptions() {
var dvs=document.getElementsByTagName('div');
var picwidth=document.getElementById('jokerpic').clientWidth;
for(var c=0;c<dvs.length;c++) {
if(dvs[c].className=='photo') {
dvs[c].style.width=picwidth+'px';
}
}
}</script>
</head>
<body><div class="container">
<h1>DOM test</h1>
<div class="photo">
<img id="jokerpic" src="joker.jpg" alt="Why so serious?">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p></div>
</div></body>
</html>
Since this will be coming from a legacy system, I can't count on there being an ID in the image. Also, many pages will have multiple images like this. I think I'm going to have to get picwidth by tag name.
Here's what I've mangled the code into so far:
<script type="text/javascript">
window.onload=function() {
setCaptions();
}function setCaptions() {
var containerDiv = document.getElementsById('container');
var dvs = containerDiv.getElementsByTagName('div');
var picwidth = dvs.getElementsByTagName('img')[0].clientWidth;
for (var c = 0; c < dvs.length; c++) {
if (dvs[c].className == 'photo') {
dvs[c].style.width = picwidth + 'px';
}
}
}
</script>
And the relevant HTML, which has changed a little. The container div has an ID now, and the images have none.
<body>
<div id="container"><h1>DOM test</h1>
<div class="photo">
<img src="joker.jpg" alt="Why so serious?" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="photo">
<img src="batman.png" alt="I'm Batman!" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</body>
This sort of works, but predictably only sets the width of the caption div to the width of the first image:
<script type="text/javascript">
window.onload = function() {
setCaptions();
}function setCaptions() {
var containerDiv = document.getElementById('container');
var dvs = containerDiv.getElementsByTagName('div');
var picwidth = document.getElementsByTagName('img')[0].clientWidth;
for (var c = 0; c < dvs.length; c++) {
if (dvs[c].className == 'photo') {
dvs[c].style.width = picwidth + 'px';
}
}
}
</script>
try it like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript"><script type="text/javascript">
window.onload=function() {
setCaptions();
}function setCaptions() {
var picwidth=[];
var containerDiv=document.getElementById('container');
var dvs=containerDiv.getElementsByTagName('div');
for(var c=0;c<dvs.length;c++) {
if(dvs[c].className=='photo') {
picwidth[c]=dvs[c].getElementsByTagName('img')[0].clientWidth;
dvs[c].style.width=picwidth[c]+'px';
}
}
}</script>
</head>
<body><div id="container">
<h1>DOM test</h1>
<div class="photo">
<img src="joker.jpg" alt="Why so serious?">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div><div class="photo">
<img src="batman.png" alt="I'm Batman!">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div></div>
</body>
</html>
No problem, you're welcome. ;)
