Ticket #6488: 0015-Use-JS-iframe-to-hide-select-dropdowns-in-IE6.patch

File 0015-Use-JS-iframe-to-hide-select-dropdowns-in-IE6.patch, 4.3 KB (added by Bastian Kleineidam <calvin@…>, 17 years ago)

  • django/contrib/admin/media/js/admin/DateTimeShortcuts.js 

    From 43db3667bd10aa424d4bfbbe4c3ed2b4c00e9fdd Mon Sep 17 00:00:00 2001
From: Bastian Kleineidam <calvin@debian.org>
Date: Fri, 25 Jan 2008 20:14:14 +0100
Subject: Use JS iframe to hide select dropdowns in IE6

Use an <iframe> tag to work around an IE6 bug that shows select
dropdowns above other elements.

Signed-off-by: Bastian Kleineidam <calvin@debian.org>

diff --git a/django/contrib/admin/media/js/admin/DateTimeShortcuts.js b/django/contrib/admin/media/js/admin/DateTimeShortcuts.js
index fe88a0e..39db282 100644
    a b var DateTimeShortcuts = {  
    77    calendarInputs: [],
    88    clockInputs: [],
    99    calendarDivName1: 'calendarbox', // name of calendar <div> that gets toggled
     10    calendarIframeName: 'calendariframe',// name of calendar <iframe> that gets toggled
    1011    calendarDivName2: 'calendarin',  // name of <div> that contains calendar
    1112    calendarLinkName: 'calendarlink',// name of the link that is used to toggle
    1213    clockDivName: 'clockbox',        // name of clock <div> that gets toggled
    … … var DateTimeShortcuts = {  
    148149        var cal_box = document.createElement('div');
    149150        cal_box.style.display = 'none';
    150151        cal_box.style.position = 'absolute';
     152        cal_box.style.zIndex = 999999;
    151153        cal_box.className = 'calendarbox module';
    152154        cal_box.setAttribute('id', DateTimeShortcuts.calendarDivName1 + num);
    153155        document.body.appendChild(cal_box);
    154156        addEvent(cal_box, 'click', DateTimeShortcuts.cancelEventPropagation);
    155157
     158        // Hack for IE6: create iframe to hide dropdowns which would
     159        // otherwise show through the div.
     160        var cal_iframe = document.createElement('iframe');
     161        cal_iframe.style.display = 'none';
     162        cal_iframe.style.position = 'absolute';
     163        cal_iframe.style.zIndex = 999998;
     164        cal_iframe.className = 'calendarbox module';
     165        cal_iframe.setAttribute('id', DateTimeShortcuts.calendarIframeName + num);
     166        document.body.appendChild(cal_iframe);
     167        addEvent(cal_iframe, 'click', DateTimeShortcuts.cancelEventPropagation);
     168
    156169        // next-prev links
    157170        var cal_nav = quickElement('div', cal_box, '');
    158171        var cal_nav_prev_year = quickElement('a', cal_nav, '<<', 'href', 'javascript:DateTimeShortcuts.drawPrevYear('+num+');');
    … … var DateTimeShortcuts = {  
    186199    },
    187200    openCalendar: function(num) {
    188201        var cal_box = document.getElementById(DateTimeShortcuts.calendarDivName1+num)
     202        var cal_iframe = document.getElementById(DateTimeShortcuts.calendarIframeName+num)
    189203        var cal_link = document.getElementById(DateTimeShortcuts.calendarLinkName+num)
    190204        var inp = DateTimeShortcuts.calendarInputs[num];
    191205
    … … var DateTimeShortcuts = {  
    214228            cal_box.style.left = findPosX(cal_link) - 180 + 'px';
    215229        }
    216230        cal_box.style.top = findPosY(cal_link) - 75 + 'px';
    217    
     231        cal_iframe.style.left = cal_box.style.left;
     232        cal_iframe.style.top = cal_box.style.top;
    218233        cal_box.style.display = 'block';
     234        cal_iframe.style.display = 'block';
    219235        addEvent(window, 'click', function() { DateTimeShortcuts.dismissCalendar(num); return true; });
    220236    },
    221237    dismissCalendar: function(num) {
    222238        document.getElementById(DateTimeShortcuts.calendarDivName1+num).style.display = 'none';
     239        document.getElementById(DateTimeShortcuts.calendarIframeName+num).style.display = 'none';
    223240    },
    224241    drawPrevMonth: function(num) {
    225242        DateTimeShortcuts.calendars[num].drawPreviousMonth();
    … … var DateTimeShortcuts = {  
    234251        DateTimeShortcuts.calendars[num].drawNextYear();
    235252    },
    236253    handleCalendarCallback: function(num) {
    237         return "function(y, m, d) { DateTimeShortcuts.calendarInputs["+num+"].value = y+'-'+m+'-'+d; document.getElementById(DateTimeShortcuts.calendarDivName1+"+num+").style.display='none';}";
     254        return "function(y, m, d) { DateTimeShortcuts.calendarInputs["+num+"].value = y+'-'+m+'-'+d; document.getElementById(DateTimeShortcuts.calendarDivName1+"+num+").style.display='none'; document.getElementById(DateTimeShortcuts.calendarIframeName+"+num+").style.display='none';}";
    238255    },
    239256    handleCalendarQuickLink: function(num, offset) {
    240257       var d = new Date();
Back to Top