Upgrading to v5.1.0 jqm ui-title uses h1 instead of h3

[gregh3269]

I use "theme_headerTheme" : "b" which I have a custom colour (blue) and a override for the text so it shows white (rather than black). For me when the popup shows there is nothing between the - and + icons where it should show the month, as it uses my override to white since its h1. (The css colour is white, and there is a white background.)

Here I get theme b with white text:

<h1 class="ui-title" style="margin: 0 15%">May 2019</h1>
h1.popup, h1.ui-title {
    color: #FFFFFF;
}

Checking the jqm docs for a popup dialog they use h3 for the text (and h1 for the title), which when I test it renders in the default (black and matches the month/year)

https://demos.jquerymobile.com/1.4.5/popup/ and dialog delete page example

<div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
  <h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
</div>
<div role="main" class="ui-content">
  <h3 class="ui-title">Are you sure you want to delete this page?</h3>
  <p>This action cannot be undone.</p>
  <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
  <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
</div>

The previous version used h4

<div class="ui-datebox-gridlabel"><h4>May 2019</h4></div>

This needs to be h3/h4? $("<h1 class='ui-title' style='margin: 0 15%'>" + txt + "</h1>").appendTo(returnVal);

[jtsage]

If the docs are using h3, I suppose I should as well. Updated. And yeah, that's the line.

I'll push this out with version 5.1.3, maybe later today (probably. actually have to do some work at $real_job, so not sure I'll get that far.

~j

[gregh3269]

Thanks.

(A problem with component based UI's, there is really no LTS on the components and relies too much on $0.)

Btw on the down load for datebox, have you considered a framework free download option?

(typo on Upgradeing on main page!)

[jtsage]

Re: framework free - that’s not a bad idea. I’d need to include stubs for all the style_ functions, and figure out a clever way to include the documentation inline (my build process currently strips comments), but I like this idea.

[gregh3269]

I use this very old www.mattkruse.com/javascript/calendarpopup/ picker, and from what I can remember, the only thing databox lacks is a year picker 2010 2011 2012 2013 etc (see Year-select calendar). It would be great to standardise!

[gregh3269]

Noticed this typo? <h1>..</h5>? style_mainHead: function(text, themeBar, themeButton) { return "<div class='ui-header ui-bar-" + themeBar + "'>" + "<h1 class='ui-title'>" + text + "</h5>" + this.style_btn([ themeButton[0], themeButton[1] + " dbCloser ui-btn-right" ]) + "</div>"; },

[jtsage]

Typo fixed.

There are two easy options for a year picker. Using the "databox" display method:

<div class="ui-field-contain">
    <label for="db2">Year Picker - Datebox</label>
    <input name="db2" type="text" data-mini="true" data-options='{"mode":"datebox", "overrideDateFieldOrder": ["y"], "overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }' data-role="datebox" id="db2" />
</div>

Or, using flipbox:

<div class="ui-field-contain">
    <label for="db3">Year Picker - Flipbox</label>
    <input name="db3" type="text" data-mini="true" data-options='{"mode":"flipbox", "overrideDateFieldOrder": ["y"], "overrideHeaderFormat":"%Y", "overrideDateFormat": "%Y" }' data-role="datebox" id="db3" />
</div>

I hadn't done a button based one, as I wasn't sure what a good use case is - typically if i'm pulling a year, it's usually a credit card expiration, and I'd rather do a select box stating with the current year as it's kinder to browser autofill.

That said, I could certainly crank one out pretty easily. Does it make sense to do one for years as well?

~j

[jtsage]

That said, on the page you sent, there is an option to populate select fields with the date. That's pretty spiffy, may have to look at adding that.

[gregh3269]

I will try the year picker, thanks.

I did some testing yesterday on some older phones, and unfortunately on my favourite webkit phone it fails to initialise and stops the page js rendering all together. I will try and debug, but all I have is alert(); to work with. On the conversion is there any later js which would not be supported in the jqm era?