Add Number to CSS Rule from JavaScript Calculation

Question

I am creating a slideshow using JavaScript. I am positioning the controls (the next and previous buttons) with JS.

The HTML, when the buttons are added via JS, looks like this:

<div id="slideshow">
            <figure>
                <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg">
                <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
            </figure>
            <figure class="hide">
                <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg">
                <figcaption>Insert caption</figcaption>
            </figure>
            <figure class="hide">
                <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg">
                <figcaption>Insert caption</figcaption>
            </figure>

        <span id="next"><p>&gt;&gt;</p></span>
       <span id="previous"><p>&lt;&lt;</p></span>
</div>
<!-- end slideshow -->

The slide is made up of a figure element with an image and a caption.

I want the controls (two spans) to be positioned vertically in the middle of the image (not taking the height of the caption into account, which could vary).

The spans are positioned like this:

#previous,#next {
  height:0;
  padding-bottom:65.9%;
  /* Calculate this with JS so can adjust based on img height */
   position:absolute;
  top:0
}

#previous p,#next p {
  margin:0;
  display:table;
  position:absolute; 
  /* positioned in relation to the #previous and #next spans */
  top:50%;
  -moz-transform:translateY(-50%);
  -webkit-transform:translateY(-50%);
  -o-transform:translateY(-50%);
  -ms-transform:translateY(-50%);
  transform:translateY(-50%)
}

#previous p {
    left:0;
    border-radius:0 5px 5px 0;
}

#next p {
  right:0; /*moves button to right corner of span instead of left */
  border-radius:5px 0 0 5px;
}

#previous {
    left: 0;
}

#next {
    right: 0;
}

The #previous and #next spans have a padding-bottom that extends it to the height of the image only (does not include the captions) and then the actual text of the buttons are positioned in relation to the span.

I need to calculate the padding-bottom based on the image height. But with different slideshow uses, the image height may change. Another slideshow may use images of a different dimension.

So I want JavaScript to calculate this padding and insert it into the stylesheet. I have the JS for the calculation:

// Calculate position of buttons
var getImage = photos[0].firstElementChild;
var imageHeight = (getImage.height);
var imageWidth = (getImage.width);
var paddingTop = (imageHeight / imageWidth) * 100;
paddingTop = +paddingTop.toFixed(2);
var percent = paddingTop + "%";

I just can't figure out how to add the percent variable to the stylesheet so that the rule is:

#previous,#next {
    padding-bottom:[insert % from JS];
 }

Here is my JSFiddle: http://jsfiddle.net/amykirst/17rbku86/

Tip: Give the inner elements `display: table-cell` and `vertical-align: middle`. It might solve your problem. — emerson.marini, Jun 18 '15 at 14:44
Or you can use php as done here: http://stackoverflow.com/questions/476276/using-javascript-in-css — Anna, Jun 18 '15 at 14:46
https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information You can insert CSS rules in a style sheet with CSSOM. — Sebastian Simon, Jun 18 '15 at 14:46

score 0 · Accepted Answer · answered Jun 18 '15 at 14:46

0

Use this:

document.getElementById("previous").style.paddingBottom = percent;
document.getElementById("next").style.paddingBottom = percent;

FIDDLE: https://jsfiddle.net/lmgonzalves/17rbku86/3/

answered Jun 18 '15 at 14:46

lmgonzalves

6,518
3
22
41

Add Number to CSS Rule from JavaScript Calculation

1 Answers1