The Slider Problem

Browsing through the popular items in theme forest, I’ve come to realize that there is a horrible anti-patter out there. I’ve noticed this before, but I didn’t realize the full extent of it until I browsed many different templates. The anti-pattern is image sliders, or slideshows. There is actually nothing wrong with the sliders themselves, the problem comes when they have a dynamic height. What most people do is calculate the height of every slide and re-size the element accordingly. When the element is re-sized, anything that is placed bellow it in the document is pushed down, or pulled up. This is a problem.

Sometimes the slider is not even visible anymore, and you are just reading the content, and all the sudden it moves up or down making it really hard and annoying to read. This is an anti-pattern.

The solution is really simple. Pause the slider when it is obvious the user is not interested in it anymore, like when half of it is not visible anymore. If half of the slider is not visible, then it is safe to assume the user has moved onto something else, and is probably now concentrating on the content bellow the slider.

To solve this problem, I’ve created a jQuery plugin called scrollWatch. It is easy to use. You can call scrollWatch on any element passing a callback to scrollWatch. Every time the window scrolls, the callback is called and an object is passed to it. The object contains some information about the current state of the element, such as the amount of pixels hidden on each direction (top, left, right and bottom), the percentage hidden, the width and height of the element, it’s position on all 4 corners, and other window related information. For now it works only on window scroll, but it could be easily adapted to work for other elements as well.

There are many things that can bone when you have the option to know how much of an element is hidden because of scrolling at all times.

I will release the plugin through git hub at some point this week, stay tuned!