[JS/CSS] CSS regels werken niet met gegenereerde elementen.

[cyberstalker]

Op mijn website maak ik gebruik van opacity om bepaalde meldingen extra kracht bij te zetten. De meldingen worden buiten de hoofdcontainer gezet, en de hoofdcontainer wordt dan lichter gemaakt:

Cascading Stylesheet:

div#confirm + div#container
{
    opacity: 0.5;
}

Dit werkt prima wanneer ik met php de melding genereer. Sommige dingen kunnen echter clientside gegenereerd worden, en dan wil ik daar, vanwege snelheid, graag gebruik van maken .

Hier gaat het echter mis. Het element wordt op de juiste plek ingevoegd (precies hetzelfde als wanneer ik dat met PHP doe), echter de container wordt niet lichter.

De functie die ik gebruik om de melding aan te maken is als volgt:

JavaScript:

function requestConfirm(question, cancelHref, confirmHref)
{
    var div                     =   document.createElement('div');
    var close                   =   document.createElement('a');
    var img                     =   document.createElement('img');
    var p                           =   document.createElement('p');
    var pText                   =   document.createTextNode(question);
    var cancelLink              =   document.createElement('a');
    var cancelText              =   document.createTextNode('Annuleren');
    var confirmLink         =   document.createElement('a');
    var confirmText         =   document.createTextNode('OK');
    var body                        =   document.getElementsByTagName('body').item(0);
    var container               =   document.getElementById('container');
    
    div.setAttribute('id', 'confirm');
    
    close.setAttribute('class', 'close');
    close.setAttribute('title', 'Sluiten');
    close.setAttribute('href', cancelHref);
    div.appendChild(close);
    
    img.setAttribute('src', 'images/alert_icon.png');
    img.setAttribute('alt', 'Let op!');
    div.appendChild(img);
    
    div.appendChild(p);
    p.appendChild(pText);
    
    cancelLink.setAttribute('href', cancelHref);
    cancelLink.appendChild(cancelText);
    p.appendChild(cancelLink);
    
    confirmLink.setAttribute('href', confirmHref);
    confirmLink.appendChild(confirmText);
    p.appendChild(confirmLink);
    
    body.insertBefore(div, container)
}

Zoals je ziet wordt deze in de body precies voor de div#container ingevoegd, en zou het geheel dus moeten werken. Heeft iemand enig idee wat er mis gaat?

[ Voor 34% gewijzigd door cyberstalker op 17-07-2006 18:20 ]

[Verwijderd]

Ik denk dat variabele "body" een reserved word is want als ik dat hier test krijg ik als return waarde NULL.

JavaScript:

var body = document.body;
alert(body);

[cyberstalker]

Verwijderd schreef op zondag 16 juli 2006 @ 21:26:
Ik denk dat variabele "body" een reserved word is want als ik dat hier test krijg ik als return waarde NULL.

JavaScript:

var body = document.body;
alert(body);

Daarmee vraag ik het body element op. Dat werkt prima, aangezien de code gewoon netjes in het document verschijnt, dus daar zit sowieso het probleem niet .

[Victor]

Misschien dat ik het verkeerd zie, maar je maakt een anchor element genaamd "close" en geeft het als href attribuut nog een anchor element genaamd "cancelLink". Is dat de bedoeling?

Is het overigens niet handiger om die + selector gewoon weg te laten? Het gaat hier immers toch om unieke ID's, dus dan lijkt het me in dit geval een overbodige toevoeging. Zeker aangezien het zonder die selector wel werkt.

Overigens kun je beter geen document.body gebruiken, deze property bestaat naar mijn weten niet in een XHTML DOM.

[ Voor 62% gewijzigd door Victor op 17-07-2006 12:30 ]

[cyberstalker]

King_Louie schreef op maandag 17 juli 2006 @ 09:31:
Misschien dat ik het verkeerd zie, maar je maakt een anchor element genaamd "close" en geeft het als href attribuut nog een anchor element genaamd "cancelLink". Is dat de bedoeling?

Foutje inderdaad, bij deze aangepast .

Is het overigens niet handiger om die + selector gewoon weg te laten? Het gaat hier immers toch om unieke ID's, dus dan lijkt het me in dit geval een overbodige toevoeging. Zeker aangezien het zonder die selector wel werkt.

Nee, zonder die selector werkt het helaas niet. Deze zorgt er namelijk voor de wanneer mijn php-code een div#notice uitspuugt voor de div#container, de container lichter wordt. Dit gebeurt dus zeker niet altijd .

Overigens kun je beter geen document.body gebruiken, deze property bestaat naar mijn weten niet in een XHTML DOM.

Dat wist ik nog niet, maar is bij deze ook aangepast. Bedankt voor de tips.

[matthijsln]

Ik denk dat het met je + selector te maken heeft. Ik heb even een klein testcaseje gemaakt en met Opera 9 wordt #container wel opaque, met Firefox niet (IE6 laten we maar helemaal buiten beschouwing). Met Opera werkt het trouwens niet wanneer je een div tussen #notice en #container hebt en die div verwijdert, maar dat terzijde

Het lijkt mij dus dat CSS rules met + selector door de browser niet goed worden gereapplied wanneer de DOM tree is veranderd (wel vreemd trouwens, want een rule zoals

Cascading Stylesheet:

input[type="checkbox"]:checked + label{
    font-weight: bold;
}

werkt wel in Firefox en Opera wanneer je de checkbox checkt of uncheckt).

Je kan natuurlijk de volgde workaround doen:

JavaScript:

/* bij toevoegen notice: */
document.getElementById("container").style.opacity = 0.5;

/* bij closen van notice: */
document.getElementById("container").style.opacity = 1.0;

[cyberstalker]

