Print

Print


Eric is right, the data-mini attribute is getting set.  Looks like you 
also need to add the ui-mini class too...

$('input').addClass('ui-mini');

You can see it in action here, compared with a normal sized text input 
(have to use id selectors to just change one input for the demo):
http://jsbin.com/iyeyux/1/edit

By the way, jsbin.com is really great for sharing and debugging front 
end code.  It looks similar to codepen, but you don't have to sign up or 
anything.  Just start hacking... nice editor for JS work in general too.

-Shaun

On 11/29/12 7:33 PM, Eric Phetteplace wrote:
> Is the data-mini attribute really not getting set? Or is it being set but
> the jQuery Mobile framework isn't applying its mini style? Inspect the
> input elements with your dev tools to see if data-mini is set.
>
> Without seeing your code, my guess is that it runs after the mobile-init
> event where jQuery Mobile does all its magic, including taking all those
> data attributes and using them to apply classes and inject markup. You
> could either make sure your code fires before mobile-init (e.g. not
> wrapping it in a $(document).ready() call would likely do the trick) or
> directly applying the appropriate class, which is "ui-mini" I think.
>
> Best,
> Eric Phetteplace
> Emerging Technology Librarian
> Chesapeake College
>
>
> On Thu, Nov 29, 2012 at 6:58 PM, Mark Pernotto <[log in to unmask]>wrote:
>
>> This looks more syntactical than anything else.
>>
>> Try:
>>
>> $('input').textinput({mini:true});
>>
>> This hasn't been tested.
>>
>> Thanks,
>> Mark
>>
>>
>> On Thu, Nov 29, 2012 at 3:40 PM, Gavin Spomer <[log in to unmask]> wrote:
>>> Hello,
>>>
>>> I'm almost done developing my custom theme for when I migrate our
>> Greenstone digital collections over to Omeka. I've built in a mobile
>> interface for when a mobile device is detected and have been having a lot
>> of fun implementing that with jQuery Mobile.
>>>
>>> I prefer to make most stuff "mini" ala the jQuery Mobile data-mini
>> attribute. Works fine when I'm editing the actual html source, but the
>> following won't work for some reason:
>>>
>>>     $(document).ready(function() {
>>>        $('input').attr('data-mini', 'true');
>>>     });
>>>
>>> I can set other attributes successfully like: (just as a test)
>>>
>>>     $(document).ready(function() {
>>>        $('input').attr('data-mini', 'true');
>>>        $('input').attr('style', 'background:yellow');
>>>     });
>>>
>>> But for some reason it won't do the data-mini attribute... why?
>>> Gavin Spomer
>>> Systems Programmer
>>> Brooks Library
>>> Central Washington University
>>

-- 
Shaun D. Ellis
Digital Library Interface Developer
Firestone Library, Princeton University
voice: 609.258.1698 | [log in to unmask]