I have been using Jquery terminal for a while, and I have been trying to make it have features a normal terminal does.
I have been looking at few terminals like Command Prompt and ones like XTerm, and noticed, when you highlight anything by holding down your mouse button and moving your mouse to highlight, you can highlight anywhere on the terminal even if there isn’t text. Its like the terminal has multiple lines on it, that will hold text if there is any, but if there isn’t, they will be present there.
I want to make my jQuery terminal have this same feature but I’m not sure how to achieve this. I’m not exactly sure if this would work, but I could put a transparent div over the whole site holding the terminal, but I’m not sure how I would make the div contain multiple “fake lines” so when the user highlights in the terminal, it will have the functionality I wanted, but I’m not sure how I would accomplish that, or if that is the only way to do it. Even though I am learning, my knowledge on JS/HTML/CSS is a little small, so if somebody could help me out here, it would be great.
In case I didn’t explain it well, I attached a gif showing what I mean about the highlighting. I also attached jquery terminal here as well so you can see the difference between the two.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.terminal/js/jquery.terminal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery.terminal/css/jquery.terminal.min.css"/>
</head>
<body>
<script>
$('body').terminal({
hello: function(what) {
this.echo('Hello, ' + what +
'. Wellcome to this terminal.');
}
}, {
greetings: 'My First Web Terminal'
});
</script>
</body>
</html>