3

Removed previous description as it's not relevant now.

I started with fresh gatsby site and able to make jquery, bootstrap, wow and owl carousel work.

layout.js

import './expose'
import './main'

expose.js

import 'popper.js'
import 'bootstrap'
import 'animate.css/animate.min.css'
import WOW from 'wowjs/dist/wow.js';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';

new WOW(
    {
        offset: 100,
        mobile: true,
      }
).init();

main.js

;(function($){
    console.log('hello jquery')
    console.log($(window).width())

    /*-------------------------------------------------------------------------------
      Navbar 
    -------------------------------------------------------------------------------*/

    //* Navbar Fixed  
    function navbarFixed(){
        if ( $('.header_area').length ){ 
            $(window).scroll(function() {
                var scroll = $(window).scrollTop();   
                if (scroll){
                    $(".header_area").addClass("navbar_fixed");
                } else {
                    $(".header_area").removeClass("navbar_fixed");
                }
            });
        };
    };
    navbarFixed();

    var $animation_elements = $('.scroll_animation');
    var $window = $(window);

    function check_if_in_view() {
        console.log('check_if_in_view')
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
        var $element = $(this);
        var element_height = $element.outerHeight();
        var element_top_position = $element.offset().top;
        var element_bottom_position = (element_top_position + element_height);

        //check to see if this current container is within viewport
        if ((element_bottom_position >= window_top_position) &&
          (element_top_position <= window_bottom_position)) {
          $element.addClass('in-view');
        } else {
          $element.removeClass('in-view');
        }
      });
    }


    if($(window).width() > 576){
        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');
    }

    $('.owl-carousel').owlCarousel();

})(window.jQuery)

jquery sometimes work sometimes not.

Now, the issue is wowjs animation executes only once. Not able to run it again even If I refresh the page. owl carousel has the same issue. It appears once and then never appears back not even on page refresh. How do I make jquery code in main.js work all the time ? As the actual file has 1000 lines of jquery and jquery plugin code.

Valay
  • 1,991
  • 2
  • 43
  • 98

1 Answers1

1

You are defining WOW in layout.js and trying to use it in main.js. This won't work.

There are two possible solution to this:

1) Add import WOW from "wowjs" to main.js so that it's available in the scope of main.js(works only if main.js is being bundled by webpack). Also for me WOW is available in WOW.WOW variable(console and check accordingly).

2) Attach WOW to window by yourself in layout.js and use it anywhere. This is probably bad.

Update:

Attach WOW to window by yourself before importing main.js and use it anywhere.

Solution here(Check expose-wow.js and index.js imports)

Edit gatsby-starter-default

Ganapati V S
  • 1,571
  • 1
  • 12
  • 23
  • I tried to bundle `main.js` with `expose-loader` in webpack but it didn't work. – Valay Jan 21 '19 at 15:03
  • do I need to do the same for jquery, jquery.carousel, isotop etc.. ? – Valay Jan 22 '19 at 09:44
  • 1
    I don't think so. AFAIK jquery attaches by itself to `window`. If you see `ReferenceError: ... is not defined` outside, you can try using the same logic. Let me know if it works. – Ganapati V S Jan 22 '19 at 10:41
  • yes error for wowjs is gone. Now getting an error for `owl.carousel` - `TypeError: Cannot read property 'fn' of undefined`. I already have `new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }),` – Valay Jan 22 '19 at 15:46
  • can you show me how to use jquery, bootstrap, wow, owl.carousel, isotope in your solution ? – Valay Jan 22 '19 at 16:05
  • I am not sure of your project structure. But you can install npm modules for each of the libraries and import them inside file similar to `expose-wow.js` and expose it to `window`. see if it works. – Ganapati V S Jan 22 '19 at 16:14