Adding css to dynamically created elements

Question

I am creating a jQuery Gallery Plugin. The initial markup needed to make the plugin run is:

HTML

<div class="riGallery">
    <ul>
        <li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
    </ul>
</div>

Once the plugin is called, it is dynamically adding the rest of the HTML needed to make the plugin work.

After added HTML

<div class="rigallery">
    <div class="ri-display">
        <a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a>
        <button class="ri-prev" href="http://example.com"><</button>
        <button class="ri-next">></button>
    </div>
    <ul>
        <li><a href="http://www.example.com"><img src="img/gallery-img-1.jpg" alt="Description 1"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-2.jpg" alt="Description 2"></a></li>
        <li><a href="http://www.example.com"><img src="img/gallery-img-3.jpg" alt="Description 3"></a></li>
    </ul>
</div>

I have all of the CSS in an external stylesheet, but once I create the new elements, they don't take on the styles in the stylesheet. The stylesheet is linked up to the HTML page that the plugin is on, and I am calling the plugin after the document loads...

Plugin Call

<script>
    $(function() {
        $(".riGallery").riGallery({
            thumbWidth: 100,
            thumbHeight: 100
        });
    });
</script>

How do I get the CSS from the stylesheet to load on the dynamically-created elements?

CSS is applied to dynamically created elements. Something else is causing your problem. Do you have a jsFiddle you can show? — Lloyd Banks
– Lloyd Banks, Commented Sep 15, 2014 at 20:21

Mediascreen · Accepted Answer · 2014-09-15 20:57:07Z

2

Class names are case sensitive, try renaming the class for your wrapping div to "rigallery".

answered Sep 15, 2014 at 20:57

Mediascreen

3673 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MikesBarto2002 Over a year ago

I am now completely embarrassed. My classes in CSS were lowercase, which is why they weren't picking up the styles. How do I erase this forever?! :-) Thanks for catching that.

David Lounsbrough · Accepted Answer · 2014-09-15 20:20:18Z

0

I would target specific classes that the plugin creates. You can see the classes that the plugin creates if you open the developer view in the browser. Then you can simply put the CSS in your external file with those classes that you are interested in. You may also need !important in your css since the plugin is likely redefining the CSS upon creation of the elements.

answered Sep 15, 2014 at 20:20

David Lounsbrough

4322 silver badges9 bronze badges

Comments

kuma DK · Accepted Answer · 2014-09-15 20:23:42Z

0

Styles will automatically applied to all dynamically created elements if you have the CSS selectors defined correctly. But javascript event methods will not bind on dynamically created items. you have to bind them after creation of the elements.

Your problem may be some issues with js not css. Is it your js is applying the styles. If so you have to re-execute the js function after adding the elements.

answered Sep 15, 2014 at 20:23

kuma DK

1,8611 gold badge19 silver badges41 bronze badges

Comments

Xm7X · Accepted Answer · 2014-09-15 20:46:10Z

0

This will write the styles inline.

$("ul a > img").css("width", "100px").css("height", "100px");

or

This is better to set the img width and height. http://www.w3schools.com/tags/tag_img.asp

$("ul a > img").attr('width', '100').attr('height', '100');

edited Sep 15, 2014 at 20:46

answered Sep 15, 2014 at 20:32

Xm7X

8611 gold badge12 silver badges23 bronze badges

4 Comments

Xm7X Over a year ago

Maybe add a class to the images <img class="someClass" src="img/gallery-img-1.jpg" alt="Description 1"> then fire this in your function. $(".someClass").css("width", "100px").css("Height", "100px");

MikesBarto2002 Over a year ago

I'd rather not add the CSS in with jQuery if at all possible.

Xm7X Over a year ago

In the CSS try. div.rigallery ul li a > img {width:100px;height:100px;}

Xm7X Over a year ago

or ul li a > img {width:100px!important;height:100px!important;}

Collectives™ on Stack Overflow

Adding css to dynamically created elements

HTML

After added HTML

Plugin Call

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

After added HTML

Plugin Call

4 Answers 4

1 Comment

Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related