0

I've got a question that I don't really know how to google, and my CSS is still woefully inadequate, so I'll ask it here.

I am using jquery terminal, and it is a pretty neat little library. However, when I unzipped the file, I could not find any sort of templates that would make up the view. Now, what I am trying to do is place a sort of status indicator in the top right corner of the terminal. So if I had to illustrate, something like this.

_____________________________________________________________
|jquery terminal> echo "hello"                   CONNECTED!|V|
|hello                                                     |V|
|jquery terminal> echo "world"                             |V|
|world                                                     |V|
|jquery terminal> echo "I think"                           |V|
|I think                                                   |V|
|jquery terminal> echo "you get the point"                 |V|
|you get the point                                         |V|

I want a persistent dom element (the "CONNECTED!" text) at the top right hand corner of the terminal at all times, to represent the connection status of my terminal. Even if the terminal progresses past the bottom, I want it to stay at the top right hand corner at all times. As I said, I haven't found any template files, so I am wondering how to do this. Any help or hints would be greatly appreciated.

Zack
  • 13,454
  • 24
  • 75
  • 113

1 Answers1

1

You can add div and set position to fixed.

<div id="term">
    <div id="status">Connected!</div>
</div>

#status {
    position: fixed;
    right: 10px;
    top: 10px;
}

JSFIDDLE

jcubic
  • 61,973
  • 54
  • 229
  • 402
  • This is great, do you know how I would get it to scroll with the console? It is in the top right, but as soon as the output of the terminal goes past the bottom limit, the connection status scrolls upward with the previous output. – Zack Jul 31 '15 at 15:02
  • yea.. unfortunately I've been cycling through fixed, absolute, relative, static... nothing works. I think I need to study up on some CSS, but in the meantime, I got a solution that 90% does what I need, so you get the accept while I refactor my html/css. – Zack Jul 31 '15 at 15:39