jquery Mobile: can't set button's left and width?

Question

Web app in progress is here. (corrected URL)

I'm trying to develop a music-reading quiz game for my daughters, using jQuery Mobile.

The part I'm having trouble with is the keyboard. With "ordinary" html buttons, you can set the left/top/width/height css properties using jQuery's .css() method. But with jQuery Mobile, that doesn't seem to work. Anybody know how to move buttons in jQuery Mobile?

Here's an excerpt of the initial HTML for the keyboard buttons:

<div id="kbdC2E" class="keyboard">
    <button class="pianoKey whiteKey" id="wk1" />
        <button class="pianoKey blackKey" id="bk1" />
    <button class="pianoKey whiteKey" id="wk2" />
        <button class="pianoKey blackKey" id="bk2" /> <!-- etc. -->

And here's the javascript code to move them into position:

for (i = 0; i < numWhiteKeys; i++) {
    var keyLeft = whiteKeyWidth * i;
    var $key = $('button#wk' + i, $div).parent();
    $key.addClass('pianoKey whiteKey')
    .css({
        // position: 'absolute', // from pianoKey class
        left: keyLeft,
        top: gap,
        width: whiteKeyWidth,
        height: whiteKeyHeight,
    });

Note that we use the parent of the button#wk1 key, because jQuery Mobile has decorated our <button> HTML as:

<div data-theme="c" class="ui-btn ui-btn-corner-all ui-shadow ui-btn-up-c">
  <span class="ui-btn-inner ui-btn-corner-all">...</span>
  <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>

(You can verify the details by going to the web page and using a DOM/CSS inspector.)

When I run this, the result is that the parent div receives the added classes, by means of which it becomes position=relative; it also receives the top and height properties that I set:

<div data-theme="c" class="ui-btn ui-btn-up-c ui-btn-corner-all ui-shadow pianoKey whiteKey"
     style="top: 72px; height: 90px; ">
  <span class="ui-btn-inner ui-btn-corner-all">...</span>
  <button class="pianoKey whiteKey ui-btn-hidden" id="wk1"></button>
</div>

However it does not receive the "left" and "width" properties that I set. As a result, all the keys end up on the left side of the ancestor div, and they have the wrong width. Can anybody tell me how to effectively set the left and width properties?

Thanks...

P.S. update: For an illustration of what I want the result to look like, see here. This is not the mechanism I want to use, because by adding buttons at run time, it apparently bypasses JQM completely, thus losing the touch-friendly and cross-platform benefits I'm trying to get from JQM. But it shows the layout I want.

Answer 1

Have you tried adding the "px" to the width number? pretty much something like that:

.css({
    // position: 'absolute', // from pianoKey class
    left: keyLeft + 'px',
    top: gap,
    width: whiteKeyWidth +'px',
    height: whiteKeyHeight +'px',
});

I'm assuming that whiteKeyHeight and whiteKeyWidth are well declared and you made sure of that using alert(). Also, on another note (oh what a funny joke here), you should not use position absolute this might cause some problems in different browser/resolution etc. You can use position relative to set the "left" attribute. Also, the float left seems to be the best answer since it all does that for you without the need to add any code but the class using the "float: left;" attribute.