How to integrate jquery code into my blog

  • Resolved ryanjk333

    (@ryanjk333)


    12 years, 6 months 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;
        }
    });

});
Viewing 6 replies - 1 through 6 (of 6 total)

  • This may be helpful:
    https://codex.www.ads-software.com/Using_Javascript

    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

    Thread Starter ryanjk333

    (@ryanjk333)

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

    Resolved.

    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

    Thread Starter ryanjk333

    (@ryanjk333)

    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.

    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘How to integrate jquery code into my blog’ is closed to new replies.