LISTSERV mailing list manager LISTSERV 16.5

Help for CODE4LIB Archives


CODE4LIB Archives

CODE4LIB Archives


CODE4LIB@LISTS.CLIR.ORG


View:

Message:

[

First

|

Previous

|

Next

|

Last

]

By Topic:

[

First

|

Previous

|

Next

|

Last

]

By Author:

[

First

|

Previous

|

Next

|

Last

]

Font:

Monospaced Font

LISTSERV Archives

LISTSERV Archives

CODE4LIB Home

CODE4LIB Home

CODE4LIB  November 2012

CODE4LIB November 2012

Subject:

Re: jQuery Set data-mini Attribute For All Form Inputs

From:

Gavin Spomer <[log in to unmask]>

Reply-To:

Code for Libraries <[log in to unmask]>

Date:

Fri, 30 Nov 2012 11:13:19 -0800

Content-Type:

text/plain

Parts/Attachments:

Parts/Attachments

text/plain (161 lines)

Thanks for taking the time to summarize; excellent.

Sorry I repeated what you said about the attr() function; I can't type fast enough to keep up with all the thoughtful emails. ;)

- Gavin

>>> Eric Phetteplace <[log in to unmask]> 11/30/2012 10:46 AM >>>
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 <[log in to unmask]>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:[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
> >
>

Top of Message | Previous Page | Permalink

Advanced Options


Options

Log In

Log In

Get Password

Get Password


Search Archives

Search Archives


Subscribe or Unsubscribe

Subscribe or Unsubscribe


Archives

October 2019
September 2019
August 2019
July 2019
June 2019
May 2019
April 2019
March 2019
February 2019
January 2019
December 2018
November 2018
October 2018
September 2018
August 2018
July 2018
June 2018
May 2018
April 2018
March 2018
February 2018
January 2018
December 2017
November 2017
October 2017
September 2017
August 2017
July 2017
June 2017
May 2017
April 2017
March 2017
February 2017
January 2017
December 2016
November 2016
October 2016
September 2016
August 2016
July 2016
June 2016
May 2016
April 2016
March 2016
February 2016
January 2016
December 2015
November 2015
October 2015
September 2015
August 2015
July 2015
June 2015
May 2015
April 2015
March 2015
February 2015
January 2015
December 2014
November 2014
October 2014
September 2014
August 2014
July 2014
June 2014
May 2014
April 2014
March 2014
February 2014
January 2014
December 2013
November 2013
October 2013
September 2013
August 2013
July 2013
June 2013
May 2013
April 2013
March 2013
February 2013
January 2013
December 2012
November 2012
October 2012
September 2012
August 2012
July 2012
June 2012
May 2012
April 2012
March 2012
February 2012
January 2012
December 2011
November 2011
October 2011
September 2011
August 2011
July 2011
June 2011
May 2011
April 2011
March 2011
February 2011
January 2011
December 2010
November 2010
October 2010
September 2010
August 2010
July 2010
June 2010
May 2010
April 2010
March 2010
February 2010
January 2010
December 2009
November 2009
October 2009
September 2009
August 2009
July 2009
June 2009
May 2009
April 2009
March 2009
February 2009
January 2009
December 2008
November 2008
October 2008
September 2008
August 2008
July 2008
June 2008
May 2008
April 2008
March 2008
February 2008
January 2008
December 2007
November 2007
October 2007
September 2007
August 2007
July 2007
June 2007
May 2007
April 2007
March 2007
February 2007
January 2007
December 2006
November 2006
October 2006
September 2006
August 2006
July 2006
June 2006
May 2006
April 2006
March 2006
February 2006
January 2006
December 2005
November 2005
October 2005
September 2005
August 2005
July 2005
June 2005
May 2005
April 2005
March 2005
February 2005
January 2005
December 2004
November 2004
October 2004
September 2004
August 2004
July 2004
June 2004
May 2004
April 2004
March 2004
February 2004
January 2004
December 2003
November 2003

ATOM RSS1 RSS2



LISTS.CLIR.ORG

CataList Email List Search Powered by the LISTSERV Email List Manager