CODEWITHSUNDEEP
javascriptphpjquerywordpressjquery-plugins
Bdanzer
Bdanzer

Reputation: 90

I am trying to get a jquery plug in to work on my wordpress site

I am trying to get this plug in to work: https://gopalraju.github.io/gridtab/#features . Here is the test site I am using: http://testing.bdanzer.com/ . I enqueued the files via the functions.php file and added the script tag in the footer.php. They show up enqueued on the site but the jquery plug in isn't working? Here is the code:

Functions.php file:

function bdanzer_scripts() {
    wp_enqueue_script( 'gridtabready.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtabready.js', array( 'jquery' ), '1.0.0', false );
    wp_enqueue_script( 'gridtab.js', get_stylesheet_directory_uri() . '/bdanzer/gridtab/gridtab.min.js', array( 'jquery' ), '1.0.0', true );
    wp_enqueue_style( 'gridtab.css', get_template_directory_uri() . '/bdanzer/gridtab/gridtab.min.css' );
}
add_action( 'wp_enqueue_scripts', 'bdanzer_scripts', 11);

Footer.php file:

<script>
      $(document).ready(function() {
          $('.gridtab-1').gridtab({
              grid: 6,
              tabPadding: 0,
              borderWidth: 10,
              contentPadding: 40,
              responsive: [{
                  breakpoint: 991,
                  settings: {
                      grid: 4,
                      contentPadding: 30
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 3,
                      contentPadding: 20
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 2
                  }
              }]
          });


          $('.gridtab-2').gridtab({
              grid: 4,
              config:{
                layout: 'tab'
              },
              callbacks: {
                  open: function() {
                      console.log('open');
                  },
                  close: function() {
                      console.log('close');
                  }
              },
              responsive: [{
                  breakpoint: 991,
                  settings: {

                      grid: 3,
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 2,
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 1,
                  }
              }]
          });
          $('.gridtab-3').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                showClose:true,
                showArrows:true,
              }
          });

          $('.gridtab-4').gridtab({
              grid: 6,
              tabPadding: 0,
              borderWidth: 10,
              contentPadding: 40,
              config:{
                scrollToTab:true,
                showClose:true,
                showArrows:true
              },
              responsive: [{
                  breakpoint: 991,
                  settings: {
                      grid: 4,
                      contentPadding: 30
                  }
              }, {
                  breakpoint: 767,
                  settings: {
                      grid: 3,
                  }
              }, {
                  breakpoint: 520,
                  settings: {
                      grid: 2
                  }
              }]
          });
          $('.gridtab-5').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                keepOpen:true,
                showClose:true,
                showArrows:true,
                scrollToTab:true,
              }
          });
          $('.gridtab-6').gridtab({
              grid: 3,
              config:{
                layout:'tab',
                activeTab:1,
                showClose:true,
                showArrows:true,
                scrollToTab:true,
              }
          });
      });
    </script>

Upvotes: 1

Views: 96

Answers (2)

Curiousdev
Curiousdev

Reputation: 5788

You have syntax error in gridtabready.js you didn't close .ready function please replace these js as below and it'll work fine

Take a look at this scrrenshot Screenshot

jQuery(document).ready(function() {

        jQuery('.gridtab-1').gridtab({
            grid: 4,
            tabPadding: 0,
            borderWidth: 10,
            contentPadding: 40,
            responsive: [{
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2,
                }
            }]
        });

        jQuery('.gridtab-2').gridtab({
            grid: 6,
            layout: 'tab',
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab'
            },
            responsive: [{
                breakpoint: 1024,
                settings: {
                    grid: 4,
                }
            }, {
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]
        });
        jQuery('.gridtab-3').gridtab({
            grid: 4,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 30
                }
            }]
        });
        jQuery('.gridtab-4').gridtab({
            grid: 6,
            borderWidth: 3,
            tabPadding: 0,
            contentPadding: 40,
            responsive: [{
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]

        });
        jQuery('.gridtab-5').gridtab({
            grid: 4,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1,
                keepOpen: true,
                showClose: true,
                showArrows: true,
                scrollToTab: true
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 30
                }
            }]
        });

        jQuery('.gridtab-6').gridtab({
            grid: 3,
            borderWidth: 3,
            tabPadding: 10,
            contentPadding: 40,
            config: {
                showClose: true,
                showArrows: true,
                layout: 'tab'
            },
            selectors: {
                tab: '.readmore',
                closeButton: '.closeBtn',
                nextArrow: '.nextBtn',
                prevArrow: '.prevBtn',
                disabledArrow: '.disabledBtn'
            },
            responsive: [{
                breakpoint: 600,
                settings: {
                    grid: 2,
                    contentPadding: 20
                }
            }, {
                breakpoint: 320,
                settings: {
                    grid: 1
                }
            }]

        });
        jQuery('.gridtab-7').gridtab({
            grid: 6,
            borderWidth: 3,
            contentPadding: 40,
            config: {
                layout: 'tab',
                activeTab: 1,
                rtl: true,
                showClose: true,
                showArrows: true
            },
            responsive: [{
                breakpoint: 1024,
                settings: {
                    grid: 4,
                }
            }, {
                breakpoint: 767,
                settings: {
                    grid: 3,
                    contentPadding: 20
                }
            }, {
                breakpoint: 520,
                settings: {
                    grid: 2
                }
            }]
        });
        });

Upvotes: 1

netscope234
netscope234

Reputation: 11

Check your functions.php file, seems like you have enqueued the scripts wrongly. If you take a look at the source code (ctrl+u in Chrome) of your testing page you will see the following script enqueued thus:

<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type="text/rocketscript" data-rocketsrc='http://testing.bdanzer.com/wp-content/themes/popperscores-master/bdanzer/gridtab/gridtabready.js?ver=1.0.0'></script>

First, your script type reads type="text/rocketscript" rather than "text/javascript". I'm not sure what you intend to achieve by that.

Secondly, you have a syntax error in calling script files from your server. You are referencing your scripts via data-rocketsrc='...' rather than src='...' You should take a look at that an all scripts you are referencing this way. perhaps this will help solve the problems.

Upvotes: 1

Related Questions