Add smart lists to your dizmos

The dizmoElements library includes a new element. You can now use the List element to easily add ordered or unordered lists with scrollbars to your dizmos.

Here is an example of a static list. Define the list and it’s content in index.html:

<div id="my-list" class="list no-dizmo-drag" data-type="dizmo-list">
        <li>Take out trash</li>
        <li>Wash dishes</li>
        <li>Walk the dog</li>
        <li>Do homework</li>
        <li>Clean room</li>
        <li>Water plants</li>

and add the following to your stylesheet

 .list {
    border-top: 1px solid rgba(61, 61, 61, 0.5);
    border-bottom: 1px solid rgba(61, 61, 61, 0.5);
    height: 100px;
    left: 10px;
    width: 200px;
    overflow: hidden;
    position: absolute;
  .list ul {
    list-style-type: none;
    margin: 0px 10px 0px 0px;
    padding: 4px;
    position: relative;

Your list will look like the following:

List with scrollbar - using dizmoElements library

Now, for the same list as a dynamic version, you only have to add the list element itself to index.html

<div id="my-list" class="list no-dizmo-drag" data-type="dizmo-list"></div>

The content of the list is now added (and can be updated later) with the following code in application.js

var list=[];
list.push("Take out trash");
list.push("Wash dishes");
list.push("Walk the dog");
list.push("Do homework");
list.push("Clean room");
list.push("Water plants");

var el = jQuery('<ul />');
var list_el;

for (var i = 0; i < list.length; i++) {
    list_el=jQuery('<li />');
    jQuery('<div />', {
        'text': list[i]

// destroy scrollbar
if (this.iscroll !== undefined) {

// empty and re-fill list

// create scrollbar
if (this.iscroll !== undefined) {
} else {
    this.iscroll = DizmoElements('#my-list');

// update list

Check out our other projects on

Leave a Reply

Your email address will not be published. Required fields are marked *