CODEWITHSUNDEEP
javascripthtmlcss
ErikSorensen
ErikSorensen

Reputation: 225

Keep emulated javascript terminal window on webpage in fixed location

So, I'm trying to learn some javascript and css. To to this I've forked som code and are trying to paste it together with some of my own idea. You can see my page were i work here: web page for learning I've reached a problem. I'm using a javascript I've forked to emulate a terminal like interface. This is called jsterm. I also have a box a the bottom of the page with some share options and flairs. I would like to make these 'static' so that the jsterm emulated terminal doesn't go underneath the box at the bottom. Where should I attack this? I've tried changing the height: value in css but jsterm still covers the full page.

div.jsterm {
background: black;
font-family: monospace;
font-size: 16px;
color: #E0E0E0;
top:0%;
left:0%;
width: 100%;
height: 100px;
margin-bottom: 20px;
white-space: pre-wrap;
}

.share_box{
display: inline;
position:fixed;
height: 10%;
width:100%;
bottom:0%;
left:0%;
border:3px solid #a1a1a1;
background:#FFF;
padding:15px;
}

And the HTML

<!doctype html>
   <html>
   <head>
     <title>Erik Sorensen</title>
      <link rel="shortcut icon" href="/images/favicon.ico">
      <meta name="description" content="Erik's webpage">
      <link type="text/css" rel="stylesheet" href="/css/style.css">
  </head>
  <body>
    <div class='cmd_box'>
       <script type="text/javascript" src="/commands/com1.js"></script>
         <script type="text/javascript" src="/config/config.js"></script>
    <script type="text/javascript" src="/js/jsterm.js"></script>
    </div>
    <div class="share_box">
    <!-- Twitter -->
    <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="eriksor">Tweet</a>
        <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <!-- Google + -->
    <g:plusone size="tall"></g:plusone>    
        <script type="text/javascript">
        (function() {
            var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
            po.src = 'https://apis.google.com/js/plusone.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
        </script>
    <!--Stackoverflow flair -->
    <a href="http://stackoverflow.com/users/2394561/eriksorensen">
        <img src="http://stackoverflow.com/users/flair/2394561.png" width="208" height="58" alt="profile for ErikSorensen at Stack Overflow, Q&amp;A for professional and enthusiast programmers" title="profile for ErikSorensen at Stack Overflow, Q&amp;A for professional and enthusiast programmers">
    </a>
</div>
</body>
  </html>

Upvotes: 0

Views: 437

Answers (2)

ErikSorensen
ErikSorensen

Reputation: 225

Answer, after @jascha poked me somewhat in the right direction.

changed margin-bottom: 20px; to margin-bottom: 10%; for jsterm

Upvotes: 1

Jascha Ehrenreich
Jascha Ehrenreich

Reputation: 557

the link to github links to eriksire. instead of eriksore. ;)

to get scrollbars and the .jsterm div to adhere to the height you set try:

.jsterm {
    overflow-y: scroll;
}

to get the console to always be above the share_box, making the share box disappear on smaller resolutions:

.jsterm {
    z-index: 2;
    position: relative;
}
.share_box {
    z-index: 1;
}

Upvotes: 0

Related Questions