Category: javascript

Categories
blog javascript locomotiveScroll

locomotiveScroll – overflow div

 locomotiveScroll.lenisInstance.options.content.addEventListener('wheel', (event) => {
   const paths = event.composedPath();
 
   const stopPropagationIfMatch = (selector) =>
     paths.some(el => el instanceof HTMLElement && el.matches(selector) && event.stopPropagation());
 
   stopPropagationIfMatch('.productView-images'); 
   stopPropagationIfMatch('.navPage-subMenu');
   stopPropagationIfMatch('.gallery-grid');
   stopPropagationIfMatch('.halfGrid');
   stopPropagationIfMatch('.productOptions-list');
   stopPropagationIfMatch('.quickSearchResults');
 });
Categories
blog javascript

emoji cursors!

Screenshot 2025 08 30 at 19.35.08

document.addEventListener("DOMContentLoaded", function() {
  // run only on archive/category pages
  if (!document.body.classList.contains("archive") || !document.body.classList.contains("category")) return;

  const emojis = [
    "🧸","🎈","🍭","🪁","🐻","🐼","🐨","🦄","🍦","🐰",
    "🌼","🌸","🌺","🌻","🌷",
    "🎨","🛷",
    "🍉","🍓","🌈"
  ];

  const articles = document.querySelectorAll("article.type-post");

  articles.forEach((article, i) => {
    // assign one emoji per article
    const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];

    // build and encode SVG containing the emoji
    const svg = `<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100">
                   <text y="80" font-size="80">${randomEmoji}</text>
                 </svg>`;
    const encoded = encodeURIComponent(svg);

    // make a unique class for this article
    const className = `emoji-cursor-${i}`;

    // create a style rule that applies the cursor to the article AND ALL ITS CHILDREN
    const styleEl = document.createElement('style');
    styleEl.textContent = `.${className}, .${className} * { cursor: url("data:image/svg+xml;utf8,${encoded}"), auto !important; }`;
    document.head.appendChild(styleEl);

    // toggle the class on hover so the cursor appears/disappears reliably
    article.addEventListener('mouseenter', () => article.classList.add(className));
    article.addEventListener('mouseleave', () => article.classList.remove(className));
  });
});
Categories
blog javascript js Swiper

Swiper Last slide space 

Screenshot 2023 02 18 at 12.21.51

adding slidePerView and SpaceBetween will solve it – slidesPerView: “1.5”

http://sumnima-clear.mybigcommerce.com/

var swiper = new Swiper(".swiper", {
    slidesPerView: 4,
    spaceBetween: 16,
    breakpoints: {
        320: {
            watchSlidesProgress: true,
            slidesPerView: "1.5",
            shortSwipes: false
        },
        500: {
            watchSlidesProgress: true,
            slidesPerView: "2",
            shortSwipes: false
        },
        1024: {
            preventInteractionOnTransition: true,
            watchSlidesProgress: true,
            slidesPerView: "4.5",
            shortSwipes: false
        },
    },
});