Gadgetz

Some predefined widgets for web.

Horizontal scrollable

For customization purposes, contents inside do not have any pre-defined styles.

For devices with a mouse: Shift + wheel to scroll horizontally

Category1 Category2 Category3 Category4 Category5 Category6 Category7 Category8 Category9 Category10 
<div class="hScroll">
    <!-- Any items: -->
    <a href="#">Category1 </a>
    <a href="#">Category2 </a>
    <a href="#">Category3 </a>
    <!-- ... More items ...-->
</div>

With faded sides

Category1 Category2 Category3 Category4 Category5 Category6 Category7 Category8 Category9 Category10 
<div class="hScrollFaded">
    <!-- Any items: -->
    <a href="#">Category1 </a>
    <a href="#">Category2 </a>
    <a href="#">Category3 </a>
    <!-- ... More items ...-->
</div>

Accordion

Parameters

, when not specified, aligned at left.

Markers styles




Click me
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem commodi impedit fugiat nesciunt quo harum, quaerat porro dolorum placeat eius ullam animi dolores sapiente fugit cumque. Porro unde eos quae, culpa doloremque recusandae commodi dicta ut aperiam, excepturi pariatur voluptas, in reiciendis delectus nihil quibusdam fuga voluptates! Quidem error quis, reiciendis ratione culpa expedita accusantium perspiciatis maiores sunt quasi porro possimus eveniet obcaecati est esse consectetur cum iusto nobis tenetur nostrum tempore. Voluptatum quos dolor sapiente quam nihil eos incidunt culpa cum dicta, reiciendis officiis in obcaecati. Porro nulla dolorem repellat repellendus optio ratione harum iure, distinctio libero. Minima, ducimus! 
<details class="
">
    <summary class="
 
narrow
">
    Click me
    </summary>
    <div>
    <!-- contents-->
    </div>
</details>

Notes

Notes can be used to notify the user about something special. Use the universal color code for theme of the notes. in this syntax: 

<div class="note-${code}">
</div>

Predefined parameters

Use !important or inline style to override.

This is a tip.

Use color code g for green.

This is a warning.

Use color code y for yellow.

This is an error.

Use color code r for red.

This is an info.

Use color code b for blue.

More themes

We dont know what do these color represent, but they are available for use.

This is an note of some kind.

Use color code e for grey.

This is an note of some kind.

Use color code k for black.

This is an note of some kind.

Use color code o for orange.

This is an note of some kind.

Use color code p for pink.

This is an note of some kind.

Use color code u for purple.

Accessibility (A11y)

Integrated navigation bar

A small widget to help users better use the website, including 'back', 'to top', 'to bottom', 'home', 'refresh', and more..

Square type 

<script src="https://xolyn.github.io/widgets/a11y-s.js"></script>

Round type 

<script src="https://xolyn.github.io/widgets/a11y-r.js"></script>

Material design 

<script src="https://xolyn.github.io/widgets/a11y-m.js"></script>

Content menu

meZu 

<script src="https://xolyn.github.io/widgets/mezu.js"></script>

Simply adding the js code above in your website. You can create a context menu that list all h elements with hierarchical structure at the right bottom of your webpage! Easy as pie!

This context menu works robustly! No matter when you start with non-h1 elements, or already predefined class name for any h elemets.

meZu2 

<script src="https://xolyn.github.io/widgets/mezu2.js"></script>

Simply adding the js code above in your website to use the new meZu2! Just like the one shown on the top of the this page!

Inheriting the features and robustness of meZu, the context menu now can indicate the section you are in by highlighting! ..and with more aesthetically pleasing animations!

Predefined parameters

Too many CSS rules defined in mezu.js and mezu2.js, check js source code above and use !important for custom styling purpose!