2

I'm a newbie in html and trying to make a scroll bar at left side of div. I tried to google it but couldn't find any answers that I want.

here is my image of html. enter image description here

And here is my code of html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Highlight dropzones with interact.js</title>
    <script src="js/interact.js"></script>
    <script src="js/dropzones.js"></script>
    <link rel="stylesheet" href="stylesheets/dropzones.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/styles.css">
  </head>
  <body>

    <object width="100%" height="100%" type="text/plain" data="/public/sensor/some.txt" border="0" >
    <header>
      <nav class="navbar navbar-inverse">
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a onclick="show()" id="imageLoad" target="dropzone_1">Image Load</a></li>
              <li><a href="#" id="imageSave">Image Save</a></li>
            </ul>
          </div>
        </nav>
      </header>

      <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
      <div name="scroll_div" id="scrolldiv1"></div>
      <div class="dropzone-wrapper" name="dropzone_1" id="dropzone">
      </div>

      <script type="text/javascript">
        function show(){
          document.getElementById('dropzone').style.maxHeight = "100%";
          document.getElementById('dropzone').innerHTML = "<img src= 'images/example3.jpg' class='resize_fit_center'/>"
        }
      </script>

      <script>
        function autoResizeDiv(){
          document.getElementById('dropzone').style.height = window.innerHeight + 'px';
        }
        window.onresize = autoResizeDiv;
        autoResizeDiv();

        function WebSocket(){
          if ("WebSocket" in window){
            var channel = "<%= user%>";
            var socket = io.connect("websocket address");

            socket.on(channel, function (d) {
              var data = JSON.parse(d);
              console.log(channel + " : " + d);
              var theDiv = document.getElementById(data.node_info[1].info.mac);
              if(theDiv == null) {
                var divTag = document.createElement("div");
                divTag.id = data.node_info[1].info.mac;
                divTag.className = "draggable js-drag";
                divTag.innerHTML = data.node_info[1].info.mac;
                document.getElementsByName('scroll_div')[0].appendChild(divTag);

              }
            });
            socket.on('crc_err', function(packet){
              console.log("crc_err : " + packet);
            });
            socket.on('type_err', function(packet){
              console.log("type_err : " + packet);
            });
          }
          else{
                        // The browser doesn't support WebSocket
                        // alert("WebSocket NOT supported by your Browser!");
              }
      }
        WebSocket();
      </script>

    </body>
</html>

I'm getting mac address information from websocket and trying to display at the left of div. and want to make a scrollbar as picture above. I tried with using document.getElementsByName('scroll_div')[0].appendChild(divTag) but doesn't create a scrollbar on left-side of page.

Can anybody help me out here...?

Thank you.

p.s. If you guys want me to post css code, then I'll edit right away.

paulc1111
  • 631
  • 3
  • 14
  • 32
  • yes, css in the most important part. Do post it. Have a look at answers below. I have an answer as well with code snippet below. See if any help you out. – Iceman Mar 16 '17 at 05:35

5 Answers5

3

You can use overflow:scroll in you css for your scroll_div div. The overflow property specifies what happens if content overflows an element's box.

This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Note: The overflow property only works for block elements with a specified height.

div.scroll
{
width:50%;
height:100px;
overflow:scroll;
float: left;
}
<div class="scroll">The overflow property specifies what happens if content overflows an element's box.
<br/>
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
<br/>
Note: The overflow property only works for block elements with a specified height. </div>
BioGenX
  • 402
  • 3
  • 11
  • it is simple question. after making scrollbar, the light-blue circle can't drag and drop to right side of div.. I used z-index but it doesn't work.. Do you know why..? – paulc1111 Mar 16 '17 at 06:07
  • I would need to see the code. You can have a look here: http://stackoverflow.com/questions/13526712/make-div-draggable-using-css . If you can not manage, please post a new question with the full code(html,css,js) preferably in a fiddle. – BioGenX Mar 16 '17 at 06:12
  • Also, try and add this bit to your html: – BioGenX Mar 16 '17 at 06:14
2

overflow-x: scroll; in css will solve your problem.

To keep the divs in place, I have used float: left; for the left-pane div.

Have a look at this simplified example: 

.left-container {
  width: 30%;
  height: 200px;
  overflow-x: scroll;
  float: left;
}
<div>
  <div class="left-container">
    Scrollable Left pane
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
    </ul>
  </div>
  <div>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
    survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
    software like Aldus PageMaker including versions of Lorem Ipsum.


  </div>
</div>
Iceman
  • 6,035
  • 2
  • 23
  • 34
0

Add direction: rtl; overflow:scroll; in div where you want the scrollbar on left.

.left{
  background:grey;
  height:100vh;
  width:200px;
  display:inline-block;
  vertical-align:top;
}
.right{
  width:200px;
  height:100vh;
  display:inline-block;
  direction: rtl;
  vertical-align:top;
  overflow: scroll;
}
<div class="left"> </div>
<div class="right">
<p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
</div>
AG_
  • 2,589
  • 3
  • 20
  • 32
0

Give a specific height to id scrolldiv1. It will be better if you place both the div inside a Bootstrap row class and place in inside column. Then give Height to the div. Whenever the data exceeds the height, it will add a scroll-bar automatically.

will work for every Browser.

Deepak swain
  • 3,380
  • 1
  • 30
  • 26
0

add 'Overflow :auto' to left-container it will work

.left-container {
 width: 30%;
 height: 200px;
 overflow: auto;
 float: left;
  }
shyamu
  • 86
  • 7