I have a very large table (horizontally speaking) on my webpage and I added a scrollbar using the "overflow-y: auto;" property on my CSS, which does what I want.

The problem is that this table is also quite tall (vertically) and I'd like to have a scrollbar both at the top and bottom of it.

I recently downloaded the following JS file: https://github.com/sniku/jQuery-doubleScroll/ to solve that issue.

I uploaded it on my child-theme directory under /js/ subfolder.

In my functions.php file, I added the following lines:

function dsb_adding_scripts() {
    wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' ); 

As recommanded in the github page, I also started the table as follows:

<div id="double-scroll"><table id="very-wide-element">

All of this does not work, in the end.

On the example file, it says that I should use the following code:

<script type="text/javascript">

However, this is not the proper way to work with WordPress (as seen on the codex) and this is why I did not use it.

Obviously, while switching from using the tag onto using the wp_enqueue_scripts function, there is something that I did wrong and I can't find out what.

Sorry if this seems obvious to you but I'm new to JS.

Thank you very much for your help and time.

  • What exactly is your question? What does not work? – fischi Feb 9 '16 at 15:56
  • This is a vanilla HTML/JS/CSS question. Why not just wrap the table in a div with a fixed width/height and overflow auto? width: 100%; height: 10em; overflow: auto; – TheDeadMedic Feb 9 '16 at 16:05
  • After you've loaded the js file you have to start the desired function. So of course you'll have to put the "$(document)..." inside the wp footer or header. Did you check if the JS file is loaded (source of the website)? – levelzwo Feb 9 '16 at 16:19
  • Have you checked your console for errors? – denis.stoyanov Feb 9 '16 at 17:05
  • Dear all, thank you for your help. My JS file is not included as there are two errors in the console. – Grégoire Llorca Feb 10 '16 at 8:53

You have to load your javascript Snippet inside your header.

You'll have to options:

  1. Edit your themes header.php and put the code before the closing tag
  2. Insert your code into the header with a custom function inside your functions.php
function my_custom_js() {
    echo '<script type="text/javascript">
// Add hook for front-end <head></head>
add_action('wp_head', 'my_custom_js');
  • 1
    That will not work with the version of jQuery included in WordPress, you have to change the first line to work with noConflict mode: jQuery(document).ready(function($){ – Milo Feb 9 '16 at 17:06
  • You're damn right, just edited the snippet – levelzwo Feb 9 '16 at 17:08
  • Thank you for your help. Isn't that proceeding against the Codex recommendation of using the "enqueue" function ? Or should I have both functions ? – Grégoire Llorca Feb 10 '16 at 8:55
  • The enqueue function is just for JS/CSS 'files' and not for snippets. Code Snippets have to be inserted inside the page. That depends on what kind of code you have. Some have to be inserted inside the <head> tag, some before the closing <body> tag and some can be inserted right into the content area of wordpress. If you're coding your own template just put that inside your <head> tag, don't need an extra function for that. – levelzwo Feb 10 '16 at 10:17
  • Thank you for your help. I am using it in a shortcode that creates an HTML table. At this point, this table is only called in two articles. Should I add the echo part of this snipet inside the shortcode function (in the functions.php file) ? If I understand correctly, I need the JS file, the enqueue functions and the snippet, in order for it to work ? – Grégoire Llorca Feb 10 '16 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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