http://www.digitalnoon.com/blog/index.php en nikolai07@gmail.com Copyright 2009 2009-06-02T06:22:00-09:00 http://feedproxy.google.com/~r/digitalnoon/~3/LYw89FqQwaE/ http://www.digitalnoon.com/blog/articles/conversations_for_expressionengine/#When:06:22:00Z A nifty feature, the ability to directly quote or reply to a comment, is unfortunetly missing in ExpressionEngine. No worries, though: this can be easily added with jQuery. In this tutorial we will be looking at how to do just that. Getting Started A nifty feature that's available either as a plugin or natively in most CMS's, the ability to directly quote or reply to a comment, is unfortunetly missing in ExpressionEngine. No worries, though: this can be easily added with jQuery. In this tutorial we will be looking at how to do just that.If you would like to skip the tutorial you can view or download a barebones example. The Html & EE Code First, let's make our comment submission form.. <div id="reply"> {exp:comment:form} <label> <span> Name</span> <input type="text" name="name" value="{name}"/> </label> <label> <span> Email</span> <input type="text" name="email" value="{email}"> </label> <label> <span> Website</span> <input type="text" name="url" value="{url}"/> </label> <label> <span> Message</span> <textarea rows="6" cols="50" name="comment" id="commentbox"> </textarea> </label> <label class="submit"> <input type="submit" name="submit" value="send"/> </label> {/exp:comment:form} </div> And this is how we're going to structure our comments. Feel free to structure them as you wish, but keep in mind that you will have to tinker with the jQuery selectors we're going to use to make it fit your needs later on. Most importantly though, regardless of how you structure your comments, make sure to set the comment container's id to the comment id. <ol class="comments"> {exp:comment:entries} <li id="c_{comment_id}"> <span class="author"> <a href="{url}">{author}</a> wrote: </span> <p>{comment}</p> <a href="#reply" class="c_reply">Reply</a> <a href="#reply" class="c_quote">Quote</a> </li> {/exp:comment:entries} </ol> Adding the Reply Button Alright, now to put those quote & reply buttons to good use we will attach an onclick function to find the comment id and grab the author name, url, and comment and have it paste it into the comment textbox. Let's start by creating the function for the reply button: $(document).ready(function(){ $("a.c_reply").click(function() { }); }); Then find the comment id and author name and throw it into a variable var author = $(this).parents("li").find("span a").html(); var authlink = $(this).parents("li").attr("id"); And finally, spit the variables out into our comment textarea var text = $("textarea#commentbox").attr("value"); $('textarea#commentbox').attr("value",text+"<a href='#"+authlink+"'>@"+author+"</a>").focus(); Our final code should look something like this: $(document).ready(function(){ $("a.c_reply").click(function() { var author = $(this).parents("li").find("span a").html(); var authlink = $(this).parents("li").attr("id"); var text = $("textarea#commentbox").attr("value"); $('textarea#commentbox').attr("value",text+"<a href='#"+authlink+"'>@"+author+"</a>").focus(); ); }); Adding the Quote Button Now to make the quote button work. We'll start by adding the functionailty of the reply button: $(document).ready(function(){ $("a.c_quote").click(function() { var author = $(this).parents("li").find("span a").html(); var authlink = $(this).parents("li").attr("id"); var text = $("textarea#commentbox").attr("value"); }); }); Next, we'll grab the actual comment and put it into a variable: var quote = $(this).parents("li").find('p').text(); And finally, we'll grab any highlighted text and put it into a variable. We'll then replace the whole quote with only the part that is selected: if (window.getSelection) var selection = window.getSelection(); else if (document.getSelection) var selection = document.getSelection(); else if (document.selection) { var selection = document.selection.createRange().text; } if(selection!="") quote = selection; Our final code should look something like this: $("a.c_quote").click(function() { var author = $(this).parents("li").find("span a").html(); var authlink = $(this).parents("li").attr("id"); var text = $("textarea#commentbox").attr("value"); var quote = $(this).parents("li").find('p').text(); if (window.getSelection) var selection = window.getSelection(); else if (document.getSelection) var selection = document.getSelection(); else if (document.selection) { var selection = document.selection.createRange().text; } if(selection!="") quote = selection; $('textarea#commentbox').attr("value",text+"<a href='#"+authlink+"'>@"+author+"</a><cite>"+quote+"</cite>").focus(); }); Putting our code together we should have something that works like this example. You can also download the example here. Articles, Tutorials, ExpressionEngine, jQuery 2009-06-02T06:22:00-09:00 http://www.digitalnoon.com/blog/articles/conversations_for_expressionengine/#When:06:22:00Z http://feedproxy.google.com/~r/digitalnoon/~3/nNBI5khzloc/ http://www.digitalnoon.com/blog/articles/all_systems_go/#When:08:59:00Z For the past couple of months, between work & more work, I've been toying around with my very own site. The project, which remained neglected while collecting dust until a couple of weeks ago, is finally complete. For the past couple of months, between work & more work, I've been toying around with my very own site. The project, which remained neglected while collecting dust until a couple of weeks ago, is finally complete.Why the long wait? Well, While dealing with a marathon of clients the past couple of years through different agencies, I've been growing both as designer and a developer. With every completed project comes a series of stepping stones for improvment (commonly known as "mistakes"). With every project thrown into the "complete" pile, I went back to my own projects and started reworking them using my newly found knowledge. So between switching my website from TextPattern to Wordpress to ExpressionEngine, playing around with both MooTools and jQuery, and jumping around between 5 different designs, I finally settled on what you see today. This is my newly formed e-home where I plan on sharing my thoughts & experiences, tips, and tutorials. It's here. It's finished. Enjoy. Articles, Design 2009-05-31T08:59:00-09:00 http://www.digitalnoon.com/blog/articles/all_systems_go/#When:08:59:00Z