Codepen: https://codepen.io/jitifor864/pen/GRvvpeK?editors=1100
I'm trying to figure out some CSS errors I'm having. At the moment, the problems I'm having are:
- The text that is being typed out isn't centered on top of the search bar
- If the word gets too long, the bar beneath it begins to expand. How can I keep that bar constant size and not expand if the text gets long
- I can't seem to make the blinker a tiny bit wider and stop at the end of the word (it looks like it goes one extra blank character)
Could I get some help on these? I'm sure these are 'small' fixes, just can't figure it out. Thanks!
// values to keep track of the number of letters typed, which quote to use. etc. Don't change these values.
var i = 0,
a = 0,
isBackspacing = false;
// Typerwrite text content. Use a pipe to indicate the start of the second line "|".
var textArray = [
"AskReddit", "AskMen", "Gaming", "FemaleFashionAdvice", "Nosleep", "LetsNotMeet", "Technology", "Funny", "Memes", "Politics", "News"
];
// Speed (in milliseconds) of typing.
var speedForward = 100, //Typing Speed
speedWait = 1000, // Wait between typing and backspacing
speedBackspace = 25; //Backspace Speed
//Run the loop
typeWriter("typewriter", textArray);
function typeWriter(id, ar) {
var element = $("#" id),
aString = ar[a],
eHeader = element.children("h1"); //Header element
// Determine if animation should be typing or backspacing
if (!isBackspacing) {
// If full string hasn't yet been typed out, continue typing
if (i < aString.length) {
eHeader.text(eHeader.text() aString.charAt(i));
i ;
setTimeout(function(){ typeWriter(id, ar); }, speedForward);
}
// If full string has been typed, switch to backspace mode.
else if (i == aString.length) {
isBackspacing = true;
setTimeout(function(){ typeWriter(id, ar); }, speedWait);
}
// If backspacing is enabled
} else {
// If either the header, continue backspacing
if (eHeader.text().length > 0) {
// If paragraph still has text, continue erasing, otherwise switch to the header.
if (eHeader.text().length > 0) {
eHeader.addClass("cursor");
eHeader.text(eHeader.text().substring(0, eHeader.text().length - 1));
}
setTimeout(function(){ typeWriter(id, ar); }, speedBackspace);
// If the head has no text, switch to next quote in array and start typing.
} else {
isBackspacing = false;
i = 0;
a = (a 1) % ar.length; //Moves to next position in array, always looping back to 0
setTimeout(function(){ typeWriter(id, ar); }, 50);
}
}
}.parent {
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
.search-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.typewriter-wrapper {
width: 100%;
text-align: center;
}
.typewriter {
display: inline-block;
overflow: hidden;
border-right: .15em solid orange;
white-space: nowrap;
letter-spacing: .15em;
animation:
typing 2s steps(40, end),
blink-caret .50s step-end infinite;
}
.search-form {
display: flex;
justify-content: center;
width: 100%
}
.search-input {
-webkit-appearance: none;
background-clip: padding-box;
background-color: white;
vertical-align: middle;
border-radius: 0.25rem;
border: 1px solid #e0e0e5;
font-size: 1rem;
line-height: 2;
padding: 0.375rem 1.25rem;
-webkit-transition: border-color 0.2s;
-moz-transition: border-color 0.2s;
transition: border-color 0.2s;
margin-bottom: 0;
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
align-self: center;
height: 51px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.search-button {
height: 51px;
margin: 0;
padding: 1rem 1.3rem;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 0.25rem;
border-bottom-right-radius: 0.25rem;
font-size: 1rem;
display: inline-block;
font-weight: 600;
font-size: 0.8rem;
line-height: 1.15;
letter-spacing: 0.1rem;
background: #F95F5F;
color: #292826;
border: 1px solid transparent;
vertical-align: middle;
text-shadow: none;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.cursor::after {
content:'';
display:inline-block;
margin-left:3px;
background-color:white;
animation-name:blink;
animation-duration:0.5s;
animation-iteration-count: infinite;
}
h1.cursor::after {
height:24px;
width:13px;
}
@keyframes blink-caret {
from, to {
border-color: transparent
}
50% {
border-color: orange;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">
<div class="search-container">
<div class="typewriter-container">
<div class="typewriter" id="typewriter">
<h1 class="cursor"> </h1>
</div>
<form class="search-form" method="GET" action="{% url 'ssearch' %}">
<input class="search-input" type="search" name="subreddit">
<button class="search-button" type="submit"> Search </button>
<!-- <i ></i> -->
</form>
</div>
</div>CodePudding user response：
1 - to center the text you should display .typewriter-container as flex with direction column and align-items as center.
.typewriter-container {
/* this are new CSS selector rules you'll need to add */
display: flex;
flex-direction: column;
align-items: center;
}
2 - the browser has a default width for input fields which is setting the initial width of your form. Give the form a fixed width, eg. 330px.
.search-form {
/* Modify this existing rules to set the form width */
display: flex;
justify-content: center;
width: 330px;
}
3 - the blinking border is being spaced by the ::after pseudo element in your h1. Remove the margin of the ::after and set its width to 0 (or whatever spacing you want).
h1.cursor::after {
/* Modify this existing rules to set the margin and width */
height: 24px;
width: 0;
margin: 0;
}
A forked codepen with the changes can be found here https://codepen.io/jla91ab37103f/pen/GRvvqWe