[CSS/JS] IE renderprobleem met dynamisch gevulde UL

[moozzuzz]

Hoi,

ik wil op een rudimentaire manier een info veld aanpassen ivm een kalender-appje. De PHP zal 't volgende moeten uitspuwen:

HTML:

<ul class="calendar">
    <li id="event6" onClick="toggleCalendarDetail(6);"><a class="edit" href="#"><img src="./icon.edit.gif" alt="edit"></a>
    
    <span class="title">Praatcafée</span>
    2 mei
    
    </li>
    <li id="event20" onClick="toggleCalendarDetail(20);">
    
    <span class="title">C-TeamPlus</span><a class="edit" href="#"><img src="./icon.edit.gif" alt="edit"></a>
    5 mei
    
    </li>
...etc
</ul>

Met een klein javascriptje toggle ik de inhoud van de listitems:

JavaScript:

function toggleCalendarDetail(id)
{
    //toggle alle info of niet
    if (Temp[id].length < 1)
    {
        //alert(top.document.getElementById("event"+id).innerHTML);
        Temp[id] = top.document.getElementById("event"+id).innerHTML;
        txt  = "<div><h2 style='clear:both;'>"+Title[id]+"</h2> <p>"+Info[id]+"</p>\n<ul>";
        if (Uur[id].length     > 1)
            Uurtxt = "</b> om <b>"+Uur[id];
        else
            Uurtxt = ""
        if (Wanneer[id].length > 1)
            txt += "\n<li>Wanneer: <b>"+Wanneer[id]+Uurtxt+"</b></li>";

        if (Waar[id].length    > 1)
            txt += "\n<li>Waar: <b>"+Waar[id]+"</b></li>";

        if (Email[id].length > 1)
            Emailtxt = " per <a href='mailto:"+Email[id]+"' title='"+Contact[id]+"'>"+Email[id]+"</a>";
        else
            Emailtxt = "";
        if (Contact[id].length > 1)
            txt += "\n<li>Contact: <b>"+Contact[id]+"</b>"+Emailtxt+"</li>";
        txt += "</ul></div>";
        top.document.getElementById("event"+id).style.backgroundColor = "white";
        top.document.getElementById("event"+id).innerHTML = txt;

        //alert(top.document.getElementById("event"+id).innerHTML);
    }
    else
    {
        top.document.getElementById("event"+id).innerHTML = Temp[id];
        top.document.getElementById("event"+id).style.backgroundColor = "";
        Temp[id] = "";
    }
}

Globaal worden deze arrays gevuld en ook dat zal geen probleem zijn. In een statisch testcase kreeg ik echter een probleem met IE: bij het "openen/sluiten" van meerdere info-items werd de UL met de waar/wanneer/contact ineens boven andere LI's gerenderd, of net onder de calendar-UL.

Ik probeerde reeds vanalles te clearen alsook om de inhoud in een blocklevel-element (DIV) te gooien. Voorlopig zonder resultaat. Ik meen vroeger een soortgelijk scriptje geschreven te hebben waar ik dit soort problemen nooit had... Aangezien ik out-of-solutions ben, toch maar deze late post. BTW: in FF loopt het script niet snel, maar wordt alles goed gerenderd.

IE-versie: 6 met laatste servicepack.

ter info de laaste CSS:

Cascading Stylesheet:

#content ul.calendar {
    position: relative;
    list-style: none;
    margin: 0px;
    padding:0px;
}
#content ul.calendar li {
    position: relative;
    padding: 3px;
    clear: both;
    border:  1px solid white;
    border-width: 1px 0px;
}
#content ul.calendar li a.edit {
    position: relative;
    float: right;
    border: 0px;
    zoom:1;
}
#content ul.calendar li span.title {
    position: absolute; left: 90px;
}
#content ul.calendar li ul {
    position: relative;
    list-style: none;
    margin: 0px;
    padding:0px;
}
#content ul.calendar li ul li {
    position: relative;
    border:  0px solid white;
    padding: 0px;
}

[_Thanatos_]

Waarom los je het niet gewoon in CSS op? Als ik het goed begrijp, wil je dingen showen/hiden, en dat kun je oplossen met de display-property.

[TeeDee]

Kan je niet even iets online zetten?

[moozzuzz]

