One of my Angular directives has a feature that scrolls through words in an array and presents them as if they are being typed out in real-time. I'm facing an issue with aligning the h1 tag that displays these dynamically changing words to be centered using text-align: center. Despite my efforts, I can't seem to get it to work properly.
Below is the HTML code snippet...
<div class='intro-div'>
<h1 class='intro-title'>Hi, I'm Erik. I build & design</h1>
<div class='changing-text-space-holder'>
<h1 i-do class='intro-title changing-text'></h1>
</div>
<button class='hire-me-btn'>AVAILABLE FOR HIRE</button>
</div>
And here is the accompanying CSS...
.intro-div{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
width: 55em;
}
.intro-title{
font-family: 'WSReg';
color: white;
font-size: 3.5em;
text-align: center;
}
.changing-text-space-holder{
height: 3em;
width: 100%;
}
.changing-text{
border-right: lightgrey solid;
display: inline-block;
text-align: center;
}
.hire-me-btn{
border: solid white .2em;
border-radius: 75px;
width: 80%;
height: 2.5em;
background-color: transparent;
font-size: 3em;
font-family: 'WSReg';
color: white;
position: relative;
left: 50%;
transform: translateX(-50%);
}
Additionally, this is how my directive is set up...
myModule.directive('iDo', function(){
return function(scope){
var element = angular.element('.changing-text');
var words = ['front-end.', 'back-end.', 'anywhere between the "ends".', 'e-commerce websites.', 'landing-pages.', 'with Javascript.', 'with Python.', 'the internet.']
var startStopBool = false;
var word_count = 0;
var letter_count = 0;
function updateText(){
if(words[word_count] === undefined){ //if no more words in array stop
clearInterval(frontDisplay);
}else if(element[0].innerHTML.length === words[word_count].length){ //switch to next word
word_count++;
letter_count = 0;
clearInterval(frontDisplay);
setTimeout(function(){restartInterval()}, 2000); //wait 1 second and then restart the text
}else{
element[0].innerHTML += words[word_count][letter_count]
letter_count++;
}
}
function restartInterval(){
element[0].innerHTML = '';
frontDisplay = setInterval(updateText, 200);
}
var frontDisplay = setInterval(updateText, 200) //Starts text cycle
}
})