" Also, Michael, your quote from the jQuery API is only about the getter usage
of attr(); if handed only one parameter, attr() returns the value of the
attribute for the first item in the selection e.g. $('input').attr('data-mini')
=> 'true'. But in the setter version, attr( attribute, value ) sets attribute
to value on *all *selected elements. Look at the first setter example on the
API page where they set the title, src, and alt of three img tags at once by
passing a map to attr()."
Woops, you're totally right. As Boromir would say, "one simply doesn't just
skim the doc." As I said, and like Eric reiterated, I would probably just
copy-over the css. Doing this with SASS you could input { @extend .ui-mini; }*.
If it would otherwise muddle your layout, nest it in a media-query to apply
only to small screens. This way you're not having to modify the DOM, and in the
event javascript on the phone is disabled / the mobile browser stops loading
your .js (e.g., certain blackberries drop sites heavier than 4mb) / your .js
fails to load, your site is still looking spruce.
Michael
* Just weaseling-in my SASS evangelism.
-----Original Message-----
From: Code for Libraries [mailto:CODE4LIB@LISTSERV.ND.EDU] On Behalf Of Eric
Phetteplace
Sent: Friday, November 30, 2012 1:46 PM
To: CODE4LIB@LISTSERV.ND.EDU
Subject: Re: [CODE4LIB] jQuery Set data-mini Attribute For All Form Inputs
I think Gavin got this sorted out but I just wanted to clarify: the end goal is
to add a "ui-mini" class to inputs here, not data-mini=true. The data attribute
by itself does nothing. The jQuery Mobile framework uses data attributes to
apply classes, among other things, so you can skip the intermediary step and go
straight to the class. You don't need to edit the CSS with a rule like
input[data-mini=true]; just use the class that's already there.
My advice to get rid of the $(document).ready() wrapper was poor because it
means your code probably executes *before the input elements are even in the
DOM *particularly if your script is in the head. If you for some reason have to
use data-mini=true, you need to run your code *after* jQuery and the DOM has
loaded but *before* jQuery Mobile uses all those data attributes to apply
classes. Does that make sense? I'd just avoid this execution order headache and
apply the class.
Also, Michael, your quote from the jQuery API is only about the getter usage of
attr(); if handed only one parameter, attr() returns the value of the attribute
for the first item in the selection e.g.
$('input').attr('data-mini') => 'true'. But in the setter version, attr(
attribute, value ) sets attribute to value on *all *selected elements. Look at
the first setter example on the API page where they set the title, src, and alt
of three img tags at once by passing a map to attr().
Best,
Eric
On Fri, Nov 30, 2012 at 1:20 PM, Michael Schofield <mschofi...@nova.edu>wrote:
> 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:CODE4LIB@LISTSERV.ND.EDU] On Behalf
> Of Gavin Spomer
> Sent: Friday, November 30, 2012 12:34 PM
> To: CODE4LIB@LISTSERV.ND.EDU
> 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 <phett...@gmail.com> 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
> <mark.perno...@gmail.com>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 <spom...@cwu.edu> 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
> >
>
