WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to integrate jquery code into my blog (7 posts)

  1. ryanjk333
    Member
    Posted 1 year ago #

    Hi All,

    I believe this is my first post here, so my apologies if this is in the wrong place.

    I just have what I think should be an easy question for all of you. I came across the following jquery code that'll allow visitors to my site to navigate back and forth between posts using the left and right arrow keys on their keyboard. My site is set up for single post pages. Could someone please tell me what to do with this code to make it work? Thanks in advance!

    $(document).ready(function () {
    
        $(document).keydown(function(e) {
            var url = false;
            if (e.which == 37) {  // Left arrow key code
                url = $('.prev a').attr('href');
            }
            else if (e.which == 39) {  // Right arrow key code
                url = $('.next a').attr('href');
            }
            if (url) {
                window.location = url;
            }
        });
    
    });
  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

  3. Digital Raindrops
    Member
    Posted 1 year ago #

    This is really Cool!

    Create a new folder in the themes folder: /js/
    Create a file in the new folder: jquery.navigate.js

    This works and was tested in a Twenty Eleven Child Theme, navigation classes .nav-previous and .nav-next

    Add this to jquery.navigate.js, note: the new start and ending lines!

    (function($){
    	$(document).ready(function () {
    		$(document).keydown(function(e) {
    			var url = false;
    			if (e.which == 37) {  // Left arrow key code
    				url = $('.nav-previous a').attr('href');
    			}
    			else if (e.which == 39) {  // Right arrow key code
    				url = $('.nav-next a').attr('href');
    			}
    			if (url) {
    				window.location = url;
    			}
    		});
    	});
    })(jQuery);

    In functions.php add!

    /* Add the Javascript */
    $path = get_stylesheet_directory_uri() .'/js/';
    wp_enqueue_script('post-navigation', $path.'jquery.navigate.js', array('jquery'));

    HTH

    If this is what you want, remember to mark the topic as Resolved!

    David

  4. ryanjk333
    Member
    Posted 1 year ago #

    You're awesome, David! Thanks a million. Your instructions worked flawlessly.

    Resolved.

  5. Digital Raindrops
    Member
    Posted 1 year ago #

    It is a nice little bit of code.

    Can you set the topic status as resolved, there is a dropdown box on the right!

    This Topic is:
    [ Not Resolved ]
    ( Change )

    David

  6. ryanjk333
    Member
    Posted 1 year ago #

    Hmmm....when I made my last reply, I checked the "Mark this topic as resolved" checkbox below the reply window. Apparently that didn't do it. I'll try the dropdown on the side now. Apologies, and thanks again.

  7. Digital Raindrops
    Member
    Posted 1 year ago #

    I have written a post with this code, the twenty eleven child theme I tested with is a download in the post.

    It might help other readers of this topic, to add the code to their own themes.

    David

Topic Closed

This topic has been closed to new replies.

About this Topic