CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
LarsH
LarsH

Reputation: 27996

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

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.

Upvotes: 2

Views: 7279

Answers (3)

Bene
Bene

Reputation: 1905

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.

Upvotes: 4

Phill Pafford
Phill Pafford

Reputation: 85298

Well it's not functioning but is this what you wanted the key layout to do: http://jsfiddle.net/rg4wj/13/

Upvotes: 2

naugtur
naugtur

Reputation: 16915

This is not a direct answer to the question, as I belive that your values are just being rewritten due to the order in which scripts are being run, but

I suggest using div elements instead of buttons. Adding some classes to those divs will make them look as jquerymobile-ish as you want, and they don't need to be buttons at all... unless you want the application to be working without javascript too (I can't verify that at the moment)

[edit]

The second thing turned out a bit ambiguous... I'll elaborate.

I expect JQM to block or overwrite what you set. This can be avoided by reducing the ammount of JQM code that processes the buttons.

Inspect the buttins and copy most of their classes (this will give you the looks) and give those classes to some divs instead of button elements. Add your styles. Bind tap or click (I didn't see any bindings in your code at the moment) to get them to work - the same way you would have to do with buttons.

This is not a less-jqm-alike way to do that, you want to use relative positions and overlay buttons over other buttons - this is rather unusual, and so it needs unusual handling.

Another idea:

Have you seen this: http://jquerymobile.com/demos/1.0a3/#docs/buttons/buttons-grouped.html or this: http://jquerymobile.com/demos/1.0a3/#docs/toolbars/docs-navbar.html ?

Maybe you don't have to position the buttons with position:relative at all (it's always a bit messy) just stick them together in two rows or stick pairs together as a column and set float:left on their wrappers. See what suits you

Upvotes: 3

Related Questions