[HTC] fix voor IE6 background-flicker

[Genoil]

Voor de mensen die niet weten waar dit over gaat: Als je in IE6 de cache uit hebt staan, zoals de meeste mensen die webdevelopen in IE6 en vast ook vele anderen, reloaden -dus knipperen- de achtergrondplaatjes van block-style a elementen met de pseudoclasses :hover en :active, bij rollover en activate events.

Naar aanleiding van de HTC-hype alhier kwam ik ineens op het idee om voorgoed met dat geknipper klaar te zijn zonder daarmee andere browsers overhead te bezorgen.

Door middel van een htc behavior die in de CSS gedefineerd staat (die non-IE browsers dus negeren), wordt aan de buttons een script gekoppeld die bij de eerste rollover de 'standaard' pseudo-classes verwijderd.
Daarvoor in de plaats wordt een img element ingevoegd met dezelfde naam als de oorspronkelijke :hover background-image.
De onmouseout handler zorgt ervoor dat de .src van de 'replacement'-image swapped naar de 'idle' afbeelding. Een soortgelijke constructie is er voor de onactivate en deactive events.

HTML:

<td class="navcell">
    <a id="home" class="fix" href="#home">
        <span class="fir">Home</span>
    </a>
</td>

Cascading Stylesheet:

.fix, .fixed{
    width: 52px;
    height: 16px;
    margin: 0px;
    border: 1px;
    padding: 0px;
    line-height: 0px;
    font-size: 0px;
}

.navcell {
    background-image: url(leeg.gif);
}

.fir {display:none;}

.navcell a {
    width: 52px;
    height: 16px;
    display:block;
    behavior: url(iecff.htc);
}

#home.fix {background-image: url(home.gif);}
#home.fix:hover {background-image: url(home_down.gif);}
#home.fix:active{background-image: url(home_act.gif);}

(noot: scroll naar beneden voor nieuwste versie van htc)

JavaScript:

<attach event="onmouseover" handler="hover" />
<attach event="onmouseout" handler="unhover" />
<attach event="onactivate" handler="activate" />
<attach event="ondeactivate" handler="deactivate" />

<script type="text/javascript">
    g_sState = "idle";
    
    function hover() { 
        if(element.id) {
            if(element.childNodes.length == 1) {
                oImg = document.createElement("img");
                oImg.src = element.id+"_down.gif";
                oImg.style.borderWidth = "0px";
                element.appendChild(oImg);
                element.className = "fixed";
            }
            else {
                if(g_sState == "idle") {
                    g_sState = "hover";
                    element.childNodes[1].src = element.id+"_down.gif";
                }
            }
        }
    }
    
    function unhover() {
        if(element.childNodes.length == 2) { 
            if(g_sState == "hover") {
                element.childNodes[1].src = element.id+".gif";
                g_sState = "idle"
            }
        }
        
    }
    
    function activate() {
        if(element.childNodes.length == 2) {
            element.childNodes[1].src = element.id+"_act.gif";
            g_sState = "active";
        }
    }
    
    function deactivate() {
        if(element.childNodes.length == 2) {
            element.childNodes[1].src = element.id+".gif";
            g_sState = "idle";
        }
    }
</script>

Om het verschil te zien moet je wel IE6 hebben en je cache settings op "Every visit to the page"/"Elk bezoek aan de pagina" hebben staan. Een schoonheidsfoutje dat er nog wel in zit is dat de knop bij elke eerste rollover nog een laatste keer knippert, maar dat is eenvoudig uit te halen door een extra behavior aan de body te hangen die bij het onload event de reparatiewerkzaamheden al gaat verrichten.

Met fix: Hier
HTC: Hier
CSS: Hier

Zonder fix : Hier

of was dit er al

