Home

floatingscroll

Live demos for JavaScript plugins & modules by Amphiluke

This live demo webpage is for older versions of the floatingScroll plugin, and so is considered out of date. Please check out the actual live demos and consider updating the plugin if you are still using any older version.

Below, you'll find some demos using floatingscroll, a jQuery plugin which provides some lengthy containers on the page with a separate horizontal scroll bar, which does not vanish from sight when the entire page is scrolled.

Example #1: Labyrinth

Try to draw the thread of Ariadne by exploring a labyrinth

Show source 
$(document).ready(function () {
    $(".maze").attachScroll();
});

Clear

Labyrinth

Example #2: Table with dynamic columns

Show/hide table columns by checking/unchecking the checkboxes below

Show source 
$(document).ready(function () {
    $(".whatwg").attachScroll();
    $("body").on("click", "input[type='checkbox']", function () {
        // ...skip irrelevant code toggling column visibility...
        $(".whatwg").trigger("adjustScroll");
    });
});
Hidden Text, Search URL, Telephone E-mail Password Date and Time, Date, Month, Week, Time Local Date and Time Number Range Color Checkbox, Radio Button File Upload Submit Button Image Button Reset Button, Button
Content attributes
accept – – – – – – – – – – – Yes – – –
alt – – – – – – – – – – – – – Yes –
autocomplete – Yes Yes Yes Yes Yes Yes Yes Yes Yes – – – – –
checked – – – – – – – – – – Yes – – – –
dirname – Yes – – – – – – – – – – – – –
formaction – – – – – – – – – – – – Yes Yes –
formenctype – – – – – – – – – – – – Yes Yes –
formmethod – – – – – – – – – – – – Yes Yes –
formnovalidate – – – – – – – – – – – – Yes Yes –
formtarget – – – – – – – – – – – – Yes Yes –
height – – – – – – – – – – – – – Yes –
list – Yes Yes Yes – Yes Yes Yes Yes Yes – – – – –
max – – – – – Yes Yes Yes Yes – – – – – –
maxlength – Yes Yes Yes Yes – – – – – – – – – –
min – – – – – Yes Yes Yes Yes – – – – – –
multiple – – – Yes – – – – – – – Yes – – –
pattern – Yes Yes Yes Yes – – – – – – – – – –
placeholder – Yes Yes Yes Yes – – Yes – – – – – – –
readonly – Yes Yes Yes Yes Yes Yes Yes – – – – – – –
required – Yes Yes Yes Yes Yes Yes Yes – – Yes Yes – – –
size – Yes Yes Yes Yes – – – – – – – – – –
src – – – – – – – – – – – – – Yes –
step – – – – – Yes Yes Yes Yes – – – – – –
width – – – – – – – – – – – – – Yes –
IDL attributes and methods
checked – – – – – – – – – – Yes – – – –
files – – – – – – – – – – – Yes – – –
value default value value value value value value value value value default/on filename default default default
valueAsDate – – – – – Yes – – – – – – – – –
valueAsNumber – – – – – Yes Yes Yes Yes – – – – – –
list – Yes Yes Yes – Yes Yes Yes Yes Yes – – – – –
selectedOption – Yes Yes Yes† – Yes Yes Yes Yes Yes – – – – –
select() – Yes Yes – Yes – – – – – – – – – –
selectionStart – Yes Yes – Yes – – – – – – – – – –
selectionEnd – Yes Yes – Yes – – – – – – – – – –
selectionDirection – Yes Yes – Yes – – – – – – – – – –
setSelectionRange() – Yes Yes – Yes – – – – – – – – – –
stepDown() – – – – – Yes Yes Yes Yes – – – – – –
stepUp() – – – – – Yes Yes Yes Yes – – – – – –
Events
input event – Yes Yes Yes Yes Yes Yes Yes Yes Yes – – – – –
change event – Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes – – –

The table above is copied from http://www.whatwg.org/

Example #3: Just another example (simple game)

Game controls:
W, X, A, D — move through the playing field;
Ins/Del — build/raze a fortress

Links