Using jquery to implement the @ ID suspension display comment content in WordPress _jquery

For example: A message, B with @ replied to A, so B's reply may be like this:

@a
How much did you have?

That is, when the mouse hovers over the @a, a comment is displayed in a suspended area.

Implementation steps
Here we will take the Inove theme as an example to explain.
1. Save the following code as Commenttips.js:

JQuery (document). Ready (
 function () {
 var id=/^ #comment-/;
 var at=/^@/;
 jquery (' #thecomments li p a '). each (
  function () {
  if (jquery). attr (' href '). Match (ID) && jQuery ( This). Text (). Match (in) {
   jQuery (this). addclass (' atreply ');
  }
  }
 );
 jquery ('. atreply '). Hover (
  function () {
  jquery (jquery (this). attr (' href ')). Clone (). Hide (). InsertAfter ( jquery (This). Parents (' Li ')). attr (' id ', '). addclass (' Tip '). fadeIn;
  }, 
  function () {
  jQuery ('. Tip '). fadeout (function () {jQuery (this). Remove ();});
 jquery ('. atreply '). MouseMove (
  function (e) {
  jQuery ('. Tip '). css ({left: (e.clientx+18), Top: (e.pagey+18)} )
  }
 );
 }
)

2. Place the Commenttips.js file in the Inove/js directory.

3. STYLE.CSS append the style code as follows:

#thecomments. Tip {
 background: #FFF;
 border:1px solid #CCC;
 width:605px;
 padding:10px!important;
 padding:10px 10px 0;
 margin-top:0;
 Position:absolute;
 Z-index:3;
}
#thecomments. Tip. Act {
 display:none;
}
*+html #thecomments. Tip {
 padding:10px 10px 0!important;
}

4. Add code to the theme to call JavaScript. With templates/end.php Open, add the following code to the </body> line above:
(If you have another plugin or you've already added JQuery libraries, the first line of code doesn't have to be added.)

<script type= "Text/javascript" src= "Http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" ></ Script>
<script type= "Text/javascript" src= "<?php bloginfo (' Template_url ');? >/js/commenttips.js" ></script >
5. Ok, refresh the page with @ reply, and so on the page loaded, hover the mouse over the @ reply, you will see the effect.

Why can't I show it across pages?
because it works, when the mouse moves to @{username}, find the corresponding comment on this page and insert it into the list of comments, showing it in absolute position. If the comment is not on this page, the object cannot be found, and of course there is no later processing.

How do I get comment information across pages?
If this page does not find a corresponding comment, you can use AJAX to return the comment information in the background to the page by using the ID of the comment. When the mouse moves to the @ comment, the user is suspended to display ' Loading ... ' Prompt box, if the action succeeds in inserting the comment found to the last side of the comment list and substituting the content of the comment to ' Loading ... ' Box.
That is, the comments that have been loaded remain on this page, and the mouse moves to the @ comment again without reloading.
Let's take a look at how to deal with the spread comments:

How do I find the corresponding comment on the current page via @{username}?

1. Each comment will have an ID, structure such as: Comment-{commentid}, this is to facilitate the use of anchor points to find comments, but also to complete the @ comment hint of the necessary conditions.
2. Each @{username is actually an anchor point to the comment, and the comment ID can be obtained naturally.

So in fact very simple, if the comment ID is _commentid, then in JS can be found in the following code corresponding comments.

document.getElementById (_commentid);

If you can find a target comment, create a hidden temporary comment and use the target comment as its content and display it in the @{username} attachment; If a target comment is not found, the corresponding comment is searched through the ID to the background for the Cross page processing.

How do I load comments across pages?

The essence of the spread is dynamically loading the comments, appending the comments to the comment list, so that the comments can be found on this page, except that the comments are processed by CSS and are not displayed.

Refer to the figure below. If the comment is not on this page, the red path will follow, and after the comment is added to the current page, there will be an action to replace the Loading information of the balloon with the comment content. When the user hovers the mouse over this @{username}, the comment is on the current page, so there is no need to load it again, but take the green path and pull up the comment prompt box directly.

Note: The blue part of the figure is background processing, and the yellow part is the focus of the entire loading process.

How do I get comments and format them in the background?

Here you can write a method to format the comments, or you can get the formatted HTML by commenting on the callback method (WordPress 2.7 or above, which can define the comment's callback method).

$comment = get_comment ($_get[' id '));
Custom_comments ($comment, null,null);

Note: Custom_comments is the method name of my callback function.

JavaScript Code

Based on the JQuery JS code, if not use or use other JS frame, according to the treatment of the idea of their own transformation. It is recommended that you place your code below the list of comments.

var id=/^ #comment-/;
var at=/^@/; jquery (' #thecomments li p a '). each (the function () {if (jquery). attr (' href '). Match (ID) && jQuery (this). Text ()
 . Match (at)} {jQuery (this). addclass (' atreply ');
}
});
 JQuery ('. atreply '). Hover (function () {var target = this;
 
 var _commentid = JQuery (this). attr (' href '); if (jquery (_commentid). is ('. Comment ')) {jquery (' <li class= ' comment tip ' ></li> '). Hide (). html (jquery (_
 Commentid). HTML ()). Appendto (JQuery (' #thecomments ')); jquery (' #thecomments. Tip '). css ({left:jquery (). Cumulativeoffset (this) [0] + jquery (this). Width () + top:jquery (). c
 Umulativeoffset (this) [1]-() fadeIn ();
 else {var id = _commentid.slice (9);
  Jquery.ajax ({type: ' Get ', url: '? action=load_comment&id= ' + ID, cache:false, dataType: ' HTML ' , ContentType: ' Application/json; Charset=utf-8 ', beforesend:function () {jQuery (' <li class= ' comment tip ' ></li> '). Hide (). html (' <p class = "Ajax-loader msg" >loading...</p> '). Appendto (JQuery (' #thecomments ')); jquery (' #thecomments. Tip '). css ({left:jquery (). Cumulativeoffset (target) [0] + jquery (target). Width () + Top:jquer
  Y (). Cumulativeoffset (target) [1]-}). FadeIn ();
  }, Success:function (data) {var addedcomment = jQuery (data + ' </li> ');
  Addedcomment.hide (). Appendto (JQuery (' #thecomments '));
  JQuery (' #thecomments. Tip '). html (addedcomment.html ()); 
  }, Error:function () {jQuery (' #thecomments. Tip '). html (' <p class= ' msg ' >oops, failed to load data.</p> ');
 }
 });
 }, Function () {jquery (' #thecomments. Tip '). fadeout (function () {jquery (this). Remove ();
});
 });

PHP Code

This code is from the PHILNA2 topic, and it is recommended that you append the code to function.php.

function Load_comment () {
 if ($_get[' action '] = = ' load_comment ' && $_get[' id '!= ') {
 $comment = get_ Comment ($_get[' id '));
 if (! $comment) {
  fail (' whoops! Can\ ' t find the comment with ID%1 $ S ', $_get[' id '])
 
 Custom_comments ($comment, null,null);
 Die ();
 }
Add_action (' init ', ' load_comment ');