CFWindow + DatePicker + IE …

Salut,
Je viens de tomber sur un petit problème et comme d’habitude je partage mon problème ainsi que la solution que j’ai trouvé.

L’origine de mon problème est la suivante:
Je créé une fenêtre avec cfwindow et à l’intérieur de celle-ci ce trouve plusieurs control dont certains
doivent recevoir

setTimeout(function(){
$(« #startDate »).datepicker({ dateFormat: « yy-mm-dd » });
},500);

On peut voir ici que pour aciver le datepicker j’ai du faire appel à la fonction javascript: setTimeout. la raison est simple l’appel à cette page via CFWindow est un appel ajax donc asynchrone, et pour être sur que le control soit bien de type datepicker.

Si je laisse comme ça le calendrier apparaitra derrière le fenêtre CFWindow donc j’ai ajouté ceci avant l’HTML

<style>
div.ui-datepicker {
z-index: 9999 !important;
}
</style>

Houra!!!!! Ca fonctionne avec Firefox mais pas avec IE (je ne le considère pas comme un browser).

Que faire …

He bien grace au site css-tricks j’ai trouvé la solution.

il faut ajouter ce code dans le setTimeout après la création du datepicker.
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$(« div »).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber += 1;
});

La version du code complet avec le style et le JQuery qui va avec

<style>
div.ui-datepicker {
z-index: 9999 !important;
}
</style>

setTimeout(function(){
$(« #startDate »).datepicker({ dateFormat: « yy-mm-dd » });
$(function() {
var zIndexNumber = 1000;
// Put your target element(s) in the selector below!
$(« div »).each(function() {
$(this).css(‘zIndex’, zIndexNumber);
zIndexNumber += 1;
});
},500);

Référence
http://css-tricks.com/snippets/jquery/fixing-ie-z-index/ il propose des solutions sur les CSS.

Publicités

Publié le 3 décembre 2012, dans Coldfusion, javascript, JQuery, Tips, et tagué , . Bookmarquez ce permalien. Poster un commentaire.

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :