Dear StackExchange community,
My goal is to add a second horizontal scrollbar on a very wide HTML table.
I have downloaded a JS file recently that I wanted to use it on my website: /
I uploaded it on my child-theme directory under /js/ subfolder.
In my functions.php file, I added the following lines:
// Ajout du script pour la double scrollbar
function dsb_adding_scripts() {
wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
wp_enqueue_script('doubleScroll');
}
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' );
And also
function my_custom_js() {
echo '<script type="text/javascript">jQuery(document).ready(function($){jQuery("#double-scroll").doubleScroll();});</script>';
}
add_action('wp_head', 'my_custom_js');
I had to comment out this function since it makes the whole website go blank.
Here is what my shortcode looks like:
// Shortcode for ARE
function display_ARE( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'id' => '',
), $atts )
);
// Initialisation de la table de droite
$echo .= '<div class="table_ARE" id="double-scroll"><table id="very-wide-element">';
// VERY HUGE HTML TABLE PARSED AS A $echo VARIABLE
// Conclusion de la table
$echo .= '</table></div>';
// Affichage du résultat
return $echo;
}
add_shortcode( 'ARE', 'display_ARE' );
In the console, I end-up with the following error:
Uncaught TypeError: $.widget is not a function
Dear StackExchange community,
My goal is to add a second horizontal scrollbar on a very wide HTML table.
I have downloaded a JS file recently that I wanted to use it on my website: https://github/sniku/jQuery-doubleScroll/
I uploaded it on my child-theme directory under /js/ subfolder.
In my functions.php file, I added the following lines:
// Ajout du script pour la double scrollbar
function dsb_adding_scripts() {
wp_register_script('doubleScroll', get_stylesheet_directory_uri() . '/js/jquery.doubleScroll.js', array('jquery'),'0.3', true);
wp_enqueue_script('doubleScroll');
}
add_action( 'wp_enqueue_scripts', 'dsb_adding_scripts' );
And also
function my_custom_js() {
echo '<script type="text/javascript">jQuery(document).ready(function($){jQuery("#double-scroll").doubleScroll();});</script>';
}
add_action('wp_head', 'my_custom_js');
I had to comment out this function since it makes the whole website go blank.
Here is what my shortcode looks like:
// Shortcode for ARE
function display_ARE( $atts ) {
// Attributes
extract( shortcode_atts(
array(
'id' => '',
), $atts )
);
// Initialisation de la table de droite
$echo .= '<div class="table_ARE" id="double-scroll"><table id="very-wide-element">';
// VERY HUGE HTML TABLE PARSED AS A $echo VARIABLE
// Conclusion de la table
$echo .= '</table></div>';
// Affichage du résultat
return $echo;
}
add_shortcode( 'ARE', 'display_ARE' );
In the console, I end-up with the following error:
Uncaught TypeError: $.widget is not a function
- Looks like $echo was never initialized before you started adding to it. Can you add '$echo = "";' before you start using 'echo .=' – jgraup Commented Feb 15, 2016 at 22:26
- Dear Jgraup, thank you for your help. Actually, I have reduced the code so that it is easier to read. Here is the full function : codepad/UEKcxchQ – Grégoire Llorca Commented Feb 16, 2016 at 11:16
1 Answer
Reset to default 1You're passing true as the $in_footer argument to wp_register_script(), but my_custom_js() is loading in the header. So doubleScroll is loading after the custom js.
I would put my_custom_js() in a separate javascript file so you can control the dependencies.
Create my_custom_js.js in the same place you have the double scroll script:
jQuery(document).ready(function($) {
$("#double-scroll").doubleScroll();
}
Then in your functions.php use:
function dsb_adding_scripts() {
wp_enqueue_script(
'doubleScroll',
get_template_directory_uri().'/js/jquery.doubleScroll.js',
array('jquery')
);
wp_enqueue_script(
'my_custom_js',
get_template_directory_uri().'/js/my_custom_js.js',
array('jquery', 'doubleScroll')
);
}
add_action('wp_enqueue_scripts', 'dsb_adding_scripts');