Print

---

jQuery matches only the first element when *getting* an attribute, but not when *setting*; that would take away a lot of the power of jQuery with its selectors.  

Awesome info on the Detector; I'm using a php mobile detector: http://code.google.com/p/php-mobile-detect/  

Yeah, duh, I guess I could just edit the mobile.css stylesheet, huh? Sometimes the obvious eludes me. LOL!  

- Gavin

>>> Michael Schofield <[log in to unmask]> 11/30/2012 10:20 AM >>>
Gavin,

I'm sort of playing catch-up on the long thread so I might be missing part
of the conversation, but are you trying to add data-mini=true to multiple
inputs? If so, courtesy again of the API documentation:

"The .attr() method gets the attribute value for only the first element in
the matched set. To get the value for each element individually, use a
looping construct such as jQuery's .each() or .map() method."

Option B: If you're doing this in Omeka, you could always plug the attribute
into your inputs with php by using Dave Molsen's "Detector"
(http://detector.dmolsen.com/) or some other UA-sniffing PHP Library to
conditionally throw "data-mini=true" at a certain screen size.

IMHO, with all that said, if you want all your inputs to inherit the styles
of data-mini=true, I would just edit the CSS so that those styles apply by
default. You don't have to have JS apply the class or the attribute, you
could just nest those styles in a media query for screen sizes less than
481px (or your preferred breakpoint).

Michael Schofield(@nova.edu) | @gollydamn | www.ns4lib.com 

-----Original Message-----
From: Code for Libraries [mailto:[log in to unmask]] On Behalf Of
Gavin Spomer
Sent: Friday, November 30, 2012 12:34 PM
To: [log in to unmask]
Subject: Re: [CODE4LIB] jQuery Set data-mini Attribute For All Form Inputs

Thanks, Eric.

Using "Inspect Element" in Safari I see that the data-mini is indeed getting
set to true.

I'm probably not understanding this, even after reading
http://jquerymobile.com/demos/1.2.0/docs/api/globalconfig.html , but
wrapping in a $(document).bind("mobileinit", function(){ instead of a
$(document).ready() call, nothing gets applied. What is the order of things?
By your suggestion, I tried $('input').addClass('ui-mini'); and that works,
but I want to understand why $('input').attr('data-mini', 'true'); doesn't
work.

I have some code at a public server now: (must view with browser with a
"mobile" user agent set)

   http://digital.lib.cwu.edu/omeka/contact 

   http://digital.lib.cwu.edu/omeka/themes/brooks/javascripts/mobile.js 

Thanks again.

- Gavin

>>> Eric Phetteplace <[log in to unmask]> 11/29/2012 4:33 PM >>>
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
>