Search jQuery

jQuery Forum

marvs.jqu..

Flash of Markup on load in datepicker when invoked on element within dialog

in Using jQuery UI • 12 years ago

Tested in latest browsers on Vista / XP (IE, Firefox, Chrome, Safari, Opera) ONLY Firefox has a "flash of markup on load" when the following datepicker setup is invoked where 'tbDOB' is a input text element within a jQuery ui dialog:

$('#tbDOB').datepicker({ changeMonth: true, changeYear: true, yearRange: '1901:2010' });

Replies(3)

kbwood.au

Re: Flash of Markup on load in datepicker when invoked on element within dialog

12 years ago

Can you post a page that demonstrates the problem?

marvs.jqu..

Re: Flash of Markup on load in datepicker when invoked on element within dialog

12 years ago

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css"
type="text/css" rel="Stylesheet" />
<style type="text/css">
body
{
margin: 0px;
background-color: Silver;
font-size: 8pt;
font-family: Verdana;
}
.content
{
width: 800px;
height: 600px;
background-color: White;
margin: 0 auto;
padding: 20px;
}
.dialogs
{
display: none;
}
.inside
{
padding: 10px;
}
.note
{
margin: 25px;
padding: 5px;
background-color: White;
color: Navy;
border: 0;
}
</style>
<script src="js/jquery.142.js" type="text/javascript"></script>
<script src="js/jquery-ui.18.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('#divPopup').dialog({
title: 'Example Dialog',
bgiframe: true,
modal: true,
width: 350,
beforeclose: function(e, ui) {
return false;
}
});
$('#tbEffDate').datepicker({ changeMonth: true, changeYear: true, yearRange: '1901:2010' });
});
</script>
</head>
<body>
<div class="content">
</div>
<div id="divPopup" class="dialogs">
<div class="inside">
<b>Effective Date:</b><br />
<input type="text" id="tbEffDate" />
<div class="note">
Note: Using Firefox v3.6 I get a flash of markup when I click in the input field
just prior to the datepicker displaying. It is even more visible if you move the
dialog prior to clicking into the Effective Date field.
</div>
</div>
</div>
</body>
</html>

kbwood.au

Re: Flash of Markup on load in datepicker when invoked on element within dialog

12 years ago

The flash occurs when the drop-down of years would require a scrollbar (more than 20 entries). It flashes a box that seems to be tied to the bottom right corner of the input field, subject to a minimum size. I don't know why though!?!