0

I need to make a simple horizontal scroll of buttons but I can't make It work, example:

<-- | button1 | button2 | button3 | button4 | button5 | -->

I'm making an app for mobile using jquery mobile 1.4, the buttons are inserted dynamically with javascript.

Here is an example I'm using:JSFiddle provided by this question stackoverflow.

This is what I have at this moment:

css:

/* Horizontal menu list */
#overflow {

    height: 70px;
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
}

#overflow .container div {
    float: left;
    width: 120px;
    height: 45px;
    float: left;
}

HTML:

<div id="overflow">
            <div id="containerID" class="container">

            </div>
        </div>

Javascript:

  $('#currentorders').live("pageshow", function () {
             var width = 0;
             $('#overflow .container div').each(function () {
                 width += $(this).outerWidth(true);
             });
             $('#overflow .container').css('width', width + "px");
         })

         $("#overflow .container div a").live('touchstart', function () {
             var width = 0;
             $('#overflow .container div').each(function () {
                 width += $(this).outerWidth(true);
             });
             $('#overflow .container').css('width', width + "px");
         })

Javascript to insert the buttons:

var $horizontalList = document.getElementById("containerID");

            for (var i = 0; i < results.index.length; i++) {
                var row = results.index[i];

                console.log("index = " + row);

                var divForButtons = document.createElement("div");

                var buttonAnchor = document.createElement("a");

                divForButtons.setAttribute("class", "categoryContainer");
                divForButtons.setAttribute("id","categoryContainerID");

                buttonAnchor.setAttribute("href", "");
                buttonAnchor.setAttribute("data-id",row);
                buttonAnchor.setAttribute("class","menuItemRest");
                buttonAnchor.setAttribute("id","categoryButton");

                buttonAnchor.textContent = row;

                divForButtons.appendChild(buttonAnchor);

                $horizontalList.appendChild(divForButtons);
            }
Community
  • 1
  • 1
Bruno
  • 1,032
  • 1
  • 16
  • 40

0 Answers0