Tiny Scrollbar Java Integration -Tutorial Savvy

Jquery Tiny scroll bar plugin can be used to style the scroll bar of a web page.
This plugin can be downloaded from:-

This plugin provides feature for Dynamic data handling. It provides update method for updating the height for scroll bar.
In this Demo, “The Servlet send different size data for each button click and the Tiny scroll bar updated its height”.
The Project Structure:-

The Servlet DynamicDataServlet.java,

package com.sandeep.data.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


public class DynamicDataServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
       
    
    public DynamicDataServlet() {
        super();
    }

 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  
  String snum =request.getParameter("number");
  
  int number = Integer.parseInt(snum);
  
  response.setContentType("text/html");
  
     PrintWriter out = response.getWriter();

     StringBuilder resText = new StringBuilder();
     
     for(int count = 0;count <= number; count++){
      
      resText.append("lorem ipsum dollar lorem ipsum dollar " +
        " lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar" +
        " lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar" +
        " lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar");
      
     }
     
     out.write(resText.toString());
 }

 
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 }

}

The HTML markup tiny-carousel-demo.html,

<!DOCTYPE html>
<html>
    
    <head>
        <title>Tiny Scrollbar Demo</title>
        <link rel="stylesheet" type="text/css" href="./css/scrollbar-style.css">
    </head>
    
    <body>
        <div id="content-holder">
            <div class="scrollbar">
                <div class="track">
                    <div class="thumb">
                        <div class="end"></div>
                    </div>
                </div>
            </div>
            <div class="viewport">
                <div class="overview">lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem
                    ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum
                    dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar
                    lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem
                    ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar lorem ipsum dollar</div>
            </div>
        </div>
        <input type="Button" value="One" num="1">
        <input type="Button" value="Ten" num="10">
        <input type="Button" value="Twenty" num="20">
        <input type="Button" value="Thirty" num="30">
        <input type="Button" value="Fourty" num="40">
        <input type="Button" value="Fifty" num="50">
        <input type="Button" value="Sixty" num="60">
        <script src="./js/jquery-1.9.0.min.js"></script>
        <script src="./js/jquery.tinyscrollbar.js"></script>
        <script>
            $(document).ready(function () {

                var ajaxToPost, targetValue,

                    container = $("#content-holder"),

                    containerdata = $("#content-holder .overview"),

                    urlofmyBlog = "DynamicDataServlet?number=",

                    count = 1,

                    successHandler = function (data) {

                        if (count % 2 === 0) {

                            resdata = "<p style='color:green;'>" + data + "</p>";

                        } else {

                            resdata = "<p style='color:blue;'>" + data + "</p>";
                        }

                        count++;

                        $(containerdata).html(resdata);

                        container.tinyscrollbar_update();

                    },
                    errorHandler = function () {

                        alert("Error in Ajax Call");
                    },

                    handleButtonClick = function (e) {

                        targetValue = $(e.currentTarget).attr('num');

                        ajaxToPost = $.ajax({
                            url: urlofmyBlog + targetValue,
                            dataType: "html",
                            type: 'get'
                        });

                        ajaxToPost.done(successHandler),

                        ajaxToPost.fail(errorHandler);

                    };

                container.tinyscrollbar();

                $('input[type=button]').on('click', handleButtonClick)

            });
        </script>
    </body>

</html>