(ps ik weet niet of het nou #home.fix of .fix#home ,oet zijn maar het schijnt allebei te werken )

[edit]
hmmz hij heeft wel wat meer kuren in de online versie zie ik nou. ik ga ff zo'n onload ding proberen, kijken of dat helpt

[ Voor 31% gewijzigd door Genoil op 01-03-2004 11:47 ]

[Blaise]

Dit was al simpeler op te lossen door een plaatje te nemen waar de drie statuses boven elkaar staan in één plaatje, en dan dmv -Xpx het goede plaatje tevoorschijn te toveren. Omdat het plaatje al geladen is (de default zit ook in het plaatje) krijg je geen knipperingen.

zie ook http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

[ Voor 14% gewijzigd door Blaise op 29-02-2004 14:28 ]

[Genoil]

Blaise schreef op 29 februari 2004 @ 14:25:
Dit was al simpeler op te lossen door een plaatje te nemen waar de drie statuses boven elkaar staan in één plaatje, en dan dmv -Xpx het goede plaatje tevoorschijn te toveren. Omdat het plaatje al geladen is (de default zit ook in het plaatje) krijg je geen knipperingen.

zie ook http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/

he da's ook mooi! maar toch leuk die htc's . voor sites die al bestaan en met losse plaatjes en dit probleem zitten, is het misschien toch bruikbaar als je geen zin hebt tig button-plaatjes te gaan lopen mergen

[edit]
hmm ik wil hier toch ff op terugkomen, dat voorbeeld knippert hier als een idioot
mijn htc-fix (sinds de volgende post) lekker niet

[ Voor 28% gewijzigd door Genoil op 29-02-2004 16:50 ]

[Genoil]

ik heb em nog wat verbeterd:

code:

<attach event="onmouseover" handler="hover" />
<attach event="onmouseout" handler="unhover" />
<attach event="onactivate" handler="activate" />
<attach event="ondeactivate" handler="deactivate" />

<script type="text/javascript">
    g_sState  = "idle";
    g_oIdle   = null;
    g_oHover  = null;
    g_oActive = null;
    init();
        
    function init() {
        if(element.id) {
            if(element.childNodes.length == 1) {
                g_oIdle   = preload(element.id+".gif");
                g_oIdle.onreadystatechange = replaceBackground;         
                g_oHover  = preload(element.id+"_down.gif");
                g_oActive = preload(element.id+"_act.gif");
            }
        }
    }
    
    function replaceBackground() {
        if(this.readyState == "complete") {
            element.appendChild(this);
            element.className = "fixed";
        }
    }
    
    function preload(sUrl) {
        oImg = document.createElement("img");
        oImg.src = sUrl;
        oImg.style.borderWidth = "0px";
        return oImg;
    }
    
    function hover() { 
        if(element.id) {
            if(element.childNodes.length == 2) {
                if(g_sState == "idle") {
                    g_sState = "hover";
                    element.replaceChild(g_oHover, element.childNodes[1]);
                }
            }
        }
    }
    
    function unhover() {
        if(element.childNodes.length == 2) { 
            if(g_sState == "hover") {
                element.replaceChild(g_oIdle, element.childNodes[1]);
                g_sState = "idle";
            }
        }
        
    }
    
    function activate() {
        if(element.childNodes.length == 2) {
            element.replaceChild(g_oActive, element.childNodes[1]);
            g_sState = "active";
        }
    }
    
    function deactivate() {
        if(element.childNodes.length == 2) {
            element.replaceChild(g_oIdle, element.childNodes[1]);
            g_sState = "idle";
        }
    }
</script>

Alles wordt nu netjes gepreload en je hebt ook geen last meer van een knipperende cursor.

nieuwe versie staat gewoon weer hier (wel ff wachten tot de page helemaal geladen is, de host is niet erg snel maar da's voor het demo-effect wel prima )

[edit]
code nog iets verbeterd door de achtergrond pas te vervangen nadat het idle plaatje is ingeladen, scheelt nog een knipper

[edit2]
met 50% kleinere htc file

[ Voor 40% gewijzigd door Genoil op 29-02-2004 16:51 ]

[Genoil]

nog een laatste toevoeging is

code:

window.location.href = element.href;

in de onactivate handler, omdat het implementeren van de onactivate-handler er blijkbaar voor zorgt dat het standaard gedrag van het anchor niet wordt uitgevoerd.

[BtM909]

Nice work

Kan je in je topicstart overigens alle files ook aanbieden. Nu wordt het een zoek-actie in je bron

[Genoil]

edit:
ik heb hier ff iets weggehaald, aangezien er vandaag waarschijnlijk weer mensen bij dit topic langskomen, en ik inmiddels weet dat hetgeen hier eerst stond toch niet klopt.

[ Voor 85% gewijzigd door Genoil op 16-03-2004 15:08 ]