Centering captions on FlexSlider using jQuery

Question

FlexSlider 2 seems to position captions 10 pixels above the bottom of individual slides with this css from line 97 of flexslider.css:

.flexslider p {
    position: absolute;
    bottom: 10px;
}

To this I've added my own CSS:

.flexslider p {
    font-family: 'Exo', san-serif;
    font-size: 18pt;
    text-align: center;
}

I noticed that other people asking about FlexSlider captions use a class called "flex-caption." This doesn't make sense to me, because the string "flex-caption" does not appear at all in my relatively recent versions of flexslider.css and jquery.flexslider-min.js. Nevertheless, I added the class to my HTML:

<div class="flexslider">
     <ul class="slides">
         <li>
             <img src="images/slider/craft-the-future.jpg" />
             <p class="flex-caption">Craft the future!</p>
         </li>
         <li>
             <img src="images/slider/plugged-in.jpg" />
         </li>
         <li>
             <img src="images/slider/athletics.jpg" />
         </li>
         <li>
             <img src="images/slider/make-reality.jpg" />
         </li>
     </ul>
</div>

I decided that I need to add a left (or right) property to the absolutely positioned paragraph tag. Based mostly on Grinn's reply to this question, I decided to use JavaScript to find the pixel width of the paragraph tag, and then to subtract that width from the width of the slider box (720 pixels) before assigning the value to a left property.

I don't claim to know JavaScript or jQuery, but I've tried to do the best that I can with the tutorials and documentation available. I don't think I figured out how to load Grinn's plain JavaScript-heavy code as it is, so I decided to translate that method into a more jQuery-heavy format. I was finally successful in getting the browser to recognize the jQuery, since the alert does appear when I reload:

$(document).ready(function() {

    var caption = $(".flexslider p");

    alert(caption.length); // For debugging only

    var indent = 720 - $(caption.innerWidth);

    $(caption).css({
        left: 'indent'
    });

});

It doesn't seem to matter whether I use ".flexslider p" or ".flex-caption" to select the p tag.

Answer 1

You are assigning the value of left to be a string instead of your indent variable.

   $(caption).css({
        left: 'indent'
    });

Should be:

   $(caption).css({
        left: indent
    });