Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Datepicker: Avoid flash during render in Firefox. Fixes #5493 - Datep…

…icker: changeYear + yearRange causes flash in Firefox.

Thanks israelrios.
  • Loading branch information...
commit 7832fd8e9c59c6cdc2465bb039c12c87fca85b5d 1 parent 53215de
@scottgonzalez scottgonzalez authored
Showing with 36 additions and 12 deletions.
  1. +36 −12 ui/jquery.ui.datepicker.js
View
48 ui/jquery.ui.datepicker.js
@@ -624,6 +624,8 @@ $.extend(Datepicker.prototype, {
}
var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
$.datepicker._pos = null;
+ //to avoid flashes on Firefox
+ inst.dpDiv.empty();
// determine sizing offscreen
inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
$.datepicker._updateDatepicker(inst);
@@ -638,10 +640,12 @@ $.extend(Datepicker.prototype, {
var duration = $.datepicker._get(inst, 'duration');
var postProcess = function() {
$.datepicker._datepickerShowing = true;
- var borders = $.datepicker._getBorders(inst.dpDiv);
- inst.dpDiv.find('iframe.ui-datepicker-cover'). // IE6- only
- css({left: -borders[0], top: -borders[1],
+ var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
+ if( !! cover.length ){
+ var borders = $.datepicker._getBorders(inst.dpDiv);
+ cover.css({left: -borders[0], top: -borders[1],
width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()});
+ }
};
inst.dpDiv.zIndex($(input).zIndex()+1);
if ($.effects && $.effects[showAnim])
@@ -660,12 +664,12 @@ $.extend(Datepicker.prototype, {
_updateDatepicker: function(inst) {
var self = this;
var borders = $.datepicker._getBorders(inst.dpDiv);
- inst.dpDiv.empty().append(this._generateHTML(inst))
- .find('iframe.ui-datepicker-cover') // IE6- only
- .css({left: -borders[0], top: -borders[1],
- width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
- .end()
- .find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
+ inst.dpDiv.empty().append(this._generateHTML(inst));
+ var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
+ if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
+ cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
+ }
+ inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
.bind('mouseout', function(){
$(this).removeClass('ui-state-hover');
if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
@@ -697,6 +701,17 @@ $.extend(Datepicker.prototype, {
if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
inst.input.is(':visible') && !inst.input.is(':disabled'))
inst.input.focus();
+ // deffered render of the years select (to avoid flashes on Firefox)
+ if( inst.yearshtml ){
+ var origyearshtml = inst.yearshtml;
+ setTimeout(function(){
+ //assure that inst.yearshtml didn't change.
+ if( origyearshtml === inst.yearshtml ){
+ inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
+ }
+ origyearshtml = inst.yearshtml = null;
+ }, 0);
+ }
},
/* Retrieve the size of left and top borders for an element.
@@ -1548,6 +1563,7 @@ $.extend(Datepicker.prototype, {
if (!showMonthAfterYear)
html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : '');
// year selection
+ inst.yearshtml = '';
if (secondary || !changeYear)
html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
else {
@@ -1564,16 +1580,24 @@ $.extend(Datepicker.prototype, {
var endYear = Math.max(year, determineYear(years[1] || ''));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
- html += '<select class="ui-datepicker-year" ' +
+ inst.yearshtml += '<select class="ui-datepicker-year" ' +
'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
'>';
for (; year <= endYear; year++) {
- html += '<option value="' + year + '"' +
+ inst.yearshtml += '<option value="' + year + '"' +
(year == drawYear ? ' selected="selected"' : '') +
'>' + year + '</option>';
}
- html += '</select>';
+ inst.yearshtml += '</select>';
+ //when showing there is no need for later update
+ if( ! $.browser.mozilla ){
+ html += inst.yearshtml;
+ inst.yearshtml = null;
+ } else {
+ // will be replaced later with inst.yearshtml
+ html += '<select class="ui-datepicker-year"><option value="' + drawYear + '" selected="selected">' + drawYear + '</option></select>';
+ }
}
html += this._get(inst, 'yearSuffix');
if (showMonthAfterYear)
Please sign in to comment.
Something went wrong with that request. Please try again.