Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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
Scott González authored November 05, 2010

Showing 1 changed file with 36 additions and 12 deletions. Show diff stats Hide diff stats

  1. 48  ui/jquery.ui.datepicker.js
48  ui/jquery.ui.datepicker.js
@@ -624,6 +624,8 @@ $.extend(Datepicker.prototype, {
624 624
 		}
625 625
 		var offset = {left: $.datepicker._pos[0], top: $.datepicker._pos[1]};
626 626
 		$.datepicker._pos = null;
  627
+		//to avoid flashes on Firefox
  628
+		inst.dpDiv.empty();
627 629
 		// determine sizing offscreen
628 630
 		inst.dpDiv.css({position: 'absolute', display: 'block', top: '-1000px'});
629 631
 		$.datepicker._updateDatepicker(inst);
@@ -638,10 +640,12 @@ $.extend(Datepicker.prototype, {
638 640
 			var duration = $.datepicker._get(inst, 'duration');
639 641
 			var postProcess = function() {
640 642
 				$.datepicker._datepickerShowing = true;
641  
-				var borders = $.datepicker._getBorders(inst.dpDiv);
642  
-				inst.dpDiv.find('iframe.ui-datepicker-cover'). // IE6- only
643  
-					css({left: -borders[0], top: -borders[1],
  643
+				var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
  644
+				if( !! cover.length ){
  645
+					var borders = $.datepicker._getBorders(inst.dpDiv);
  646
+					cover.css({left: -borders[0], top: -borders[1],
644 647
 						width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()});
  648
+				}
645 649
 			};
646 650
 			inst.dpDiv.zIndex($(input).zIndex()+1);
647 651
 			if ($.effects && $.effects[showAnim])
@@ -660,12 +664,12 @@ $.extend(Datepicker.prototype, {
660 664
 	_updateDatepicker: function(inst) {
661 665
 		var self = this;
662 666
 		var borders = $.datepicker._getBorders(inst.dpDiv);
663  
-		inst.dpDiv.empty().append(this._generateHTML(inst))
664  
-			.find('iframe.ui-datepicker-cover') // IE6- only
665  
-				.css({left: -borders[0], top: -borders[1],
666  
-					width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
667  
-			.end()
668  
-			.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
  667
+		inst.dpDiv.empty().append(this._generateHTML(inst));
  668
+		var cover = inst.dpDiv.find('iframe.ui-datepicker-cover'); // IE6- only
  669
+		if( !!cover.length ){ //avoid call to outerXXXX() when not in IE6
  670
+			cover.css({left: -borders[0], top: -borders[1], width: inst.dpDiv.outerWidth(), height: inst.dpDiv.outerHeight()})
  671
+		}
  672
+		inst.dpDiv.find('button, .ui-datepicker-prev, .ui-datepicker-next, .ui-datepicker-calendar td a')
669 673
 				.bind('mouseout', function(){
670 674
 					$(this).removeClass('ui-state-hover');
671 675
 					if(this.className.indexOf('ui-datepicker-prev') != -1) $(this).removeClass('ui-datepicker-prev-hover');
@@ -697,6 +701,17 @@ $.extend(Datepicker.prototype, {
697 701
 		if (inst == $.datepicker._curInst && $.datepicker._datepickerShowing && inst.input &&
698 702
 				inst.input.is(':visible') && !inst.input.is(':disabled'))
699 703
 			inst.input.focus();
  704
+		// deffered render of the years select (to avoid flashes on Firefox) 
  705
+		if( inst.yearshtml ){
  706
+			var origyearshtml = inst.yearshtml;
  707
+			setTimeout(function(){
  708
+				//assure that inst.yearshtml didn't change.
  709
+				if( origyearshtml === inst.yearshtml ){
  710
+					inst.dpDiv.find('select.ui-datepicker-year:first').replaceWith(inst.yearshtml);
  711
+				}
  712
+				origyearshtml = inst.yearshtml = null;
  713
+			}, 0);
  714
+		}
700 715
 	},
701 716
 
702 717
 	/* Retrieve the size of left and top borders for an element.
@@ -1548,6 +1563,7 @@ $.extend(Datepicker.prototype, {
1548 1563
 		if (!showMonthAfterYear)
1549 1564
 			html += monthHtml + (secondary || !(changeMonth && changeYear) ? ' ' : '');
1550 1565
 		// year selection
  1566
+		inst.yearshtml = '';
1551 1567
 		if (secondary || !changeYear)
1552 1568
 			html += '<span class="ui-datepicker-year">' + drawYear + '</span>';
1553 1569
 		else {
@@ -1564,16 +1580,24 @@ $.extend(Datepicker.prototype, {
1564 1580
 			var endYear = Math.max(year, determineYear(years[1] || ''));
1565 1581
 			year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
1566 1582
 			endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
1567  
-			html += '<select class="ui-datepicker-year" ' +
  1583
+			inst.yearshtml += '<select class="ui-datepicker-year" ' +
1568 1584
 				'onchange="DP_jQuery_' + dpuuid + '.datepicker._selectMonthYear(\'#' + inst.id + '\', this, \'Y\');" ' +
1569 1585
 				'onclick="DP_jQuery_' + dpuuid + '.datepicker._clickMonthYear(\'#' + inst.id + '\');"' +
1570 1586
 				'>';
1571 1587
 			for (; year <= endYear; year++) {
1572  
-				html += '<option value="' + year + '"' +
  1588
+				inst.yearshtml += '<option value="' + year + '"' +
1573 1589
 					(year == drawYear ? ' selected="selected"' : '') +
1574 1590
 					'>' + year + '</option>';
1575 1591
 			}
1576  
-			html += '</select>';
  1592
+			inst.yearshtml += '</select>';
  1593
+			//when showing there is no need for later update
  1594
+			if( ! $.browser.mozilla ){
  1595
+				html += inst.yearshtml;
  1596
+				inst.yearshtml = null;
  1597
+			} else {
  1598
+				// will be replaced later with inst.yearshtml
  1599
+				html += '<select class="ui-datepicker-year"><option value="' + drawYear + '" selected="selected">' + drawYear + '</option></select>';
  1600
+			}
1577 1601
 		}
1578 1602
 		html += this._get(inst, 'yearSuffix');
1579 1603
 		if (showMonthAfterYear)

0 notes on commit 7832fd8

Please sign in to comment.
Something went wrong with that request. Please try again.