Handmatig de opacity instellen doe ik liever niet. Als ik dan de CSS aanpas, moet ik ook de javascript aanpassen, en dat wil ik voorkomen als dat mogelijk is.

En dat het met een input wel werkt, ligt waarschijnlijk aan dat het element al bestaat, misschien maakt dat nog uit.

[Totalmind]

als je zo met css zit kun je beter opacity zowiezo skippen, aangezien het proprietary is, toch?

[ Voor 25% gewijzigd door Totalmind op 17-07-2006 22:52 ]

[cyberstalker]

Totalmind schreef op maandag 17 juli 2006 @ 22:52:
als je zo met css zit kun je beter opacity sowieso skippen

Sorry, die opmerking begrijp ik even niet. Waarom zou ik precies opacity moeten skippen? Sowieso is opacity geen proprietary extension, maar gewoon een CSS3 functie .

[ Voor 14% gewijzigd door cyberstalker op 17-07-2006 22:54 ]

[crisp]

cyberstalker schreef op maandag 17 juli 2006 @ 22:53:
[...]

Sorry, die opmerking begrijp ik even niet. Waarom zou ik precies opacity moeten skippen? Sowieso is opacity geen proprietary extension, maar gewoon een CSS3 functieproperty .

[cyberstalker]

crisp schreef op maandag 17 juli 2006 @ 22:58:
[...]

Post dan gewoon de oplossing .

[crisp]

cyberstalker schreef op maandag 17 juli 2006 @ 23:14:
[...]

Post dan gewoon de oplossing .

Die is er niet; dit lijkt mij een bug in Firefox

Simpele testcase:

HTML:

<html>
<head>
<style type="text/css">

p {background-color:red;}
p + p {background-color:yellow;}

</style>
<body>
<p id="p2">paragraaf 2</p>

<script type="text/javascript">

var p = document.createElement('p');
p.appendChild(document.createTextNode('paragraaf 1'));
document.getElementsByTagName('body')[0].insertBefore(p, document.getElementById('p2'));

</script>
</body>
</html>

werkt prima in Opera (9), misschien kan iemand nog even in Safari of IE7 - beta 3 testen?

[ Voor 58% gewijzigd door crisp op 17-07-2006 23:42 ]

[Totalmind]

Ah, mooi, wist niet dat dat ook was opgenomen in css3

[matthijsln]

cyberstalker schreef op maandag 17 juli 2006 @ 22:49:
Handmatig de opacity instellen doe ik liever niet. Als ik dan de CSS aanpas, moet ik ook de javascript aanpassen, en dat wil ik voorkomen als dat mogelijk is.

Dan kan je met JavaScript de className property aanpassen en opacity nog in je stylesheet houden, dus ipv + selector maak je een aparte class aan.

[XWB]

crisp schreef op maandag 17 juli 2006 @ 23:37:
[...]

Die is er niet; dit lijkt mij een bug in Firefox

Simpele testcase:

HTML:

<html>
<head>
<style type="text/css">

p {background-color:red;}
p + p {background-color:yellow;}

</style>
<body>
<p id="p2">paragraaf 2</p>

<script type="text/javascript">

var p = document.createElement('p');
p.appendChild(document.createTextNode('paragraaf 1'));
document.getElementsByTagName('body')[0].insertBefore(p, document.getElementById('p2'));

</script>
</body>
</html>

werkt prima in Opera (9), misschien kan iemand nog even in Safari of IE7 - beta 3 testen?

In IE7 beta 3 werkt het niet

[crisp]

Hacku schreef op dinsdag 18 juli 2006 @ 00:49:
[...]


In IE7 beta 3 werkt het niet

mooi, het zou toch zonde zijn als IE7 het in dit geval beter zou blijken te doen dan Firefox

[Victor]

Testcase werkt niet in Safari 2.0.4

[chem]

voeg aan crisp' test case toe:

HTML:

document.body.style.display = 'none';
document.body.style.display = 'block';

en het werkt wel

oud truukje om ff opnieuw te laten 'renderen'

voor WebKit heb ik maar een bugreport gedaan, aangezien King_Louie daar blijkbaar geen zin in had

[ Voor 46% gewijzigd door chem op 18-07-2006 13:14 ]

[Victor]

chem schreef op dinsdag 18 juli 2006 @ 12:56:
aangezien King_Louie daar blijkbaar geen zin in had

Ik was niet bekend met deze site, dus een verwijt is niet nodig.

[chem]

King_Louie schreef op dinsdag 18 juli 2006 @ 13:50:
[...]

Ik was niet bekend met deze site, dus een verwijt is niet nodig.

Zo was/is het niet bedoeld... maar wellicht toch handig om te weten dat je dergelijke bugs ook 'gewoon' kan melden en dat er iets mee gedaan wordt.

[Victor]

chem schreef op dinsdag 18 juli 2006 @ 15:28:
[...]

Zo was/is het niet bedoeld...

Ah, dan vatte ik het verkeerd op

maar wellicht toch handig om te weten dat je dergelijke bugs ook 'gewoon' kan melden en dat er iets mee gedaan wordt.

Staat al gebookmarked, zal eventuele vondsten daar zeker melden.

[cyberstalker]

Ik zie nu dat het voor Mozilla al sinds 2004 op de buglist staat. Lijkt me niet dat het dus spoedig zal worden opgelost .

https://bugzilla.mozilla.org/show_bug.cgi?id=229915

[chem]

cyberstalker schreef op woensdag 19 juli 2006 @ 00:19:
Ik zie nu dat het voor Mozilla al sinds 2004 op de buglist staat. Lijkt me niet dat het dus spoedig zal worden opgelost .

https://bugzilla.mozilla.org/show_bug.cgi?id=229915

mijn oplossing is toch een bruikbare workaround? for the moment, that is?