CODEWITHSUNDEEP
jqueryhtmlcss
frankie liuzzi
frankie liuzzi

Reputation: 1720

Dynamic text bolding with javascript

I am using the jquery cycle library to render a picture slideshow on a webpage.

I have 5 pictures I want to scroll through and each one has a blurb of text I want to bolden when it is displaying.

i am not sure if it makes it simpler, but the order will always be the same, and I have a callback method from the cycle.

so, on every callback, how can I bolden one of five blurbs of text? and yes it has to loop back to the first one.

The text i need to bold is currently displayed like this within a 'slideshow' div:

<div id="column slideshow">

           **slideshow magic here*

                    <ul>
                    <li>blurb1</li>
                    <li>blurb2</li>
                         ...
                    </ul>
</div>

I am wondering how to even approach this problem, I am very new to frontend devel and javascript. Thanks!

Upvotes: 0

Views: 85

Answers (1)

mekwall
mekwall

Reputation: 28974

Add an active class to the current element in your slideshow with the after and before callbacks, and then style that class with font-weight: bold.

JavaScript

$('#slideshow').cycle({
    after: function(el, nextEl) {
        $(nextEl).addClass('active');
    },
    before: function(el) {
        $(el).removeClass('active');
    }
});

CSS

#slideshow li.active { 
    font-weight: bold;
}

Upvotes: 1

Related Questions