metafizzy

metafizzy

Delightful JS plugins

Member Since 10 years ago

Alexandria, VA

Experience Points
0
follower
Lessons Completed
0
follow
Best Reply Awards
44
repos
Activity
Nov
30
15 hours ago
started
started time in 9 hours ago
started
started time in 9 hours ago
Activity icon
fork

foow forked metafizzy/zdog

⚡ Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
foow Updated
fork time in 9 hours ago
started
started time in 14 hours ago
started
started time in 14 hours ago
Nov
29
1 day ago
started
started time in 16 hours ago
Activity icon
issue

wplit issue metafizzy/flickity

wplit
wplit

Metafizzy seems to be no more.

Just putting this up as I notice that people are still asking support questions, but recently this Tweet was put out.

Nothing said on here or the website, and licences are still for sale. But from what it says, I doubt there'll be answers to the support questions coming.

Screen Shot 2021-11-30 at 9 23 52 am
started
started time in 21 hours ago
started
started time in 1 day ago
started
started time in 1 day ago
Activity icon
issue

dsg1-wolf issue metafizzy/flickity

dsg1-wolf
dsg1-wolf

Flickity previous and next buttons not fully accessible (according to WAVE tool)

Heya! According to this tool ([https://wave.webaim.org/]), both the next and previous buttons are, even though there's an SVG generated and labelled with ARIA nomenclature, considered empty and a possible problem for people relying on screen readers.

Would it be a possible solution to add a title tag to the SVG itself so it may be considered well-formed and readable again?? I.e. for the "previous" button:

<button class="flickity-button flickity-prev-next-button previous" type="button" aria-label="Previous">
<svg class="flickity-button-icon" role="img" aria-describedby="prevCont" viewBox="0 0 100 100">
<title id="prevCont">Previous Content</title>
<path d="M 10,50 L 60,100 L 70,90 L 30,50 L 70,10 L 60,0 Z" class="arrow"></path>
</svg>
</button>

Regards, Tom

started
started time in 1 day ago
Activity icon
issue

wplit issue comment metafizzy/flickity

wplit
wplit

IOS 15 touch drag is not working properly

On new IOS 15 touch drag is not working properly

I tested on my website and flickity website too.

wplit
wplit

@kucherenko-ae, yep changing it to 4 seems to solve that.

But yes, there's the resize issue where if you start to scroll down the page while the carousel is still animating then safari will trigger the resize, and flickity will stop moving and instantly start back at the beginning. So something like this to prevent the resize from doing anything while the animation is happening, seems to get rid of that part.

var resize = Flickity.prototype.resize; Flickity.prototype.resize = function() { if (! this.isAnimating) { resize.call( this ); } };

Nov
28
2 days ago
started
started time in 1 day ago
started
started time in 2 days ago
started
started time in 2 days ago
started
started time in 2 days ago
Activity icon
issue

b3d0 issue metafizzy/isotope

b3d0
b3d0

Grid layout push into 1 column

Hey, I am stuck on problem with Isotope filter and oxyge builder. I tried lot of changes but still me page push 2 column grid layout push into 1 column. When i set grid-item {position: static!important;} push back to 2 column but animation of filtering looks really terible any advice please? https://kompliment.vojtyla.sk/test/

started
started time in 2 days ago
Nov
27
3 days ago
started
started time in 2 days ago
started
started time in 3 days ago
started
started time in 3 days ago
Nov
26
4 days ago
Activity icon
issue

tanyaburlakova issue metafizzy/infinite-scroll

tanyaburlakova
tanyaburlakova

Uncaught TypeError: Cannot read properties of undefined (reading 'option') at new InfiniteScroll

Hello team!

Could you please assist me with my problem?

`
import HelpersGTM from "../../app/helpers/gtm"
import LazyLoad from "vanilla-lazyload"
const InfiniteScroll = require("infinite-scroll")
const imagesLoaded = require("imagesloaded")

import * as R from "ramda"

const infiniteScrollSettings = {
  updatePath: function (pageIndex) {
    let path = document.querySelector("#navigation a").getAttribute("href")
    const objectOfParams = list => R.reduce((values, [key, value]) => {
      if (key !== "page") {
        values[key] = value
      }
      return values
    }, {})(list)
    const params = R.compose(
      objectOfParams,
      R.map(R.split("=")),
      R.split("&"),
      R.replace("?", ""),
    )(decodeURI(path.split("?")[1]))
    const queryString = R.join("&", R.map(key => key + "=" + params[key], R.keys(params)))
    path = `${path.split("?")[0]}?${queryString}&page=`
    return path + (pageIndex)
  },
}

const infiniteScrollContainer = document.querySelector(".infinite-scroll-jobs-list")

const myLazyLoad = new LazyLoad()

// make imagesLoaded available for InfiniteScroll
InfiniteScroll.imagesLoaded = imagesLoaded

let infScroll = new InfiniteScroll(infiniteScrollContainer, {
  hideNav: "#navigation",
  path: function() {
    let path
    let currentPage = this.loadCount + 1
    if (currentPage < infiniteScrollContainer.dataset.maxpage) {
      path = infiniteScrollSettings.updatePath(this.loadCount)
      HelpersGTM.trackVirtualPageView(path, `${document.title}. Page ${currentPage + 1}`)
    }
    return path
  },
  history: false,
  debug: true,
  scrollThreshold: 100,
  status: ".page-load-status",
  responseBody: "json",
  loadOnScroll: true,
})

let proxyElem = document.createElement("div")

infScroll.on("load", function(body) {
  if (infScroll.pageIndex > 0) {
    $("#similar-jobs-block-title").show()
  }
  proxyElem.innerHTML += body.data_html
  infiniteScrollContainer.append(proxyElem)
  myLazyLoad.update()
})

imagesLoaded(infiniteScrollContainer, function() {
  infScroll.loadNextPage()
})`

This is the code I have made to use InfiniteScroll

And it is working fine, but I have really many errors in the console log

Uncaught TypeError: Cannot read properties of undefined (reading 'option') at new InfiniteScroll (VM441194 core.js:37) at eval (VM440851 job-details-infinite-scroll.js:52) at Module../fbu/static/src/scripts/site/views/job-details-infinite-scroll.js (VM440850 job-details-infinite-scroll.js:900) at __webpack_require__ (VM440850 job-details-infinite-scroll.js:724) at VM440850 job-details-infinite-scroll.js:791 at VM440850 job-details-infinite-scroll.js:794

Do you have an idea what it can be?

Thank you! Screenshot 2021-11-27 at 00 34 06

Activity icon
issue

tanyaburlakova issue metafizzy/infinite-scroll

tanyaburlakova
tanyaburlakova

Uncaught TypeError: Cannot read properties of undefined (reading 'option') at new InfiniteScroll

Hello team!

Could you please assist me with my problem?

`import HelpersGTM from "../../app/helpers/gtm"

import LazyLoad from "vanilla-lazyload" const InfiniteScroll = require("infinite-scroll") const imagesLoaded = require("imagesloaded")

import * as R from "ramda"

const infiniteScrollSettings = { updatePath: function (pageIndex) { let path = document.querySelector("#1])) const queryString = R.join("&", R.map(key => key + "=" + params[key], R.keys(params))) path = ${path.split("?")[0]}?${queryString}&page= return path + (pageIndex) }, }

const infiniteScrollContainer = document.querySelector(".infinite-scroll-jobs-list")

const myLazyLoad = new LazyLoad()

// make imagesLoaded available for InfiniteScroll InfiniteScroll.imagesLoaded = imagesLoaded

let infScroll = new InfiniteScroll(infiniteScrollContainer, { hideNav: "#1 if (currentPage < infiniteScrollContainer.dataset.maxpage) { path = infiniteScrollSettings.updatePath(this.loadCount) HelpersGTM.trackVirtualPageView(path, ${document.title}. Page ${currentPage + 1}) } return path }, history: false, debug: true, scrollThreshold: 100, status: ".page-load-status", responseBody: "json", loadOnScroll: true, })

let proxyElem = document.createElement("div")

infScroll.on("load", function(body) { if (infScroll.pageIndex > 0) { $("#similar-jobs-block-title").show() } proxyElem.innerHTML += body.data_html infiniteScrollContainer.append(proxyElem) myLazyLoad.update() })

imagesLoaded(infiniteScrollContainer, function() { infScroll.loadNextPage() }) `

This is the code I have made to use InfiniteScroll

And it is working fine, but I have really many errors in the console log

Uncaught TypeError: Cannot read properties of undefined (reading 'option') at new InfiniteScroll (VM441194 core.js:37) at eval (VM440851 job-details-infinite-scroll.js:52) at Module../fbu/static/src/scripts/site/views/job-details-infinite-scroll.js (VM440850 job-details-infinite-scroll.js:900) at __webpack_require__ (VM440850 job-details-infinite-scroll.js:724) at VM440850 job-details-infinite-scroll.js:791 at VM440850 job-details-infinite-scroll.js:794

Do you have an idea what it can be?

Thank you!

started
started time in 4 days ago
started
started time in 4 days ago
started
started time in 4 days ago
started
started time in 4 days ago
Previous