Adding Life To Threaded Comments With CSS/jQuery

Articles, Concept, Guide, Tips | on Oct. 12, 2011 | by 0 Comments

Whenever any content is put up, it has become an increasing practice to make the content more interactive with the readers. This interaction is enabled with the help of a comments section where a reader can comment on the section he has read and post this comment in the space given. Threaded comment would man this first comment would be followed by other readers who would give their feedback on the first comment. This is called threaded because these comments are interlinked to each other and the response is triggered from one comment to another.

WordPress typically has an excellent function which allows generation of an easy plug in which makes this comments box available under ‘Other comments setting’ section. It allows controlling of the levels of the conversation (how many responses does the web page creator want) and also moving or deleting of inappropriate comments. WordPress also allows a customizable HTML based admin section to create such threaded comment sections.

This section will briefly run you through how you can create such a threaded comment section using CSS and HTML code.

•    The main idea is to reduce HTTP requests to the server and control the number of files in one section. The Heading is at the top of the web page and inside this section will be the file ID “content”. This is where all the code will be written and stored. For a 3 page comment, the first comment sits inside the root node while the two are threaded replies. The container has all the comment information.
•    The container will consist of the username, date and time of posting, content and the reply within. For further internal comments, the division is left bank. This is how jQuery can be used to optimum levels to create threaded comments without having to refresh the page.
•    Each comment block has a unique ID feature to identify it and link appropriate threads to it.

DOM: Document Object Model

This is based on HTML structuring. JQuery allows access to each individual element and edit or amend information or add page elements without having to refresh the page each time. This is a tremendous saving of time and effort. Once the DOM is structured and ready, you can begin calling functions.

•    You can have small reply links after comments. jQuery allows triggers after each ‘reply’ link is clicked. This trigger sets off an internal function to display new comments on the screen.
•    Page variables can be initialized which can be attributed with repeated access. Remember that HTML form variables should be self explanatory and should contain all HTML data code to embed into the web page for any new comment. (Word Press allows notification of new comments to your email).

In short all WordPress features can be created by jQuery in a customized format for the user. It may seem very tough to work the code but actually it’s not that difficult to do.

 

Thumbnail

 

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Share and Enjoy:
  • Print
  • Digg
  • StumbleUpon
  • del.icio.us
  • Facebook
  • Yahoo! Buzz
  • Twitter
  • Google Bookmarks

Leave Your Response

* Name, Email, Comment are Required