How do I incorporate jScrollPane into a Wordpress PHP header file?

Question

Can anyone give me a hand? This is for a charity event and coding clearly isn't my day job. The site is www.gingertown.org/wp

I don't understand where to put this line:

$(function() {
$('.scroll-pane').jScrollPane();
});

I also have a feeling I'm not calling the js correctly. From digging into wordpress

I modified my file to look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('&#124;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
</code></pre>

    <?php wp_enqueue_script("jquery"); ?>
    <?php wp_enqueue_script( 'sfhover', get_template_directory_uri() . '/js/sfhover.js' ); ?>
    <?php wp_head(); ?>

    <!-- the mousewheel plugin - optional to provide mousewheel support -->
    <script type="text/javascript" 
 src="script/jquery.mousewheel.js"></script>

    <!-- the jScrollPane script -->
    <script type="text/javascript" 
 src="script/jquery.jscrollpane.min.js"></script>



    </head>

Nick Craver · Accepted Answer · 2010-09-13 22:13:39Z

1

You should put it after the jscrollpane plugin is included, here:

<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>
<script type="text/javascript">
  jQuery(function($) {         //since your site is calling jQuery.noConflict()
    $('.scroll-pane').jScrollPane();
  });
</script>
</head>

edited Sep 13, 2010 at 22:13

answered Sep 13, 2010 at 22:03

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jason Over a year ago

Thanks. I had it there before, but it doesn't seem to do anything. The specific page that it should show on is gingertown.org/wp/?cat=142

Nick Craver Over a year ago

@Jason - Change $(function() { to jQuery(function($) { to fix the current error, can you update the live site with that?

Jason Over a year ago

I changed the live site. It still doesn't pick up anything other than the default scrollbar.

Nick Craver Over a year ago

@Jason - I'm getting a 404 for your script: gingertown.org/wp/script/jquery.jscrollpane.min.js So you're getting an error when trying to call .jScrollPane().

Jason Over a year ago

$(".scroll-pane").jScrollPane is not a function [Break on this error] $('.scroll-pane').jScrollPane({showArrows: true});

|

Collectives™ on Stack Overflow

How do I incorporate jScrollPane into a Wordpress PHP header file?

1 Answer 1

12 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Related