Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am trying to use jQuery to display the comment-section of my Wordpress-pages, but without requiring that jQuery be present on all pages that allows comments. Basically, I need the following:

  1. A generic javascript implementation of the 'in view' jQuery-plugin (http://remysharp.com/2009/01/26/element-in-view-event-plugin/)
  2. A method of activating jQuery (core) when the div containing the comments come into view.

This would then load jQuery, which in turn would load the comments-section of the page, but only when that section became visible through the browser viewport.

The problem seems to be that I really cannot use 'wp_enqueue_script' (Wordpress' generic way of adding scripts) for this, as it is a PHP-function. Is there some method that would allow me to implement a functionality as described above (without breaking Wordpress/jQuery-functionality)?

EDIT: I need to enable jQuery only when the reader decides he wants to read comments (as opposed to only opening a page, seeing the title and leaving) - much in the style of Disqus. Disqus appears to be activated only when visible in the viewport, and I am assuming, at the same time the controlling Javascript is activated.

How would I do something like that in regular Javascript (activating jQuery), and then porting it to Wordpress?

share|improve this question

3 Answers 3

up vote 1 down vote accepted

After a LOT of googling, trying to find a solution at the same time as keeping up with the earthquake-situation in Japan, I found a way:

Two scripts for Wordpress

Using wp_enqueue_script, I added a DeferJS (https://github.com/BorisMoore/DeferJS), which allows scripts to be loaded onEvent. Also, a I added a custom-script that looks like this:

function gingah_comments_onLoad() {
    var element = document.getElementById("comments");
    var current = document.body.clientHeight+document.body.scrollTop;
    var target = element.offsetTop;
    if (current >= target) {
        $.defer("jquery-1.5.1.min.js", {
            bare: true 
        }).done(console.log('jquery-1.5.1.min.js loaded'));
        window.onscroll = null;
    }
}
window.onscroll = gingah_comments_onLoad;

Which basically does a quick check every time the viewer scrolls the page, to see if the target element ("comments") is reached. When it is in fact visible in the viewport, DeferJS loads jquery-1.5.1.min.js (and also drops a quick line into the console.log for verification). Also, when it became visible, the effect from scrolling was removed.

At this point, jQuery will be loaded and ready to use. This method does not, however, allow for use of the wp_enqueue_script-function to load jQuery (but it should be quite possible to extend it to not try to load it if already present). This is because of the obvious separation between PHP and JS.

I owe a lot of thanks to kaiser for his comments and suggestions on the method, so thank you very much for the help.

share|improve this answer
    
You're welcome. Pretty good solution +1. Too bad i can't add another +1 :) –  kaiser Mar 12 '11 at 15:27

After i understood what your Q is about, i got another A for you:

--> google for "never ending pages" javascript scripts.

Some example:
http://plugins.jquery.com/plugin-tags/neverending
http://plugins.jquery.com/project/in-viewport-event
http://plugins.jquery.com/project/infiniScroll

share|improve this answer
1  
I did manage to create a working sample using 'in view', and coupled together with something like lazyloader (code.google.com/p/lazyloader) the end-result would be as described. However, the problem is more how I lead up to that point: These plugins are great, but logically impossible as jQuery itself should be loaded alongside them, once the comments-section comes into the viewport. Ontop of all that, I need compliance with Wordpress, in order to not override the possibility of jQuery being included already. Am I perhaps asking far too much? –  OleVik Mar 11 '11 at 15:28
    
Someone who was a really good coder (back in the days ;) once told me: "You can describe every (non emotional) problem in math. Therefore you describe it in code too. So nothing is impossible to code." Problem is, that you're working with libraries inside libraries. Php already is one, WordPress a sub-library, your theme a sub-sub library, etc. Same goes for jQuery. The library is the limit. I'm the opposite of a javascript hero and mostly only understand what some plugin definitions are doing, so... sry, lonesome cowboy. It's your turn now. P.s.: 4 more points to allow you voting ;) –  kaiser Mar 11 '11 at 18:05
1  
I found a method using library-free javascript that allowed me to load jQuery without breaking Wordpress - I added it as an answer. –  OleVik Mar 11 '11 at 20:56

1. Register jQuery and the plugin within your head

wp_register_script( 'jquery' );
wp_register_script( 'your_jquery_plugin', STYLESHEETPATH, 'jquery', '0.0', false );

2. Register a meta box

It should be a simple checkbox. Please do it like it's described on the codex page for add_meta_box() (don't just repeat this one here). If you follow the rest, then the $id for the meta box should be 'jquery_comments'.

Example (shortened):
inside functions.php

    function add_jquery_comments_meta_box() {
       $id = 'jquery_comments';
       $title = __( 'jQuery Comments, please?', 'your_textdomain_string' );
       $context = 'side'; // advanced/normal also possible
       $priority = 'low'; // high also possible
       $callback_args = ''; // in case you want to extend it
       add_meta_box( $id, $title, 'add_jquery_comments_cb_fn', 'post', $context, $priority, $callback_args );
    }
    add_action( 'admin_init', 'add_jquery_comments_meta_box', 1 );

    // Prints the box content
    // Please adjust this to your needs - only slightly modified from codex example
    function add_jquery_comments_cb_fn() {
       // Use nonce for verification
      wp_nonce_field( basename(__FILE__), 'your_noncename' );

      // The actual fields for data entry
?>
      <label for="jquery_comments"><?php _e("Do you want jquery comments on this post?", 'your_textdomain_string' ); ?></label>
      <input type="checkbox" id="jquery_comments" name="jquery_comments" />
<?php
    }

3. enqueue the script based on your meta box as the condition

and then write a function like this in your functions.php file

function add_jquery_comments_plugin() {
   wp_enqueue_script( 'jquery' );
   wp_enqueue_script( 'your_jquery_plugin' );
}
// and call it depending on a conditional in the comment form hook
if ( get_post_meta($post->ID, 'jquery_comments', true) ) {
   add_action( 'comment_form', 'add_jquery_comments_plugin' );
}
share|improve this answer
1  
Forgive me if I am misunderstanding, but this would create a checkbox for each post (available at the Post-Writing screen) for allowing the functionality on a post-by-post basis? –  OleVik Mar 10 '11 at 23:56
    
Yes, that's exactly what it should do: creating a check box for the post edit screen (available for every post type of 'post') that would enqueue the script if the post meta data from your checkbox meta box is true. Voting up is always appreciated :) –  kaiser Mar 11 '11 at 1:11
1  
The answer is quite helpful, and I would vote it up if I had enough reputation. The checkbox will work very well, but will not solve the problem; I need to enable jQuery only when the reader decides he wants to read comments (as opposed to only opening a page, seeing the title and leaving) - much in the style of Disqus. Disqus is only activated when visible the the viewport, and I am assuming, at the same time the controlling Javascript is activated. How would I do something like that? –  OleVik Mar 11 '11 at 8:58
    
I voted you up as much as possible to give you some points (i guess 10/20 are required for basic stuff - try to answer some Qs to get some abilities). Ad your Q: The describtion in your comment is much more clear than the one in your Q. –  kaiser Mar 11 '11 at 9:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.