[JS /DOM] Paragraaf omgeven door quote gifjes

[Verwijderd]

Ik probeer van dit:

HTML:

<p class="quote">
  Dit is een quote. Als het goed is, wordt deze quote omgeven
  door twee plaatjes die de quote openen en sluiten...spannend!
</p>

dit te maken:

HTML:

<p class="quote"><img src="openquote.gif">
  Dit is een quote. Als het goed is, wordt deze quote omgeven
  door twee plaatjes die de quote openen en sluiten...spannend!
<img src="closequote.gif"></p>

met behulp van unobtrusive javascript:

JavaScript:

function wrapQuotes(className) {
  var paragraphs = document.getElementsByClassName(className);
  for (var i = 0; i < paragraphs.length; ++i) {
    var paragraph = paragraphs[i];
    var text = paragraph.firstChild;

    var openquote = document.createElement('img');
    openquote.src = "openquote.gif";
    paragraph.insertBefore(text, openquote);
    
    var closequote = document.createElement('img');
    closequote.src = "closequote.gif";
    paragraph.appendChild(closequote);
  }
}

Dit is alleen de relevante code. Ik heb de prototype functies hasClass en getElementsByClassName en een stukje code om wrapQuotes aan het body onload event te hangen

Het probleem: er gebeurt helemaal niets! Als ik de regels 7, 8 en 9 uitcommentarieer (?) wordt de closequote.gif wel toegevoegd. Wat doe ik nu fout?

[Verwijderd]

En als je doet

JavaScript:

text.insertBefore(text, openquote); 

insertBefore
Inserts a node into the childNodes array for the node before the specified child node.

appendChild
Appends a node to the childNodes array for the node

Maar kun je dit niet met wat css oplossen? De quote image als background-image, wat padding left, ...

[ Voor 14% gewijzigd door Verwijderd op 10-08-2007 14:18 ]

[crisp]

JavaScript:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

let op de volgorde van de argumenten

[OkkE]

Aangezien het hier (zo te zien) om een Blockquote gaat, is het netter om de volgende HTML te grbuiken:

HTML:

<blockquote>
<p>
  Dit is een quote. Als het goed is, wordt deze quote omgeven
  door twee plaatjes die de quote openen en sluiten...spannend!
</p>
</blockquote>

Verder zou ik geen afbeeldingen in je HTML zetten d.m.v. javascript, maar dit oplossen met CSS. De quote-afbeeldingen zijn tenslotte voor opmaak, en hebben niet direct een betekenis.

Over het javascript, weet ik zo snel niet. Wat geeft bijv. Firefox voor javascript melding? Wat geeft een alert(text); terug?

--

Als laatse zou ik je nog wat linkjes willen geven met informatie over hoe andere dit probleem hebben opgelost.

• http://www.webdesignerwal...als/simple-double-quotes/
• http://24ways.org/2005/swooshy-curly-quotes-without-images

[Verwijderd]

crisp schreef op vrijdag 10 augustus 2007 @ 14:19:

JavaScript:

var insertedElement = parentElement.insertBefore(newElement, referenceElement);

let op de volgorde van de argumenten

Nu werkt het perfect, dank je crisp!

JavaScript:

function wrapQuotes(className) {
  var paragraphs = document.getElementsByClassName(className);
  for (var i = 0; i < paragraphs.length; ++i) {
    var paragraph = paragraphs[i];
    var text = paragraph.firstChild;

    var openquote = document.createElement('img');
    openquote.src = "openquote.gif";
    var element = paragraph.insertBefore(openquote, text);
    
    var closequote = document.createElement('img');
    closequote.src = "closequote.gif";
    paragraph.appendChild(closequote);
  }
}

Ik weet dat velen een dergerlijk effect met css oplossen, maar dat gaat meestal ins de vorm van:

code:

<div>
  <div class="openquote"></div>
  De eigenlijke quote gaat hier
  <div class="closequote"></div>
</div>

En dat vind ik zo'n onnodig gehannes met div's dat ik dat niet per definitie beter of symantisch correcter vind dan wat ik hier doe

http://www.webdesignerwal...als/simple-double-quotes/ is wel een hele mooie manier, maar niet werkend in IE6 en dat gebruikt toch nog zo'n 40-50% van de mensen.

[Verwijderd]

dit is een blockquote, klaar. Daar moet sowieso een blockelement inzitten, bijvoorbeeld een p element (dat vergeten ze al in de link die je geeft). Dus is dit met css heel goed op te lossen (zonder gehannes en overbodige divs):

Cascading Stylesheet:

blockquote *:first-child {
  background-image: url('');
  background-position: top left;
  background-repeat: no-repeat;
}
blockquote {
  background-image: url('');
  background-position: bottom right;
  background-repeat: no-repeat;
}

[ Voor 4% gewijzigd door Verwijderd op 10-08-2007 15:14 ]

[Verwijderd]

Verwijderd schreef op vrijdag 10 augustus 2007 @ 15:12:
dit is een blockquote, klaar. Daar moet sowieso een blockelement inzitten, bijvoorbeeld een p element (dat vergeten ze al in de link die je geeft). Dus is dit met css heel goed op te lossen (zonder gehannes en overbodige divs):

Cascading Stylesheet:

blockquote *:first-child {
  background-image: url('openquote.gif');  // aangepast, zecco
  background-position: top left;
  background-repeat: no-repeat;
}
blockquote {
  background-image: url('closequote.gif'); // idem
  background-position: bottom right;
  background-repeat: no-repeat;
}

Dat werkt anders niet bij mij (in FF en IE7): de openquote wordt niet weergegeven

[OkkE]

Verwijderd schreef op vrijdag 10 augustus 2007 @ 15:31:
[...]

Dat werkt anders niet bij mij (in FF en IE7): de openquote wordt niet weergegeven

Heb je dan niet misschien een typfout gemaakt in de bestandsnaam van je opensings-quote? Want hier bij mij werkt het wel in Firefox en IE7. Het *:first-child werkt niet in IE6, maar als je daar gewoon p van maakt, werkt het prima.
Evt. kan je er een p.class van maken, om dubbele openins-quotes te voorkomen bij meer p's per blockquote.

[ Voor 4% gewijzigd door OkkE op 10-08-2007 16:22 ]