[jQuery] Styling JavaScript Generated Markup
I'm trying to add a PNG Overlay to some of my images, but every
solution I've seen requires extra markup. Example 1 has the extra
markup and Example 2 attempts to add the markup via JavaScript and
then use my existing stylesheet to style it. If I view the generated
source, I see the markup, but it's not getting styled. Is there any
way to do this without putting the style in the JavaScript code?
THX
-=Example 1=-
CSS:
.overlay {
background: transparent url('/graphics/themes/default/story-icon-
frame.png') no-repeat 0 0;
overflow: hidden;
position: relative;
left: -8em;
margin-right: -8em;
width: 7em;
height: 7em;
float: left;
}
XHTML:
<div class="item">
<h3>Lorem Ipsum</h3>
<div class="sub-header">
<dl>
<dt class="date">Publish Date</dt>
<dd class="date">July 10, 2008</dd>
</dl>
</div>
<img src="/graphics/themes/global/story-icon-roundedCorners.png"
alt="Lorem Ipsum" />
<div class="overlay"></div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
orci nulla, aliquam et, pulvinar rutrum, viverra ut, justo. Vivamus
cursus sapien eget enim.
</div>
-=Exampe 2=-
JavaScript:
$('#content .item img').load(
function() {
$(this).append('<div class="overlay"></div>');
}
);
CSS:
.overlay {
background: transparent url('/graphics/themes/default/story-icon-
frame.png') no-repeat 0 0;
overflow: hidden;
position: relative;
left: -8em;
margin-right: -8em;
width: 7em;
height: 7em;
float: left;
}
XHTML:
<div class="item">
<h3>Lorem Ipsum</h3>
<div class="sub-header">
<dl>
<dt class="date">Publish Date</dt>
<dd class="date">July 10, 2008</dd>
</dl>
</div>
<img src="/graphics/themes/global/story-icon-roundedCorners.png"
alt="Lorem Ipsum" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
orci nulla, aliquam et, pulvinar rutrum, viverra ut, justo. Vivamus
cursus sapien eget enim.
</div>