/ 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.
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.
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* This script works in application/xhtml+xml or text/html documents. This script requires you to edit your WordPress Template's Comments file and Header file. Modifications in the Header file: Place this script inside your 'head' element. You should delete these comments, when you're done with the setup. Modifications to your Comments file: Above the 'Leave a Reply' sentenc, you'll need to place an empty 'div' with the an id like 'nocommentsyet': <div id="nocommentsyet"></div> You'll have to add an 'id' attribute like 'commentlist' to your 'ol' or 'ul' element that lists your comments. The result will be something like this: <ol id="commentlist" class="commentlist"> You'll have to add an 'id' attribute like 'loggedin' to your anchor element that is almost at the end (next to a 'Logged in as' text). The beginning of the anchor element will look like: <a id="loggedin" href="<?php echo get_option('siteurl'); ?> Some WordPress templates don't set a class for their non-alternate comments... Only the 'alt' comments are styled, but since having class="" is an invalid markup syntax, you should set it to something like 'notalt': if ('alt' == $oddcomment) $oddcomment = 'notalt'; After that, you have to set the onkeyup and onchange event attributes to the fields you want to monitor. For example, the 'author' field would look like: <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();" /> Next, you can set the names for your ids and other elements in these global variables: */ var checkFor = "page"; var previewId = "preview"; var commentListId = "commentlist"; var commentListClass = "commentlist"; var loggedInId = "loggedin"; var noCommentsYetId = "nocommentsyet"; var altClassName = "alt"; var notaltClassName = "notalt"; var listType = "ol"; var authorId = "author"; var urlId = "url"; var textAreaId = "comment"; function cleanWhitespace(someelement) { var element = document.getElementById(someelement); for (var i = 0; i < element.childNodes.length; i++) { var node = element.childNodes[i]; if (node.nodeType == 3 && !/S/.test(node.nodeValue)) { element.removeChild(node); } } } function killsChildNodes(an_element) { while (an_element.hasChildNodes()) { if (!an_element.firstChild.hasChildNodes()) { var k = an_element.firstChild; an_element.removeChild(k); } else { killsChildNodes2(an_element.firstChild); } } } function killsChildNodes2(another_element) { while (another_element.hasChildNodes()) { if (!another_element.firstChild.hasChildNodes()) { var k2 = another_element.firstChild; another_element.removeChild(k2); } else { killsChildNodes(another_element.firstChild); } } } function killAllChildNodesFrom(bob) { if(document.getElementById(bob).hasChildNodes()) { killsChildNodes(document.getElementById(bob)); } } function previewComment() { if(document.getElementById(commentListId)) { var commentlist = document.getElementById(commentListId); cleanWhitespace(commentListId); } else { var l = document.createElement(listType); l.setAttribute("id", commentListId); l.setAttribute("class", commentListClass); document.getElementById(noCommentsYetId).appendChild(l); var commentlist = document.getElementById(commentListId); } if(document.getElementById(previewId)) { var preview = document.getElementById(previewId); killAllChildNodesFrom(previewId); preview.parentNode.removeChild(preview.parentNode.lastChild); } var cclass = altClassName; if (commentlist.hasChildNodes()) { var lastcomment = commentlist.lastChild; if (lastcomment.getAttribute("class") == altClassName) { cclass = notaltClassName; } } var fsetbegin = '<fieldset><legend>Comment Preview<\/legend>'; var fsetend = '<\/fieldset>'; if(document.getElementById(loggedInId)) { var aname = document.getElementById(loggedInId).childNodes[0].nodeValue; aname = aname.toString(); var url = location.href; } else { var aname = document.getElementById(authorId).value; var url = document.getElementById(urlId).value; } if(url == "") { var who = "<cite>" + aname + "<\/cite> Says:"; } else { var who = "<cite><a href=\'" + url + "\'>" + aname + "<\/a><\/cite> Says:"; } var li = document.createElement("li"); li.setAttribute("id",previewId); li.setAttribute("class",cclass); var saidwhat = document.getElementById(textAreaId).value; if(document.getElementById(checkFor).namespaceURI) { saidwhat = saidwhat.replace(/\n/g, "<br \/>"); var parser = new DOMParser(); var doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + fsetbegin + who + '<br \/>' + saidwhat + fsetend + '<\/div>', 'application/xhtml+xml'); var root = doc.documentElement; commentlist.appendChild(li); for (var i=0; i < root.childNodes.length; ++i) { commentlist.lastChild.appendChild(document.importNode(root.childNodes[i], true)); } } else { saidwhat = saidwhat.replace(/\n/g, "<br>"); commentlist.appendChild(li); document.getElementById(previewId).innerHTML = fsetbegin + who + "<br>" + saidwhat + fsetend; } }