CODEWITHSUNDEEP
jquerycssdynamicplugins
MikesBarto2002
MikesBarto2002

Reputation: 175

Adding css to dynamically created elements

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?

Upvotes: 0

Views: 5007

Answers (4)

Mediascreen
Mediascreen

Reputation: 367

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

Upvotes: 2

Xm7X
Xm7X

Reputation: 861

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

Upvotes: 0

kuma DK
kuma DK

Reputation: 1861

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.

Upvotes: 0

David Lounsbrough
David Lounsbrough

Reputation: 430

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.

Upvotes: 0

Related Questions