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

[Shaun Ellis]

I stand corrected.  CodePen doesn't require login... here's the same 
example there:

http://codepen.io/anon/full/wxJqz

The UI is a little different and CodePen, but it seems that they've 
taken jsbin and added a some more features. I like the longer list of JS 
libraries in jsbin, but you can plug them in at CodePen if you need to.


-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 mark.perno...@gmail.comwrote:


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




--
Shaun D. Ellis
Digital Library Interface Developer
Firestone Library, Princeton University
voice: 609.258.1698 | sha...@princeton.edu

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

[Gavin Spomer]

Thanks for the input, Mark. 

I don't think there is a textinput method in jQuery or jQuery Mobile. 

- Gavin

 Mark Pernotto mark.perno...@gmail.com 11/29/2012 3:58 PM 
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

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

[Michael Schofield]

Friendly FYI :-). data-mini=true is an HTML5 data attribute. So, in the
source it might look like:

input id='foo' class='search' data-mini='true'

When talking to data-attributes with jQuery, you might be able to eke out
better performance using .data('mini'). E.g.: 

$('input').data('mini', 'true');

Rather than having jQuery look for an attribute called data-mini, it will
hone in directly on any present data- then match with mini.

Here's some further reading: http://api.jquery.com/data/

Good luck! I hope you share the final result.

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 11:52 AM
To: CODE4LIB@LISTSERV.ND.EDU
Subject: Re: [CODE4LIB] jQuery Set data-mini Attribute For All Form Inputs

Thanks for the input, Mark. 

I don't think there is a textinput method in jQuery or jQuery Mobile. 

- Gavin

 Mark Pernotto mark.perno...@gmail.com 11/29/2012 3:58 PM 
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

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

[Gavin Spomer]

Thanks for the tool suggestions! I also found one recently: 

   http://jsfiddle.net/ 

- Gavin

 Shaun Ellis sha...@princeton.edu 11/30/2012 7:10 AM 
I stand corrected.  CodePen doesn't require login... here's the same
example there:
http://codepen.io/anon/full/wxJqz

The UI is a little different and CodePen, but it seems that they've
taken jsbin and added a some more features. I like the longer list of JS
libraries in jsbin, but you can plug them in at CodePen if you need to.

-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 mark.perno...@gmail.comwrote:

 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


--
Shaun D. Ellis
Digital Library Interface Developer
Firestone Library, Princeton University
voice: 609.258.1698 | sha...@princeton.edu

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

[Mark Pernotto]

Gavin/Group:

Sorry about that.  That will teach me to to respond to a syntax
question before testing.

jsfiddle.net is a great resource!

And I'd love to see what you end up with!

Thanks,
mark



On Fri, Nov 30, 2012 at 9:38 AM, Gavin Spomer spom...@cwu.edu wrote:
 Thanks for the tool suggestions! I also found one recently:

http://jsfiddle.net/

 - Gavin

 Shaun Ellis sha...@princeton.edu 11/30/2012 7:10 AM 
 I stand corrected.  CodePen doesn't require login... here's the same
 example there:
 http://codepen.io/anon/full/wxJqz

 The UI is a little different and CodePen, but it seems that they've
 taken jsbin and added a some more features. I like the longer list of JS
 libraries in jsbin, but you can plug them in at CodePen if you need to.

 -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 
 mark.perno...@gmail.comwrote:

 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


 --
 Shaun D. Ellis
 Digital Library Interface Developer
 Firestone Library, Princeton University
 voice: 609.258.1698 | sha...@princeton.edu

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

[Gavin Spomer]

Cool, thanks. Good info! 

I did know it was HTML5 schtuff, but haven't used the data() method before. 
Unfortunately it doesn't work in this case. 

- Gavin

 Michael Schofield mschofi...@nova.edu 11/30/2012 9:21 AM 
Friendly FYI :-). data-mini=true is an HTML5 data attribute. So, in the
source it might look like:

input id='foo' class='search' data-mini='true'

When talking to data-attributes with jQuery, you might be able to eke out
better performance using .data('mini'). E.g.:

$('input').data('mini', 'true');

Rather than having jQuery look for an attribute called data-mini, it will
hone in directly on any present data- then match with mini.

Here's some further reading: http://api.jquery.com/data/

Good luck! I hope you share the final result.

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 11:52 AM
To: CODE4LIB@LISTSERV.ND.EDU
Subject: Re: [CODE4LIB] jQuery Set data-mini Attribute For All Form Inputs

Thanks for the input, Mark.

I don't think there is a textinput method in jQuery or jQuery Mobile.

- Gavin

 Mark Pernotto mark.perno...@gmail.com 11/29/2012 3:58 PM 
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

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

[Gavin Spomer]

Ha ha. You were just eager to help, I know how that is. 

My solution is just to use: 

   $(document).ready(function() { 
  $('input').addClass('ui-mini'); 
   }); 

Thanks everyone for helpful tips and info. 

- Gavin

 Mark Pernotto mark.perno...@gmail.com 11/30/2012 9:44 AM 
Gavin/Group:

Sorry about that.  That will teach me to to respond to a syntax
question before testing.

jsfiddle.net is a great resource!

And I'd love to see what you end up with!

Thanks,
mark



On Fri, Nov 30, 2012 at 9:38 AM, Gavin Spomer spom...@cwu.edu wrote:
 Thanks for the tool suggestions! I also found one recently:

http://jsfiddle.net/

 - Gavin

 Shaun Ellis sha...@princeton.edu 11/30/2012 7:10 AM 
 I stand corrected.  CodePen doesn't require login... here's the same
 example there:
 http://codepen.io/anon/full/wxJqz

 The UI is a little different and CodePen, but it seems that they've
 taken jsbin and added a some more features. I like the longer list of JS
 libraries in jsbin, but you can plug them in at CodePen if you need to.

 -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 
 mark.perno...@gmail.comwrote:

 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


 --
 Shaun D. Ellis
 Digital Library Interface Developer
 Firestone Library, Princeton University
 voice: 609.258.1698 | sha...@princeton.edu

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

[Michael Schofield]

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.comwrote:

 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

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

[Eric Phetteplace]

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.eduwrote:

 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.comwrote:

  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

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

[Gavin Spomer]

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 mschofi...@nova.edu 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: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.comwrote:

 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

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

[Gavin Spomer]

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 phett...@gmail.com 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 mschofi...@nova.eduwrote:

 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.comwrote:

  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

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

[Michael Schofield]

 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.eduwrote:

 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

[CODE4LIB] jQuery Set data-mini Attribute For All Form Inputs

[Gavin Spomer]

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

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

[Mark Pernotto]

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

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

[Eric Phetteplace]

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.comwrote:

 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

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

[Shaun Ellis]

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 mark.perno...@gmail.comwrote:


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




--
Shaun D. Ellis
Digital Library Interface Developer
Firestone Library, Princeton University
voice: 609.258.1698 | sha...@princeton.edu