Creating a repeating variable from a list of variables (array)

Question

It may be a pretty simple question, but I can't seem to find an easy answer from trawling the web for an hour or so.

Basically, I am using a list of variables with values, or array if you like, to split letters up and reveal them one by one. I am looking to use another variable to display the results, which is a simple repeating variable which considers the variables within that.

My example below shows what I am trying to achieve, with my current long-winded way of doing it by listing them one by one.

I realise I could perhaps append the variables with [1] and reference that also, but the output needs to be one after the other too.

Thanks in advance.

var creativedesign1 = 'Packaging Design';
var creativedesign2 = 'Exhibition Design';
var creativedesign3 = 'Retail Design';
var creativedesign4 = 'Stationery Design';
var creativedesign5 = 'Presentation Design';
var creativedesign6 = 'Brochure Design';
var creativedesign7 = 'Leaflet Design';
var creativedesign8 = 'Apparel Design';
var creativedesign9 = 'Signage & Livery Design';
var creativedesign10 = 'CGI';
var creativedesign11 = 'Promotional Videos';
var creativedesign12 = 'Photography';
var creativedesign13 = 'Press Advert Design';
var creativedesign14 = 'Digital Advert Design';

var creativedesignspans = '<span>' + creativedesign1.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign2.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign3.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign4.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign5.split('').join('</span><span>') + '</span>' + '<br>' + '<span>' + creativedesign6.split('').join('</span><span>') + '</span>' + '<br>';

console.log(creativedesignspans);

jQuery('.servicebox').mouseleave(function(){
jQuery('.css-typing').empty();
jQuery('.css-typing span').css('display','none');
});

jQuery('.servicebox').mouseenter(function(){
setTimeout( function(){
jQuery(this).find('.main:after').css('display','none');
},200);
});

jQuery('.servicebox.branding').mouseenter( function(){

setTimeout( function(){
jQuery(creativedesignspans).hide().appendTo('.css-typing-branding').each(function (i) {
    jQuery(this).delay(16 * i).css({
        display: 'inline',
        opacity: 0
    }).animate({
        opacity: 1
    }, 100);
});
},200);

});

.servicebox {
  background:lightblue;
  padding:10px 30px 30px 30px;
  font-family:sans-serif;
}
.servicebox h2 {
color:#fff;
}

.css-typing {
    font-size: 16px !important;
    text-transform: none !important;
    line-height: 1.5;
    margin-top: 20px;
    display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fl-col fl-node-5b471c0898883 fl-col-small servicebox branding" data-node="5b471c0898883">
	<div class="fl-col-content fl-node-content">
	<div class="fl-module fl-module-html fl-node-5b97c796a1dad serviceheading branding" data-node="5b97c796a1dad">
	<div class="fl-module-content fl-node-content">
		<div class="fl-html">
	<h2 style="text-align: left;"><span class="main" style="font-size: 30px;">Test Example</span><span class="css-typing css-typing-branding"></span></h2></div>
	</div>
</div>
<div class="fl-module fl-module-rich-text fl-node-5b5ecd0b402b4 fl-animation fl-slide-left servicedesc slideInLeft fl-animated" data-node="5b5ecd0b402b4" data-animation-delay="0.0">
	<div class="fl-module-content fl-node-content">
		<div class="fl-rich-text">
	</div>
	</div>
</div>
	</div>
</div>

Hi. I have yeah, but I am not sure how I could do that with the required variable values. You mean dictate a single variable in essence, with an array, and then I could display that in the second variable - but how would I make them display them one after another please? — user4329628
– user4329628, Commented Sep 14, 2018 at 11:50
So, you want to get each word, split it by character, then show each character at once, one after another, something like that someone is typing the letters? — Calvin Nunes
– Calvin Nunes, Commented Sep 14, 2018 at 12:00
inline solution: creativedesignspans = [].map.call(creativedesign1, (letter) => ('<span>').concat(letter).concat('</span>')); — calm
– calm, Commented Sep 14, 2018 at 12:02

spirift · Accepted Answer · 2018-09-18 13:56:46Z

3

I think you're pretty close to what you need. Storing the strings in an array and then mapping that array is what you need to do.

This is the old code snippet.

const designs = [
  'Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
  'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design',
]

const creativedesignspans = designs.map((design) => {
  return `<span>${design.split('').join('</span><span>')}</span><br>`
})

document.getElementById("designs").innerHTML = creativedesignspans.join('')

<div id="designs"></div>

EDIT: To get the animations to work you should be able to use what you already have. Just pass in creativedesignspans.join('') instead of just creativedesignspans below is full code.

const designs = [
  'Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
  'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design',
]

const creativedesignspans = designs.map((design) => {
  return `<span>${design.split('').join('</span><span>')}</span><br>`
})

setTimeout( function(){
jQuery(creativedesignspans.join('')).hide().appendTo('.css-typing-branding').each(function (i) {
jQuery(this).delay(16 * i).css({
    display: 'inline',
    opacity: 0
}).animate({
    opacity: 1
}, 100);
});
},200);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="css-typing-branding"></div>

edited Sep 18, 2018 at 13:56

answered Sep 14, 2018 at 11:54

spirift

3,0721 gold badge16 silver badges20 bronze badges

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

6 Comments

user4329628 Over a year ago

Really good answer, thank you for looking at this using const, which is something I have not looking at using over var. I will implement this and see how things work, and also share the method I used to show the letters so I can create a more complete answer.

user4329628 Over a year ago

This is very close :) I have been working with trying .each() to no effect. I basically need to combine what you have there, with what I have posted above (please hover on the text in my example) to show the text in sequence in the same way I have up there. Does that make sense?

