FOLLOW US
4dots Software CODE BLOG

Nice Jquery Scrollbar Plugin

We needed a nice scrollbar plugin for our website.

And we found this one. It is called Perfect Scrollbar and seems really good.

It is a minimalistic but perfect custom scrollbar plugin.

Optimization

We liked it but the scrollbar is invisible and only if you move with your mouse above it, it appears.
We wanted that the reader would understand at a first glance that there is something to scroll and that the scrollbar is always visible.

So we just edited the "perfect-scrollbar.css" file and changed

  .ps-container > .ps-scrollbar-y-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    opacity: 0;
to ..

.ps-container > .ps-scrollbar-y-rail {
    display: block;
    position: absolute;
    /* please don't change 'position' */
    opacity: 0.6;
We changed the opacity to 0.6 from 0 so that it is not invisible and also changed the display property from none to block also for the same reason.
You can do that also for the horizontal scrollbar.
Just change

  .ps-container > .ps-scrollbar-x-rail {
    display: none;
    position: absolute;
    /* please don't change 'position' */
    opacity: 0;
to ..

.ps-container > .ps-scrollbar-x-rail {
    display: block;
    position: absolute;
    /* please don't change 'position' */
    opacity: 0.6;
Also we tweaked the CSS code so that we limit the width and height of the scroll area by setting the max-width and max-height CSS properties.

#whatsnewcontainer
{
	position:relative;
	margin:0px auto;
	padding:0px;
	max-width: 700px;
	max-height: 400px;
	overflow: auto;
}

Demo

You can view a live demo of the scrollbar at the What's new section of our website found here http://www.4dots-software.com or just have a look at the following example :

using System;
using System.Collections.Generic;
using System.Text;
using System.Windows.Forms;
using System.ComponentModel;

namespace SimpleVideoCutterJoinerSplitter
{
    public class FourDotsTextBoxAutoSelect : System.Windows.Forms.TextBox 
    {
        public FourDotsTextBoxAutoSelect()
            : base()
        {
            
        }

        public bool SelectAllOnEnter = true;              

        public bool MoveToNextTextBox = true;
        
        protected override void OnEnter(EventArgs e)
        {
            base.OnEnter(e);

            if (SelectAllOnEnter)
            {
                this.SelectAll();
            }
        }

        protected override void OnClick(EventArgs e)
        {
            base.OnClick(e);

            if (SelectAllOnEnter)
            {
                this.SelectAll();
            }
        }

        protected override void OnTextChanged(EventArgs e)
        {
            base.OnTextChanged(e);

            if (MoveToNextTextBox)
            {
                if (this.SelectionStart == this.MaxLength)
                {
                    int nextminleft = -1;
                    Control next_txt = null;

                    foreach (Control co in this.Parent.Controls)
                    {
                        if (co is TextBox)
                        {
                            if (co.Left > this.Left && (co.Left < nextminleft || (nextminleft == -1)))
                            {
                                next_txt = co;
                                nextminleft = co.Left;
                            }
                        }
                    }

                    if (next_txt != null)
                    {
                        next_txt.Focus();

                        if (SelectAllOnEnter)
                        {
                            ((TextBox)next_txt).SelectAll();
                        }
                    }
                }
            }
        }

        protected override void OnKeyPress(KeyPressEventArgs e)
        {
            if (!char.IsControl(e.KeyChar) && !char.IsDigit(e.KeyChar))
            {
                e.Handled = true;
            }            

            base.OnKeyPress(e);
        }
        
    }
}
   

 

Please Donate!

Please Share!