How to: Add jScrollPane Scrollbars to WordPress Twenty Eleven Child Theme
Overview: Add iFrame-like scrolling to content, but only on specific pages
Solution: Create Page template and add jScrollPane jQuery
Live example: jScrollPane jQuery scrollbars on Body Conceptions
1. Download jScrollPane – Cross-browser styleable scrollbars with jQuery and CSS
2. Place Script and Style folders in child theme folder
3. Copy header.php file from Twenty Eleven, and add:
<!-- Start jScrollPane styling http://jscrollpane.kelvinluck.com/ --> <!-- styles needed by jScrollPane --> <link type="text/css" href="<?php bloginfo( 'stylesheet_directory' ); ?>/style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> <!-- latest jQuery direct from google's CDN --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"> </script> <!-- the mousewheel plugin - optional to provide mousewheel support --> <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/script/jquery.mousewheel.js"></script> <!-- the jScrollPane script --> <script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>/script/jquery.jscrollpane.min.js"></script> <!-- jScrollPane function --> <script type="text/javascript" id="sourcecode"> $(function() { $('.scroll-pane').jScrollPane( { autoReinitialise: true, /* Fix for scrollbars on Safari/Chrome WebKit. About page content wasn't scrolling all the way to the bottom. */ showArrows: true, verticalDragMinHeight: 10, verticalDragMaxHeight: 10, verticalGutter: 15, } ); }); </script> <!-- End jScrollPane styling http://jscrollpane.kelvinluck.com/ -->
4. Copy page.php file from Twenty Eleven, rename to iframe-page.php and make it a template file.
Add the following to the top of the file:
* Template Name: iFrame Template * Description: A Page Template that adds an iFrame to pages
Then, wrap get_template_part with the scroll-pane and box classes, like this:
<div class="scroll-pane box"> <?php get_template_part( 'content', 'page' ); ?> </div>
5. style.css file (this is NOT to style the scrollbars):
.box { float: right; height: 330px; overflow: auto; width: 490px; }
6. All scrollbar styling is done via jScrollPane’s stylesheet, located at: child theme > style > jquery.jscrollpane.css
i did alll steps but its not working 🙁