• 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
LTomy said:
Put the script after the <body> tag. I think the JS is executed before the HTML is loaded so getElementsByClass returns an empty array.
Click to expand...
Like this? Not working :thinking::blush::cry:


[CODE lang="javascript" title="javascript"]<!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>


<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>

<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>

</html>[/CODE]
 
Upvote 0 Downvote
LTomy said:
Is there a JS error in the console? What is the number in the pop-up if you write alert(cursors.length); after the getElementsByClass('cursor')?
Click to expand...
not sure I did the alert right...you have lost me on this one :laugh::laugh: Glad you want to help me though
 

Attachments

  • Skærmbillede 2021-01-03 kl. 22.42.12.png
    Skærmbillede 2021-01-03 kl. 22.42.12.png
    147.5 KB · Views: 2
Upvote 0 Downvote

New Threads

Latest posts

Share this page

Buy us a coffee!

300x250
Top Bottom