user4329628 Over a year ago

Could I pair api.jquery.com/jquery.each with your answer do you think instead of .map to achieve something nearer what I am after? I will answer this and put it to bed then.

spirift Over a year ago

i've updated the answer with the animation. What you had was good, just fitting it all together can be tricky.

user4329628 Over a year ago

Thanks so much dude. You're right, my jQuery is very amateur at best but I do try my hardest before I ask these things and look around the web. This is perfect, thank you. Relating to this, do you know at all why a console.log(value) returns all values, but a .html() or .text() only uses the last one? jsfiddle.net/xaL4n/65 - Would be great to know. Thanks again, marked as answered!

|

Calvin Nunes · Accepted Answer · 2018-09-14 12:14:01Z

1

IF I understood correct, you want to show each character of each word, one by one, like someone was typing... (If it is not what you want, please clarify your question a little more, including a desired result)

For that, I would use the approach below, where you have an array with the words, then you loop through each word and right after you loop through each character.

Then using a setTimeout you can show one letter after another, in the example I added some CSS for better visualization.

You can increase or reduce the time by modifying the number in the timeout: j * 100 to j * 300 (will be slower)

var div = document.getElementById("result");
var creativeDesigns = ['Packaging Design',
  'Exhibition Design',
  'Retail Design',
  'Stationery Design',
  'Presentation Design',
  'Brochure Design',
  'Leaflet Design',
  'Apparel Design',
  'Signage & Livery Design',
   'CGI',
  'Promotional Videos',
  'Photography',
  'Press Advert Design',
  'Digital Advert Design'
]

for (var i = 0; i < creativeDesigns.length; i++){
  let word = creativeDesigns[i];
  let elem = document.createElement("span"); 
  elem.className = "word-wrapper"
  for (var j = 0; j < word.length; j++){
    let char = word[j];
    setTimeout(() => {
      elem.textContent += char;
    }, j * 100)    
  }
  div.appendChild(elem);
}

.word-wrapper{
  margin: 8px;
  min-width: 50px;
  border: 1px solid;
  display: inline-block;
  padding: 6px;
}

<div id="result"></div>

answered Sep 14, 2018 at 12:14

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

3 Comments

user4329628 Over a year ago

You are spot on and I apologise if that was not completely clear. I have handled the aspect which is needed to show the letters one by one, but this alternative also works really well and I appreciate your time and effort looking at this. I will share the way I currently am displaying the letters also to create a more complete answer.

user4329628 Over a year ago

Hi mate - I have updated my initial question to show you what I have currently - which works, it's just the variable/array lists themselves that I was trying to make much tidier! Thanks

user4329628 Over a year ago

Also - this answer works great, but the css animate method I used means the text is revealed in stages, and it also runs through one after the other, as opposed to making them into words (which is really neat) and then they all appear at once? Thanks

Collectives™ on Stack Overflow

Creating a repeating variable from a list of variables (array)

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related