Change CSS dynamically based on a value from array

Question

I have this part of html:

<h1 class="gr-title uppercase">
<span class="title-red">GET MORE</span> 
<span id="wordSwap" class="title-black">PROFITS</span>
</h1>

...and this jquery code that changes the value of the span with ID wordSwap:

(function(){

    //Words:
    var words = [
    'Profits',
        'Freedom',
        'Time',
        'Enjoyment',
        'Disconnection',
        'Value'
        ], i = 0;

    setInterval(function(){
        $('#wordSwap').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
        });
       // 2 second interval
    }, 2000);

})();

I'm trying to change the letter-spacing for each value in the array based on what value/word comes next, but I am stuck and can't get it to work. For example I'd like the word "Time" to have letter-spacing = 30px, and the word "Value" 20px, and so on. How can I get this done?

Here is a jsfiddle of what I have up to now: https://jsfiddle.net/vgum6jn6/

//Swap words effect
(function() {

  // List of words:
  var words = [
    'Profits',
    'Freedom',
    'Time',
    'Enjoyment',
    'Disconnection',
    'Value'
  ], i = 0;

  setInterval(function() {
    $('#wordSwap').fadeOut(function() {
      $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
    // 2 seconds
  }, 2000);

})();

.gr-title {
  font-family: "Arial", Georgia, Serif;
}

.uppercase {
  text-transform: uppercase;  
}

.title-red {
  color: #CB0000;
}

.title-black {
  color: #191919;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<h1 class="gr-title uppercase">
  <span class="title-red">GET MORE</span> <span id="wordSwap" class="title-black">PROFITS</span>
</h1>

How are you calculating the letter spacing value based on next item in the array? — brk
– brk, Commented Jul 3, 2016 at 2:12
Create an array of objects [{word:'Time',spacing:'30px'},{word:'Value',spacing:'20px'}] — Alex Kudryashev
– Alex Kudryashev, Commented Jul 3, 2016 at 2:15
@Rayon I didn't go into detail when I was explaining the "pattern" but it would be the less letters the word has, the larger the spacing. So, for example: Time=30px, Value=20px, Freedom=10px, Enjoyment=5px, Disconnection=0px. — iamx
– iamx, Commented Jul 3, 2016 at 2:39
@AlexKudryashev Hi Alex, how would I properly go through indexes/loop an array of objects? I've created an array of objects and tried the code but it only shows the first word and then goes blank. — iamx
– iamx, Commented Jul 3, 2016 at 2:48

Alex Kudryashev · Accepted Answer · 2016-07-03 02:28:41Z

1

Try something like this:

var baseWidth = 100; //some value
setInterval(function(){
    $('#wordSwap').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn()
          .css('letter-spacing','') //reset spacing
          .css('letter-spacing', function(){
                var ratio = baseWidth / $(this).prop('offsetWidth');
                return ratio + 'px';
               });
    });
   // 2 second interval
}, 2000);

answered Jul 3, 2016 at 2:28

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

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

3 Comments

iamx Over a year ago

Thanks Alex, but whatever I do, I can only manage to change all the next elements to a fixed spacing. the shortest words still take the shortest width within their respective containers

Alex Kudryashev Over a year ago

set baseWidth to the widest word and calculate spacing from it. This is an idea. The implementation is yours.

iamx Over a year ago

Hey Alex, I solved my issue thanks to you, I didn't use this solution, but I did use your tip by using an array of objects.

iamx · Accepted Answer · 2016-07-03 03:58:21Z

Alex Kudryashev helped me come up with this and it solved my issue perfectly:

             //Swap words effect:
            var words = [
                { word: 'Profits', spacing: '8px' },
                { word: 'Enjoyment', spacing: '0px' },
                { word: 'Freedom', spacing: '4px' },
                { word: 'Disconnection', spacing: '-2px' },
                { word: 'Time', spacing: '0.98em' },
                { word: 'Value', spacing: '0.5em' }
                ], i = 0, n = 0;

            setInterval(function () {
                $('#wordSwap').fadeOut(function () {
                    $(this).html(words[i = (i + 1) % words.length].word)
                    .css('letter-spacing', words[n = (n + 1) % words.length].spacing).fadeIn();
                });
                // 2 seconds
            }, 2000);

(disregard the random letter-spacing values, they are random for testing purposes)

Collectives™ on Stack Overflow

Change CSS dynamically based on a value from array

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