We Recommend

Pro JavaScript Techniques Pro JavaScript Techniques
Pro JavaScript Techniques is the ultimate JavaScript book for the modern web developer. It provides everything you need to know about modern JavaScript, and shows what JavaScript can do for your web sites. This book doesn't waste any time looking at things you already know, like basic syntax and structures.


Posted By

rolandog on 07/09/06


Tagged

html xhtml wordpress DOM comment preview innerHTML DOMparser


Versions (?)


Who likes this?

2 people have marked this snippet as a favorite

alvaroisorna
rolandog


Wordpress XHTML and HTML Comment Preview


Published in: JavaScript 


For a working demo in application/xhtml+xml or text/html, go to: http://rolandog.com/archives/2006/07/10/litebox-demasiado-bueno-para-ser-cierto/

You should delete the multi-line comments after completing the setup, some old browsers will complain about those.

  1. /* This script works in application/xhtml+xml or text/html documents.
  2. This script requires you to edit your WordPress Template's Comments file and Header file.
  3.  
  4. Modifications in the Header file:
  5. Place this script inside your 'head' element. You should delete these comments, when
  6. you're done with the setup.
  7.  
  8. Modifications to your Comments file:
  9. Above the 'Leave a Reply' sentenc, you'll need to place an empty 'div' with
  10. the an id like 'nocommentsyet':
  11. <div id="nocommentsyet"></div>
  12. You'll have to add an 'id' attribute like 'commentlist' to your 'ol' or 'ul'
  13. element that lists your comments. The result will be something like this:
  14. <ol id="commentlist" class="commentlist">
  15. You'll have to add an 'id' attribute like 'loggedin' to your anchor element
  16. that is almost at the end (next to a 'Logged in as' text). The beginning of
  17. the anchor element will look like:
  18. <a id="loggedin" href="<?php echo get_option('siteurl'); ?>
  19. Some WordPress templates don't set a class for their non-alternate comments...
  20. Only the 'alt' comments are styled, but since having class="" is an invalid
  21. markup syntax, you should set it to something like 'notalt':
  22. if ('alt' == $oddcomment) $oddcomment = 'notalt';
  23. After that, you have to set the onkeyup and onchange event attributes to
  24. the fields you want to monitor. For example, the 'author' field would look
  25. like:
  26. <input id="author" type="text" style="width:200px; color:#008000; background-color:#faf4f4; border-width:2px; border-color:#e0e0d0;" value="rolandog" onkeyup="previewcomment();" onchange="previewcomment();" />
  27. Next, you can set the names for your ids and other elements in these global variables:
  28. */
  29. var checkFor = "page";
  30. var previewId = "preview";
  31. var commentListId = "commentlist";
  32. var commentListClass = "commentlist";
  33. var loggedInId = "loggedin";
  34. var noCommentsYetId = "nocommentsyet";
  35. var altClassName = "alt";
  36. var notaltClassName = "notalt";
  37. var listType = "ol";
  38. var authorId = "author";
  39. var urlId = "url";
  40. var textAreaId = "comment";
  41.  
  42. function cleanWhitespace(someelement) {
  43. var element = document.getElementById(someelement);
  44. for (var i = 0; i < element.childNodes.length; i++) {
  45. var node = element.childNodes[i];
  46. if (node.nodeType == 3 && !/S/.test(node.nodeValue)) {
  47. element.removeChild(node);
  48. }
  49. }
  50. }
  51. function killsChildNodes(an_element) {
  52. while (an_element.hasChildNodes()) {
  53. if (!an_element.firstChild.hasChildNodes()) {
  54. var k = an_element.firstChild;
  55. an_element.removeChild(k);
  56. } else {
  57. killsChildNodes2(an_element.firstChild);
  58. }
  59. }
  60. }
  61. function killsChildNodes2(another_element) {
  62. while (another_element.hasChildNodes()) {
  63. if (!another_element.firstChild.hasChildNodes()) {
  64. var k2 = another_element.firstChild;
  65. another_element.removeChild(k2);
  66. } else {
  67. killsChildNodes(another_element.firstChild);
  68. }
  69. }
  70. }
  71. function killAllChildNodesFrom(bob) {
  72. if(document.getElementById(bob).hasChildNodes()) {
  73. killsChildNodes(document.getElementById(bob));
  74. }
  75. }
  76. function previewComment() {
  77. if(document.getElementById(commentListId)) {
  78. var commentlist = document.getElementById(commentListId);
  79. cleanWhitespace(commentListId);
  80. } else {
  81. var l = document.createElement(listType);
  82. l.setAttribute("id", commentListId);
  83. l.setAttribute("class", commentListClass);
  84. document.getElementById(noCommentsYetId).appendChild(l);
  85. var commentlist = document.getElementById(commentListId);
  86. }
  87. if(document.getElementById(previewId)) {
  88. var preview = document.getElementById(previewId);
  89. killAllChildNodesFrom(previewId);
  90. preview.parentNode.removeChild(preview.parentNode.lastChild);
  91. }
  92. var cclass = altClassName;
  93. if (commentlist.hasChildNodes()) {
  94. var lastcomment = commentlist.lastChild;
  95. if (lastcomment.getAttribute("class") == altClassName) {
  96. cclass = notaltClassName;
  97. }
  98. }
  99. var fsetbegin = '<fieldset><legend>Comment Preview<\/legend>';
  100. var fsetend = '<\/fieldset>';
  101. if(document.getElementById(loggedInId)) {
  102. var aname = document.getElementById(loggedInId).childNodes[0].nodeValue;
  103. aname = aname.toString();
  104. var url = location.href;
  105. } else {
  106. var aname = document.getElementById(authorId).value;
  107. var url = document.getElementById(urlId).value;
  108. }
  109. if(url == "") {
  110. var who = "<cite>" + aname + "<\/cite> Says:";
  111. } else {
  112. var who = "<cite><a href=\'" + url + "\'>" + aname + "<\/a><\/cite> Says:";
  113. }
  114. var li = document.createElement("li");
  115. li.setAttribute("id",previewId);
  116. li.setAttribute("class",cclass);
  117. var saidwhat = document.getElementById(textAreaId).value;
  118. if(document.getElementById(checkFor).namespaceURI) {
  119. saidwhat = saidwhat.replace(/\n/g, "<br \/>");
  120. var parser = new DOMParser();
  121. var doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + fsetbegin + who + '<br \/>' + saidwhat + fsetend + '<\/div>', 'application/xhtml+xml');
  122. var root = doc.documentElement;
  123. commentlist.appendChild(li);
  124. for (var i=0; i < root.childNodes.length; ++i) {
  125. commentlist.lastChild.appendChild(document.importNode(root.childNodes[i], true));
  126. }
  127. } else {
  128. saidwhat = saidwhat.replace(/\n/g, "<br>");
  129. commentlist.appendChild(li);
  130. document.getElementById(previewId).innerHTML = fsetbegin + who + "<br>" + saidwhat + fsetend;
  131. }
  132. }

Report this snippet 

You need to login to post a comment.