Blancer.com Tutorials and projects

gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.create({
  trigger: ".page-0",
  start: "top top", 
  end: "bottom",
  pin: ".season"
});

ScrollTrigger.create({
  trigger: ".page-1",
  start: "top top", 
  end: "bottom",
  pin: ".winter"
});

ScrollTrigger.create({
  trigger: ".page-2",
  start: "top top", 
  end: "bottom",
  pin: ".summer"
});

ScrollTrigger.create({
  trigger: ".page-3",
  start: "top top", 
  end: "bottom",
  pin: ".spring"
});

ScrollTrigger.create({
  trigger: ".page-4",
  start: "top top", 
  end: "bottom",
  pin: ".fall"
});

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
*{
  margin: 0;
  padding: 0;
}
body{
  font-family: "Inter", sans-serif;
  filter: grayscale(100%);
}
.page{
  width: 100%;
  height: 100vh;
  position: relative;
}
.season{
  width: 100%;
  height: 100vh;
  background-image: url("https://static.vecteezy.com/system/resources/previews/036/226/450/non_2x/ai-generated-nature-landscapes-background-free-photo.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.winter{
  width: 100%;
  height: 100vh;
  background-image: url("https://wallpapers.com/images/hd/winter-scene-bridge-n3beaqbjiy0xvdbc.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.summer{
  width: 100%;
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/1450353/pexels-photo-1450353.jpeg?cs=srgb&dl=pexels-asadphoto-1450353.jpg&fm=jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.spring{
  width: 100%;
  height: 100vh;
  background-image: url("https://i.pinimg.com/736x/f5/9b/90/f59b90781e5248d6c5b522f1d3b6df21.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.fall{
  width: 100%;
  height: 100vh;
  background-image: url("https://images.pexels.com/photos/1114896/pexels-photo-1114896.jpeg?cs=srgb&dl=pexels-jplenio-1114896.jpg&fm=jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
#overflow{
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #000;
  opacity: 0.5;
}

h1{
  color: #fff;
  font-size: 14vw;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2vw;
  z-index: 10;
}

<div class="page-0 page">
  <div class="season">
    <div id="overflow"></div>
    <h1>Season</h1></div>
</div>
<div class="page-1 page">
  <div class="winter">
    <div id="overflow"></div>
    <h1>Winter</h1></div>
</div>
<div class="page-2 page">
  <div class="summer">
    <div id="overflow"></div>
    <h1>Summer</h1></div>
</div>
<div class="page-3 page">
  <div class="spring">
    <div id="overflow"></div>
    <h1>Spring</h1></div>
</div>
<div class="page-4 page">
  <div class="fall">
    <div id="overflow"></div>
    <h1>fall</h1></div>
</div>

When I apply a CSS filter property (such as filter: blur() or filter: grayscale()or other CSS filters.) to a top-level parent element like body, and then try to pin a child element using GSAP’s ScrollTrigger, the pinning stops working.

How can I apply a CSS filter to a parent element while still allowing GSAP’s pinning to work properly for its child elements?

codepen:https://codepen.io/bw_ky/pen/vEEYGYp

On mobile I have a fixed navbar, with closeable message banner(s) fixed below that – I’m adding marginBlockStart to the page wrapper in js – what I would like is to have the code run and re-run the calculation if a message banner is closed. Here’s my attempt:

// add a margin on page-wrapper to allow for banners at mobile size (fixed header)

function pageWrapperMargin() {

  const mediaQuery = window.matchMedia('(max-width: 1023px)')
  // Check if the media query is true
  if (mediaQuery.matches) {

    //  calculate height of any site banners
    
    let banners = document.getElementsByClassName("site-banner")
    let bannersHeight = 0 // Set an accumulator variable to `0`
    for (let i = 0; i < banners.length; i++) { // Loop through each element with the class "site-banner"
      bannersHeight += banners[i].offsetHeight // Add the height of the element to the accumulator variable (the total)
    }
    
    // Now set that as the pageWrapper margin
    const pageWrapper = document.querySelector(".pageWrapper")
    pageWrapper.style.marginBlockStart = bannersHeight + 'px'
  }
}
const button = document.querySelector('.banner__btn');
button.addEventListener('click', pageWrapperMargin); 

This isn’t working – without the function wrapping around and the event listener, the margin is correctly added (just not re-calculated on banner close).

I have been working on a collapsible vertical menu with Bootstrap 5 and JavaScript.

I needed to keep the vertical menu’s state – either collapsed or expanded – from one page to another.

For this purpose, I have used JavaScript’s sessionStorage, this way:

document.querySelector('.navbar-toggler').addEventListener("click", function(event) {
    event.preventDefault();
    if (Boolean(sessionStorage.getItem('sidebar-collapsed'))) {
        sessionStorage.setItem('sidebar-collapsed', '');
    } else {
        sessionStorage.setItem('sidebar-collapsed', '1');
    }
});

 document.addEventListener("DOMContentLoaded", function () {
     console.log(sessionStorage.getItem('sidebar-collapsed'))
    if(sessionStorage.getItem('sidebar-collapsed') == '1'){
        document.querySelector('.sidebar').classList.remove('show');
    } else {
        document.querySelector('.sidebar').classList.add('show');
    }
});

The problem I am faced with is that the menu is initialized as expanded and I need it collapsed initially.

Switching the if… else block in the click event function fails.

Where is my mistake?

Is it possible create intercompany purchase order to sales order
give me the exact solution

I want to create intercompany purchase order to sales order but its having some error like this

but I give the purchase order number also
You must create a purchase order first to transfer intercompany inventory.

Error in Scheduled Script: You must create a purchase order first to transfer intercompany inventory.

Choosing the right API development services provider is a critical decision that can significantly impact the performance, security, and scalability of your applications. Whether you’re building a custom solution from scratch or integrating with third-party systems, a reliable API partner ensures your business runs smoothly and efficiently.

const data = [
          { 
              "id": 'notes-jT-jjsyz61J8XKiI',
              "title": 'Welcome to Notes, Dimas!',
              "body": 'Welcome to Notes! This is your first note. You can archive it, delete it, or create new ones.',
              "createdAt": '2022-07-28T10:03:12.594Z',
              "archived": false,
          },
          { 
              "id": 'notes-aB-cdefg12345',
              "title": 'Meeting Agenda',
              "body": 'Discuss project updates and assign tasks for the upcoming week.',
              "createdAt": '2022-08-05T15:30:00.000Z',
              "archived": true,
          },
          { ...many more...}
        ] 

I have these kind of javascript object from public API, I want to filter object with the value true, so I could get 2 different data with object.archived==true and object.archived==false. How can I do that? I’ve been trying using filter and map method, both of it return undefined. How can I solve this?

I have a child component that returns a Pie chart

const coloredStats = [
        { id: 0, value: 5, label: 'Good tasks', color: 'success'},
        { id: 1, value: 4, label: 'Bad Tasks', color: 'error'} 
]

function MyPiechart(){
return (
  <PieChart
     series={[{
       data: coloredStats,
       innerRadius: 30,
       outerRadius: radius,               
       }, 
     ]}
  /> )}

The values success and error are taken from the default palette https://mui.com/material-ui/customization/palette/, I use them on my other components and I would like to use them on Pie Chart too due to my Parent component having a custom theme of which Im overriding the colors, and in case these color changes I would like to simply edit the ones in my theme instead of having to edit the hexcode inside of the piechart to match.

But instead of showing the colors like I expect them to I instead get the default color value, I know the theme is working since I already edited some values in the palette and they’re showing up correctly on my other components.

Is there a way to do it so that it follows the theme without manually writing the hex codes?

I would like to reach exactly the same effect as: https://www.ysl.com/en-gb

I reached exactly effect which I want but only on scrolling down, but on scrolling up it works wrong. Result of my work you can see on: https://codesandbox.io/p/sandbox/swiper-mousewheel-control-forked-cyzyhd

I think that the problem is with creativeEffect, but after a lot of try I really don’t know how can I do that.

I created an app using React Native and a backend with Django. And I want to integrate a VOIP to GSM into the mobile app where users call GSM phones via my mobile app (internet), so I was looking into using Media Streams – WebSocket Messages where my current flow is that users make a request to my backend with a phone number to call, I initiate calling with Twilio with a URL to call if the user picks up, so the URL returns an XML that tells Twilio to connect to a bidirectional media stream with my WebSocket, so that is how audio will be sent to and from Twilio to make the project happen. But look at this: I am trying my best to make this project as clean, best practice, and real-time as possible, so actually I will be sending audio and microphone tracks via WebSocket in real-time, so is there any method or function that I can call to grab the microphone and send natively and an audio track to play too in real-time within this library used in conference implementation?

I’m working on a Nuxt 3 project, and I’m experiencing an issue where NuxtLink components are not redirecting properly. Clicking on a NuxtLink does not navigate to the desired route, but using a classic tag works without any issues.

What I’ve Tried:

1. Verified that the routes exist in the pages/ directory.
2. I checked the browser console and found the following warnings:

[Warning] Timer "[nuxt-app] page:loading:start" already exists
[Warning] Timer "[nuxt-app] page:loading:end" already exists

3. Disabled pageTransition in nuxt.config.ts:
   pageTransition: false
   This did not resolve the issue.
4. Cleared the .nuxt directory and rebuilt the app:

rm -rf .nuxt
npm run dev

5. Tested with a minimal example:

<template>
  <NuxtLink to="/about">Go to About</NuxtLink>
</template>

The issue persists.
Relevant Code:
Here’s my nuxt.config.ts file:

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  runtimeConfig: {
    public: {
      GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS,
      CHATWAY: process.env.CHATWAY,
    },
  },
  css: ["/assets/css/main.css", "primeicons/primeicons.css"],
  devtools: { enabled: true },
  debug: true,
  modules: [
    "nuxt-swiper",
    "@nuxtjs/tailwindcss",
    "@primevue/nuxt-module",
    "@nuxt/icon",
    "@nuxt/fonts",
  ],
  app: {
    baseURL: "/",
    buildAssetsDir: "/_nuxt/",
    head: {
      link: [
        {
          rel: "icon",
          type: "image/x-icon",
          href: "https://example.com/img/Favicon-2/height=100",
        },
      ],
      title: "Nuxt App",
      charset: "utf-16",
      viewport: "width=device-width, initial-scale=1, maximum-scale=1",
      htmlAttrs: {
        lang: "en",
      },
    },
    pageTransition: { name: "page", mode: "out-in" },
  },
  nitro: {
    output: {
      publicDir: "dist",
    },
  },
});

I am not using any custom middleware.
The issue occurs across all pages.
Using tags works fine, but I want to use NuxtLink for client-side navigation and better performance.

What could be causing NuxtLink to fail while tags work? How can I debug or fix this issue?