Bootstrap Snippet Hindu Scroll (Letter) Example using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
  <h2>Scroll Example</h2>
  <p>Request you to view in full screen mode</p>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" id="open">Open Scroll</button>
  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header" >
         
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
            <div  class="scrollbar" id="style-4" >
                <div class="side-left">
                </div>
                <div class="scroll-content" >
                    <h2>Hindu Scroll (Letter) Example</h2>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>Some text in the modal.Some text in the modal.Some text in the modal. Some text in the modal.</p>
                    <p>by Anurag Singh</p>
                 <button type="button" class="btn btn-default" id="close">Close</button>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
 *  STYLE 4
 */
#style-4::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb
{
    background-color: #000000;
    border: 2px solid #555555;
}
.modal-content{
    background:transparent;
    box-shadow:none;
    border:none;
}
.modal-header{
    background-image:url(header.png);
    padding: 35px;
    border:none;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    background-position:  center 34px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$( "#open" ).click(function() {
  $('#myModal').modal("show");
  $( "#style-4" ).slideDown( "slow", function() {
    // Animation complete.
    
  });
});
$( "#close" ).click(function() {
  $( "#style-4" ).slideUp( "slow", function() {
    // Animation complete.
    
  $('#myModal').modal("hide");
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Hindu Scroll (Letter) Example"
Bootstrap 3.3.0 Snippet by anuragsingh

Related: See More

Questions / Comments:

"Hindu Scroll (Letter) Example" Bootstrap 3.3.0 Snippet by anuragsingh

Related: See More

Questions / Comments:

"Hindu Scroll (Letter) Example"
Bootstrap 3.3.0 Snippet by anuragsingh