Add a scroll line bar indicator on the your page

.scrolline()


Description: Adding a scroll line bar indicator on your page hasn't gotten any easier!


Example:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>scrolline demo</title>
      <script src="http://code.bitsycode.com/bitsycode-latest.min.js"></script>
    </head>
    <body>
        
        <script>
            
            bitsyCode.ready(function(){
                bitsyCode.scrolline(); //INITIALIZE SCROLLINE
            })
            
        </script>
     
    </body>
    </html>

Preview:

To view the scrolline look at the top of the browser as you scroll.
The scrolline can be set at the top, left or bottom of the browser.
  • Dependencies

    • This plugin has 2 dependencies:

      1. You required to include jQuery for this method to function properly.

      <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
      2. You required to include the BitsyCode.min.css file to your project.
      <link rel="stylesheet" href="BitsyCode.min.css" />


  • Usage

    • How to use:

      Add a scrolline that has options for full customization to fit your design and color scheme.

    • USAGE:

      bitsyCode.scrolline();
  • Options

    • What options are there:
      bgcolor: '#d9d9d9' (default value) // Specify a background color for the scrolline eg. Hex: #FF0000 or Color: Red
      forecolor: 'green' (default value) // Specify a foreground color for the scrolline progress.
      position: 'top' (default value) // Specify the position of the scrolline Either.  top, left or bottom.
      thickness: 10 (default value) // Specify the thickness of the scrolline.
      allowPadding: true (default value) 
      // Allow padding of the content when the scrolline is added on the page to avoiding overlapping of content.
  • Returns

    • Returns: No return type

      This method does not need to return any type.

Share