• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS blinking cursor css styling

M

Maja0802

Well-Known Coder
Hey there!

Hope you an help me out here (again :))

I want to insert a blinking cursor at the end of my text using javascript. However when the cursor blinks the blue colored area gets bigger than the blue colored area behind the text. Might be easier to see with the screenshoot...How do I prevent that from happening? I want the curser to just be 'within' the blue background color. Hope it makes sense!

[CODE lang="css" title="Blinking cursor problem"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>
<!--font 'Open Sans'-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!--font 'JetBrains Mono''-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>Skærmbillede 2021-01-02 kl. 23.03.40.png

<script>var cursor = true;
var speed = 400;

setInterval(() => {
if(cursor) {
document.getElementById('cursor').style.opacity = 0;
cursor = false;
}else {
document.getElementById('cursor').style.opacity = 1;
cursor = true;
}
}, speed);</script>
<style>

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
text-align: right;
margin-left: 65px;
margin-right: 25px;
font-size: 25px;
}
.textfield span {
background-color: rgb(150, 203, 209);
color: rgb(239, 61, 74):
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
}
#cursor {
font-size: 30px;
color: none !important;
background-color: none !important;
}
</style>
</head>
<body>
<h1 class = "textfield"> <span> #3 TEST TEST<span id="cursor">_</span></span></h1>
</body>
</html>
[/CODE]
 
Sort by date Sort by votes
If you really want the cursor to have a bigger size, is adding the following styles resolving the problem?:

CSS: 
.textfield {
    background-color: rgb(150, 203, 209);
}
.textfiel span{
    margin: auto;
}
 
Upvote 0 Downvote
LTomy said:
Ahah, glad it helped ;)
Click to expand...
:)

Any idea why it is only for the first headline (#1), where the blinking cursor is working? I coppyed the code and changed the text for the other headlines, so should work....

[CODE lang="javascript" title="blinking cursor only works for the first headline"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>
<!--font 'Open Sans'-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!--font 'JetBrains Mono''-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<script>var cursor = true;
var speed = 400;

setInterval(() => {
if(cursor) {
document.getElementById('cursor').style.opacity = 0;
cursor = false;
}else {
document.getElementById('cursor').style.opacity = 1;
cursor = true;
}
}, speed);
</script>

<style>

#cursor {
font-size: 25px;
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
}
.textfield span {
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
}

p {
font-family: "JetBrains Mono";
margin-right: 200px;
margin-left: 200px;
line-height: 1.5;
}
</style>

</head>

<body>

<h1 class = "textfield"> <span> #1 FØRSTE KOLONNE<span id="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #2 ANDEN KOLONNE<span id="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #3 TREDJE KOLONNE<span id="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #4 FJERDE KOLONNE<span id="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #5 FEMTE KOLONNE<span id="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
</body>

</html>
[/CODE]
 
Upvote 0 Downvote
Hi again!
You must give them 'cursor' as a class instead of id (An id must be unique). In the javascript, you then have to retrieve them using 'getelementsbyclass'.
Right now, in the JS, you only use the first element with the id 'cursor'.
 
Upvote 0 Downvote
Ah yes, of course! (Just learning Javascript...). Shouldn't this work. It does not unfortunately...


[CODE title="blinking cursor not working"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>
<!--font 'Open Sans'-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!--font 'JetBrains Mono''-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<script>var cursor = true;
var speed = 400;

setInterval(() => {
if(cursor) {
document.getElementByClass('cursor').style.opacity = 0;
cursor = false;
}else {
document.getElementByClass('cursor').style.opacity = 1;
cursor = true;
}
}, speed);
</script>

<style>

#cursor {
font-size: 25px;
}

.textfield {
color: rgb(239, 61, 74);
line-height: 55px;
margin-left: 200px;
font-size: 25px;
}
.textfield span {
background-color: rgb(38, 102, 145);
color: rgb(253, 103, 73);
display: inline;
font-family: "JetBrains Mono", Sans-serif;
text-align: right;
}

p {
font-family: "JetBrains Mono";
margin-right: 200px;
margin-left: 200px;
line-height: 1.5;
}
</style>

</head>

<body>

<h1 class = "textfield"> <span> #1 FØRSTE KOLONNE<span class="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #2 ANDEN KOLONNE<span class="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #3 TREDJE KOLONNE<span class="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #4 FJERDE KOLONNE<span class="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
<br>

<h1 class = "textfield"> <span> #5 FEMTE KOLONNE<span class="cursor">_</span></span></h1>

<p>Hej. Dette er en test. Vi må lige se, hvordan det ser ud. Så kan man jo tilføje mere tekst, for at se hvordan det ser ud. Jeps, det er det nemlig. Så kan man jo skrive lidt mere her, hvis jeg lige vidste, hvad der skulle stå, men det kommer jeg nok på jajaj, helt sikkert du </p>
</body>

</html>
[/CODE]
 
Upvote 0 Downvote
LTomy said:
The method getelementsbyclass returns an array with all the elements with that class. You must use a loop 'for' to execute the instructions for each of them!
Click to expand...
Okay . I am familiar with for loop, bit with this cursor I am not sure . Do you mind showing me how it works in this case. Thanks a lot!
 
Upvote 0 Downvote
I am not very familiar with JS, but:
JavaScript: 
var speed = 400;
var cursors = document.getElementsByClass('cursor');

setInterval(() => {
    for (let i = 0; i < cursors.length; i++)
    {
        if(cursors[i].style.opacity == 1)
            cursors[i].style.opacity = 0;
        else
            cursors[i].style.opacity = 1;
    }
}, speed);
 
Upvote 0 Downvote
I am confused about if curser = false; and cursor = true; should really be deleted...it is not in your code? Not sure if you are just trying to show me the loop and I then should still keep the cursor = false; and cursor = true; in the if else statement...

[CODE lang="javascript" title="cursor = false; cursor = true; to be deleted?"]<script>var cursor = true;
var speed = 400;

setInterval(() => {
if(cursor) {
document.getElementById('cursor').style.opacity = 0;
cursor = false;
}else {
document.getElementById('cursor').style.opacity = 1;
cursor = true;
}
}, speed);
</script>[/CODE]
 
Upvote 0 Downvote
LTomy said:
Is the cursor not displayed or not blinking? Have you put the script after the HTML?
Click to expand...
The cursor is there, but not blinking. Not sure what you mean about placing the script tag after HTML. After the HTML tag at the bottom you mean?

This is my code so far. I deleted styling to simplify:
[CODE lang="javascript" title="blinking cursor"]<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hey there</title>
<!--font 'Open Sans'-->
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<!--font 'JetBrains Mono''-->
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<script>
var speed = 400;
var cursors = document.getElementsByClass('cursor');

setInterval(() => {
for (let i = 0; i < cursors.length; i++)
{
if(cursors.style.opacity == 1)
cursors.style.opacity = 0;
else
cursors.style.opacity = 1;
}
}, speed);

</script>

<style>


</style>

<h1> <span> #1<span class="cursor">_</span></span></h1><br>

<p>This is a paragraph</p>

<h1> <span> #2<span class= "cursor">_</span></span></h1><br>

<p>This is a paragraph </p>


</head>

<body>


</body>

</html>[/CODE]
 
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

300x250
Top Bottom