jQuery fading probleem in ie

[Astromenia]

Ik ben bezig met een website waar ik grafieken genereer dmv een list en css. Nu heb ik het zo gemaakt dat wanneer een grafiek zichtbaar is en er een grafiek van een andere datum wordt aangevraagd de eerste grafiek wegfade (fadeOut), jQuery via een php script de nieuwe grafiek ophaalt en deze weer infade (fadeIn). Dit werkt perfect zoals bedoelt in "alle" browsers (heb getest in ff, safari en chrome) maar niet in internet explorer.

Mijn jQuery code:

JavaScript:

$(document).ready(function(){
    putButtonFunctionality();
});

function putButtonFunctionality(){
    $(".activeButtons").click(function() {
        var dag = $("#dag").val();
        var maand = $("#maand").val();
        var jaar = $("#jaar").val();
        
       $.get("include/processGraph.php", {
           jaar: jaar,
           maand: maand,
           dag: dag
       }, function (data){
           $('#grafiek')
            .fadeOut(500, function() {
                $('#grafiek').html("")
                .append(data)
                .fadeIn(500, function() {
                    $('#grafiek').append("");
                });
            })
       });
return false;
    });
}

In de file grafiek.php staat een div met id "grafiek". Daar komt de grafiek in. De php functie welke de grafiek teruggeeft aan bovenstaande code heeft de volgende uitvoer:

HTML:

<div id="grafiek">
    Verbruik van 26 juli 2009 (in m<sup>3</sup>)<br><br>
    <ul class="verticalBarGraph">
        <li class='achtergrond' style='height: 220px; width: 640px;'>0.1</li>
        <li class='achtergrond' style='height: 170px; width: 640px;'>0.075</li>
        <li class='achtergrond' style='height: 120px; width: 640px;'>0.05</li>
        <li class='achtergrond' style='height: 70px; width: 640px;'>0.025</li>
        <li class='achtergrond' style='height: 20px; width: 640px;'>0</li>
        <li class='verbruik' style='width: 21px; height: 60px; left: 40px;' title='Kosten: € 0.024, verbruik: 0.02 m3'><a href='#' style='height: 40px;'></a></li>
        <li class='noresult' style='height: 20px; width: 24px; left: 40px;'>0</li>
        <li class='verbruik' style='width: 21px; height: 200px; left: 64px;' title='Kosten: € 0.108, verbruik: 0.09 m3'><a href='#' style='height: 180px;'></a></li>
        <li class='noresult' style='height: 20px; width: 24px; left: 64px;'>1</li>
    </ul>        
</div>

Bovenstaande code wordt doormiddel van css omgetoverd tot grafiekje

In internet explorer komt gewoon ineens de nieuwe grafiek zonder te faden. De grafiek titel fade echter wel (Verbruik van 26 juli 2009 (in m³)<br><br>)...

Ik hoop dat iemand een oplossing weet, alvast bedankt iig!

[Bosmonster]

Heb je een compleet werkend voorbeeld van je probleem, inclusief gebruikte CSS voor de betrokken elementen?

[Astromenia]

Ga ik meteen even aan werken!

[Prx]

In plaats van html("") kan je ook gewoon gebruik maken van empty(). Tevens kan je in de laatste 2 gevallen de $('#grafiek') vervangen door $(this). Op deze manier kan je het id van de div nog wel eens veranderen zonder dat je gelijk door je hele javascript heen alles moet vervangen.

Waarom voeg je trouwens op het laatst nog "" toe?

[Astromenia]

Ik heb $('#grafiek') vervangen voor $(this). Dat is inderdaad wel zo netjes. Die laatste toevoegen heeft geen nut en is nu dus ook weg.

[418O2]

http://www.kevinleary.net...ems-in-internet-explorer/

dat al eens geprobeerd?

[Astromenia]

418O2 schreef op woensdag 26 augustus 2009 @ 10:55:
http://www.kevinleary.net...ems-in-internet-explorer/

dat al eens geprobeerd?

Ja maar das een ander probleem. Dat van mij fade helemaal niet, dat van hem iig nog lelijk

[ Voor 11% gewijzigd door Astromenia op 26-08-2009 10:56 ]

[Bosmonster]

418O2 schreef op woensdag 26 augustus 2009 @ 10:55:
http://www.kevinleary.net...ems-in-internet-explorer/

dat al eens geprobeerd?

Dat is als je transparante PNG's probeert te faden. Das ook een drama in IE (zelfs 8 nog steeds helaas), maar een ander probleem.

Het helemaal niet faden in IE ligt meestal aan de omliggende CSS, vandaar dat ik die even wilde zien

[Astromenia]

Het duurde ff maar heb een draaiend voorbeeld: http://staaltestserver.nl/jquerytest/

Er is data voor de maand juli. Voer dus bijvoorbeeld 22 7 2009 in klik op send en vul daarna 23 7 2009 in en druk weer op send.

[Astromenia]

Hier nog de css van de grafiek:

Cascading Stylesheet:

.verticalBarGraph {
    border-bottom: 1px solid #FFF;
    height: 200px;
    margin: 0;
    padding: 0;
    text-align: left;
    position: relative;
}

.verticalBarGraph li {
    bottom: 0;
    list-style:none;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    font: 10px verdana;
}

.verticalBarGraph li.achtergrond{
    border:none;
    border-top: 1px solid #666666;
    text-align:left;
    color:#666666;
}
.verticalBarGraph li.result{ background-color:#fcae16 }
.verticalBarGraph li.noresult{
    background-color:white;
    border-right: 3px solid white;
    border-top:1px solid #666666;
    text-align:center;
}

.verticalBarGraph li.verbruikwater{ background-color:#0093cc }
.verticalBarGraph li.verbruikelectricity{ background-color:#fec841 }
.verticalBarGraph li.verbruikgas{ background-color:#5f912e }

.verticalBarGraph li.kosten{ background-color:#f36639 }

.verticalBarGraph li a{
    color: white;
    display: block;
    text-decoration: none;
}

.verticalBarGraph li a:hover{ text-decoration:underline;}

[Krooswijk.com]

Toevoegen aan de css:

Cascading Stylesheet:

#grafiek {
    position: relative;
    width: 640px;
    height: 220px;
}

[Astromenia]

Dat werkt! Dankje.

Maar ik zou niet weten waarom. Kun je dat uitleggen?

[R4gnax]

Astromenia schreef op woensdag 26 augustus 2009 @ 16:29:
Dat werkt! Dankje.

Maar ik zou niet weten waarom. Kun je dat uitleggen?

IE's magische 'hasLayout' property. De proprietary filters van microsoft (waaronder filter:opacity, aangezien IE het CSS opacity attribuut niet aan boord heeft) werken alleen op elementen die 'layout' hebben. Height en width zijn zgn. 'triggers' die een element 'layout' bezorgen.

Position: relative is een bekende hack die issues met achtergrond plaatjes en sommige v/d proprietary filters verhelpt, maar geeft an sich geen 'layout' aan een element. (Sterker nog: als je een element dat geen layout heeft position: relative geeft, kun je daar hoopjes rendering bugs mee krijgen!)

Om het nog interessant te houden geeft position: fixed of position: absolute dan weer wèl 'layout' aan een element. (Volg je het nog?)


Lees On Having Layout maar eens, en gruwel.