_Thanatos_ schreef op dinsdag 27 mei 2008 @ 20:22:
Waarom los je het niet gewoon in CSS op? Als ik het goed begrijp, wil je dingen showen/hiden, en dat kun je oplossen met de display-property.

Als ge oud wordt, dan ziet ge soms de meest logische ideeën over 't hoofd :-). De bedoeling was de content aan te passen van de li, maar em deels showen/hiden is misschien makkelijker. Check ik even.

Het probleem blijft!
Blijkt toch niet goed te lopen in mijn IE (FF opnieuw perfect). Het is steeds de UL die wegloopt, heb nog proberen spelen met de list-style en de position niet te setten, maar dat hielp niet. Het is duidelijk een mess-up van de flow...

Oorzaak (deels) gevonden:
De float (edit-knopje) bleek de dader van de mess-up. Ik heb even alle

HTML:

<a class="edit" href="#"><img src="./icon.edit.gif" alt="edit"></a>

eruitgehaald en dit werkt probleemloos in IE?! Dit is alvast zo volgens de methode van _Thatanos_(hide/show), want ook zonder float is er een probleem bij mijn eerste LI-inhoud-replace-methode... Ik doe dus in IE nog steeds iets raar als ik de oude methode zou behouden (wat ik overigens niet van plan ben :^).

TeeDee schreef op dinsdag 27 mei 2008 @ 20:25:
Kan je niet even iets online zetten?

Vanavond zet ik iets online!

HTML en JS volgens voorstel _Thatanos_:

HTML:

<ul class="calendar">
    <li onClick="toggleCalendarDetail2(8);"><div id="event8small">
<!-- eruitgesloopt: geeft renderprobs:
<a class="edit" href="#"><img src="./icon.edit.gif" alt="edit"></a>
-->
    <span class="title">Singstaravond</span>
    16 mei

    </div>
    <div id="event8full" class="fullinfo">

    <h2>Singstaravond</h2>
    <p>blah</p>
    <ul>
        <li>Wanneer: <b>vrijdag 16 mei 2008</b> om <b>20u00</b></li>
        <li>Waar: <b>blah.</b></li>
        <li>Contact: <b>blah</b> blah</li>
    </ul>

    </li>
    etc

JavaScript:

var FullInfo = new Array();
FullInfo[6]    = 0;
FullInfo[7]    = 0;
FullInfo[8]    = 0;
// etc

function toggleCalendarDetail2(id)
{
    if (FullInfo[id] == 0)
    {
        top.document.getElementById("event"+id+"small").style.display = "none";
        top.document.getElementById("event"+id+"full").style.display  = "block";
        top.document.getElementById("event"+id+"full").parentNode.style.backgroundColor = "#FFFFFF";
        FullInfo[id] = 1;
    }
    else
    {
        top.document.getElementById("event"+id+"small").style.display = "block";
        top.document.getElementById("event"+id+"full").style.display  = "none";
        top.document.getElementById("event"+id+"full").parentNode.style.backgroundColor = "";

        FullInfo[id] = 0;
    }
}

[moozzuzz]

Aangezien de renderbug uiteindelijk ook voorkwam in de tweede oplossing (hide/show) heb ik voorlopig volgende JS, dat zelfs (volgens voorlopige testresults) met het floatend element geen problemen geeft. Het beest toont eigenlijk maximaal één "fullinfo" item (opzet: sluiten wat openstaat en dan 't nieuwe openen), wat IE6 blijkbaar wél verteert.

JavaScript:

function toggleCalendarDetail2(id)
{
    for (c in FullInfo) {
        if ( (FullInfo[c] == 1) && (id != c) ) {
            top.document.getElementById("event"+c+"small").style.display = "block";
            top.document.getElementById("event"+c+"full").style.display  = "none";
            top.document.getElementById("event"+c+"small").parentNode.style.backgroundColor = "";
            FullInfo[c] = 0;
        }
        if (c == id) {
            top.document.getElementById("event"+id+"small").style.display = "none";
            top.document.getElementById("event"+id+"full").style.display  = "block";
            top.document.getElementById("event"+id+"full").parentNode.style.backgroundColor = "#FFF";
            FullInfo[id] = 1;
        }
    }
}

hope this helps someone.