Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot read property '0' of undefined when used for nav companion hidden by watchCSS #9

Open
vittorius opened this issue Jul 1, 2020 · 3 comments

Comments

@vittorius
Copy link

Hello!

I have 2 sliders with the following setup:

    <div
      class="cover-slider"
      data-flickity='{ "asNavFor": "#featured_banners_body_slider", "fade": true, "draggable": false, "imagesLoaded": true, "pageDots": false, "prevNextButtons": false, "wrapAround": true, "setGallerySize": false, "accessibility": false, "watchCSS": true }'
    >
      <img
        class="featured_banner slide"
        src="60yuz98zo4_Flickery_Box.png"
        aria-hidden="true"
        style=""
      /><img
        class="featured_banner slide"
        src="4zdg7w9it0_Slide_2.png"
        aria-hidden="true"
        style=""
      />
    </div>

    <div
      id="featured_banners_body_slider"
      class="banner-body-slider card-body flickity-soft-edges flickity-soft-edges-white flickity-buttons-adjacent flickity-buttons-bottom-center"
      data-flickity='{"pageDots": false, "wrapAround": true, "watchCSS": true}'
    >
      <div
        id="featured_banner_33"
        class="featured_banner slide"
        aria-hidden="true"
        style=""
      >
        <em class="tagline">New documentary</em>
        <h3 class="heading">Enmity</h3>
        <div class="description">
          <p>
            Then war broke out in heaven. Michael and his angels fought against
            the dragon, and the dragon and his angels fought back. But he was
            not strong enough, and they lost their place in heaven.
          </p>
        </div>
        <a
          href="https://www.youtube.com/watch?v=VtjMGchgrqs"
          class="btn_watch_now btn-watch-now"
          data-fancybox=""
        >
          Watch Now
        </a>
      </div>
      <div
        id="featured_banner_34"
        class="featured_banner slide"
        aria-hidden="true"
        style=""
      >
        <em class="tagline">Old mockumentary</em>
        <h3 class="heading">The Day After</h3>
        <div class="description">
          <p>
            In an age where deceptions run loose and relativism is thriving, it
            is essential to stand tall as a light shining God’s unadulterated
            truth to the world.
          </p>
        </div>
        <a
          href="https://www.youtube.com/watch?v=7-wAzlqzXH0"
          class="btn_watch_now btn-watch-now"
          data-fancybox=""
        >
          Watch Now
        </a>
      </div>
    </div>

Both of them are hidden by setting content: '' upon a CSS breakpoint as described in the watchCSS manual.

When the page is being open with a viewport width already beyond that breakpoint, I get the following console error:

image

It doesn't hurt much and doesn't break anything within the sliders when they become enabled again, but I guess it's easy to fix.

@sadeghbarati
Copy link

watchCSS and asNavFor not compatible with each other I guess

@spburden
Copy link

@desandro any fix for this yet? watchCSS and asNavFor not compatible with each other.

@taylinlarge
Copy link

Does anyone have a work around for this issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

No branches or pull requests

4 participants