Javascript - Create dynamic class that sets width of div

Question

I am trying to create a somewhat dynamic html class that sets a width % based on a number included at the end of a class. Note: Class name will always start with "gallery-item-"

Example: div.gallery-item-20 = 20% width

What I need:

Get the class name(s) and convert each to string in order to be able to read the number at the end (if this step is even necessary)
Translate that number into a % that applies to the width of each class with that name.

One might ask, why not just make separate classes? I would prefer a bit more control, that's all. Thank you in advance for any and all answers. Here is my current current code (I am fairly new to js):

$('.hollow-gallery-04').masonry({
  // options
  itemSelector: '.gallery-item'
});

var galleryItem = $('[class^="gallery-item-"]');

Object.values(galleryItem).forEach(function(item) {
  this.toString();
  console.log(galleryItem);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hollow-gallery-04">
  <div class="gallery-item-20">
    <img src="http://via.placeholder.com/350x150" alt="">
  </div>
  <div class="gallery-item-20">
    <img src="http://via.placeholder.com/500x300" alt="">
  </div>
</div>

Could you clarify what control you're concerned about giving up by just making separate classes? — Dennis George
– Dennis George, Commented Sep 22, 2017 at 16:23

Dennis George · Accepted Answer · 2017-09-22 16:17:10Z

1

I don't really think any JS is necessary to accomplish this. This should be done using pure CSS, what control is it exactly that you're worried about losing?

Just write a class for every gallery-item-X like:

.gallery-item-20 { width: 20%; }

If you'd rather not write that out for every number from 0 to 100, you should look into something like Sass to generate the CSS you need. Something like this:

@for $i from 0 through 100 {
    .gallery-item-#{$i} { width: #{$i}%; }
}

Here's a good tutorial to maybe get you started with Sass:

https://scotch.io/tutorials/getting-started-with-sass

answered Sep 22, 2017 at 16:17

Dennis George

1,5452 gold badges10 silver badges18 bronze badges

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

3 Comments

gumball Over a year ago

Thank you for the tips! The control is mostly for speed/flexibility purposes. Also for my learning purposes, though. Pre-processors are not an option -at the moment- because my users will be low-level, front-end content developers who need to pump out volume. As "bleeding-edge" as I want to be, css variables are still a bit out of reach because a lot of my clients' customers may still be on versions of IE8.

Dennis George Over a year ago

theres no reason the generated css from Sass or Less should be incompatible with IE8, so dont let that stop you. also, whats nice about Sass, is that it is CSS still. you can use the sugar just when you want it.. in my experience, i find it actually better enables low-level devs to produce better code in less time..

Dennis George Over a year ago

i respect learning purpose, Andrei's answer would be how to do it in JS. i'd still argue thats the wrong way to do it though. your question is what CSS is made to do... also i still would like to understand what you mean by speed/flexibility? JS coming back in and settings widths would be measurably slower than having your CSS rules load with the page..

Andrei Nemes · Accepted Answer · 2017-09-22 16:18:15Z

0

This would be one way to do it:

var getValue = function(classString) {
  return parseInt(classString.substring(classString.lastIndexOf('-') + 1), 10);
}

galleryItem.each(function() {
  $(this).css(
    'width',
     getValue(this.className) + '%'
  );
});

Working example https://jsfiddle.net/ytL4g8ps/

answered Sep 22, 2017 at 16:18

Andrei Nemes

3,1221 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Javascript - Create dynamic class that sets width of div

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related