I am trying to add the height of the iframe dynamically based on the content it has on the external URL using Javascript. But it is not working as expected and I could see some fixed height or excess space available in the screen.

HTML Code:

<div class="iframe-container iframe-container--" data-theme="drupal">
  <iframe class="iframe-container__inner" id="friendsgiving" src="https://cesar-canine-cuisine.campaign.playable.com/cesarfriendsgiving" title="Friendsgiving" scrolling="no" marginheight="0" frameborder="0"></iframe>
</div>

var iframeContainerInnerList = document.querySelectorAll('.iframe-container__inner');
iframeContainerInnerList.forEach(iframeContainerInner => {
var html = iframeContainerInner.contentWindow.parent.document.documentElement;
iframeContainerInner.style.height = html.clientHeight + 'px';
});

This approach gives me the entire window height where I could see empty space in the screen as the content in the external URL is very less.

Second approach:

var iframe = document.getElementById("friendsgiving");
var newheight;
var newwidth;
if(iframe) {
 newheight = iframe.contentWindow.document .body.scrollHeight;
 newwidth = iframe.contentWindow.document .body.scrollWidth;
}
iframe.height = (newheight) + "px";
iframe.width = (newwidth) + "px";

In this approach the parent height is set as 150px and the content’s are getting hidden below

Can someone help me in finding the solution for defining the height of the parent div dynamically. Thanks in advance.

so I’m trying to import an xlsx using sheetjs and multer. I was doing a validation and just realize that i’m doing it wrong. What should I be doing is, before pushing the data, I should change the header. In my code, I was just getting the header and make a comparison.

Is it possible to change the imported xlsxs header before i push it?

so this is the header of my xlsx file.

const router = express.Router();

const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

router.post("/", upload.single("excel"), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: "No File Uploaded" });
    }

    const workbook = XLSX.read(req.file.buffer, { type: "buffer" });
    const sheetName = workbook.SheetNames[0];
    const data = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName]);
    const columnsArray = XLSX.utils.sheet_to_json(workbook.Sheets[sheetName], {
      header: 1,
    })[0];

    const validation = [
      "time",
      "userfullname",
      "affecteduser",
      "eventcontext",
      "component",
      "eventname",
      "description",
      "origin",
      "ipaddress",
    ];

    const MakeArrayToSmall = (headerRow) => {
      let arrayToCheck = [];

      for (let i = 0; i < headerRow.length; i++) {
        let lowercaseLetter = headerRow[i].toLowerCase().replace(/s/g, "");
        arrayToCheck.push(lowercaseLetter)
      }
      return arrayToCheck
    
    };

    let resultArray = MakeArrayToSmall(columnsArray);

    var is_same =
      validation.length == resultArray.length &&
      validation.every(function (element, index) {
        return element === resultArray[index];
      });


    if(is_same === true){
      const successData = [];
      const failedData = [];
  
      for (let i = 0; i < data.length; i++) {
        const {
          time,
          userfullname,
          affecteduser,
          eventcontext,
          component,
          eventname,
          description,
          origin,
          ipaddress,
        } = data[i];
  
        // Replace undefined values with null
        const values = [
          time || null,
          userfullname || null,
          affecteduser || null,
          eventcontext || null,
          component || null,
          eventname || null,
          description || null,
          origin || null,
          ipaddress || null,
        ];
  
        const sql =
          "INSERT INTO userlibrary (time, userfullname, affecteduser, eventcontext, component, eventname, description, origin, ipaddress) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)";
  
        try {
          const [rows, fields] = await connection.execute(sql, values);
  
          if (rows.affectedRows) {
            successData.push(data[i]);
          } else {
            failedData.push(data[i]);
          }
        } catch (error) {
          console.error("Error executing SQL query:", error);
          failedData.push(data[i]);
        }
      }
  
      // Assuming 'excel' is the file path, make sure to replace it with the actual file path if different
  
      return res.json({ msg: "Ok", data: { successData, failedData } });
    }
    else{
      return res.json({msg: "Excel Header is not valid,"})
    }

   
  } catch (error) {
    console.error("Error processing file:", error);
    return res.status(500).json({ error: "Internal Server Error" });
  }
});

export default router;

for some security reasons I need to be able to detect a page refresh with the browser ( so a good old refresh button click ), but ONLY when it’s done through a new tab ( by either CTRL + click browser refresh or by mouse middle click the browser refresh button directly ).

I know there is ways to play around with localStorage / sessionStorage but I was wondering if there was a simpler way, especially as it get harder to manage with several tabs open at the same time.

Using (window.performance.getEntries()[0] as PerformanceNavigationTiming).type works to detect a reload, but it also detects reload on the same tab. Thanks in advance !

Note: I’m using React Router Dom 6.21.1

First, some brief context… In this project, I am migrating a WordPress app to React.

This involves transferring the data over and creating a completely new database schema. I’m taking these steps to do so:

1. Exporting the WordPress app’s MySQL database as XML.
2. Writing helper scripts in NodeJS to parse this data—which is obscured by a WordPress plugin called Advanced Custom Fields—into JSON.
3. Simulating SQL dump code that creates the new PostgreSQL database schema, and inserts the new data (GeoJSON features) as table rows.

I think that I’m not writing the SQL dump code correctly in step 3, because Adminer shows that my table’s row count is -1 (Adminer output).

Running SELECT COUNT(*) from features2; displays the correct result of 45.

I think what I need to do is generate the SQL dump from the target database with pg_dump dbname > dumpfile and then mimic those commands in my NodeJS script to generate a correct dumpfile.

But I really would like to understand why the row count is being displayed as -1.

Here’s my code in NodeJS generating the SQL commands:

let sql = `\connect databasen`;

sql +=
  `DROP TABLE IF EXISTS "${table}";n` +
  `CREATE TABLE "public"."${table}" (n` +
  `    "name" VARCHAR(85) NOT NULL,n` +
  `    "id" UUID DEFAULT gen_random_uuid()  NOT NULL,n` +
  `    "wordpress_created_at" DATE DEFAULT now(),n` +
  `    "wordpress_last_modified_at" DATE DEFAULT now(),n` +
  `    "polygon" JSON NOT NULL,n` +
  `    "polygon_style" JSON NOT NULL,n` +
  `    "wordpress_id_string" VARCHAR(10),n` +
  `    "slug" VARCHAR(80) NOT NULL,n` +
  `    "category" VARCHAR(20) NOT NULL,n` +
  `    "changelog" JSON,n` +
  `    "official_websites" JSON,n` +
  `    "sources" JSONn` +
  `);n` +
  `ALTER TABLE ONLY "public"."${table}"n` +
  `    ADD UNIQUE(id);n` +
  `ALTER TABLE ONLY "public"."${table}"n` +
  `    ADD CONSTRAINT ${table}_pkey PRIMARY KEY (id);n` +
  ``;

Which generates the following .sql file:

connect database
DROP TABLE IF EXISTS "features2";
CREATE TABLE "public"."features2" (
    "name" VARCHAR(85) NOT NULL,
    "id" UUID DEFAULT gen_random_uuid()  NOT NULL,
    "wordpress_created_at" DATE DEFAULT now(),
    "wordpress_last_modified_at" DATE DEFAULT now(),
    "polygon" JSON NOT NULL,
    "polygon_style" JSON NOT NULL,
    "wordpress_id_string" VARCHAR(10),
    "slug" VARCHAR(80) NOT NULL,
    "category" VARCHAR(20) NOT NULL,
    "changelog" JSON,
    "official_websites" JSON,
    "sources" JSON,
);
ALTER TABLE ONLY "public"."features2"
    ADD UNIQUE(id);
ALTER TABLE ONLY "public"."features2"
    ADD CONSTRAINT features2_pkey PRIMARY KEY (id);

I think it might have something to do with the UNIQUE and PRIMARY KEY constraints?

I am trying to create a back-end for a full-stack project I am working on. I tried to use mongoose and express since I decided to use Node.js for the back. I am more related to front-end so this is new to me and I don’t know where my mistake might be. I keep getting an empty array from the server.
I am fetching the data from a database I have in MongoDB but I am not sure wheter I am doing it right or if the data is poorly structured or if the .env file is the problem.
I’ll provide my code files and some images including how the data is in MongoDB.
The name of the JS files are as follows: 1. index.js 2. playerRoutes.js 3. playerModel.js.

index:

import dotenv from 'dotenv';
import express, { json } from 'express';
import mongoose from 'mongoose';
import playerRoutes from './routes/playerRoutes.js';
dotenv.config();

const app = express();
const PORT = process.env.PORT || 3002;

mongoose.connect(process.env.ATLAS_CONNECTION_STRING);

const connection = mongoose.connection;

connection.once('open', () => {
  console.log('MongoDB database connection established successfully');
});

app.use(json());

app.get('/', (req, res) => {
  res.send('Welcome to NBA Metrics! Check out our players data at /api/players');
})

app.use('/api', playerRoutes);

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

playerRoutes:

import { Router } from 'express';
import Player from '../models/playerModel.js';
const router = Router();
// Get all players

router.get('/players', async (req, res) => {
    console.log('fetching all players...');
    try {
        //Find all players
        const players = await Player.find();
        console.log(`Found ${players.length} players:`, players);
        res.json(players);  
    } catch (error) {
        console.error('Error fetching players:', error);
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

// Get player by ID

router.get('/players/:id', async (req, res) => {
    const playerId = req.params.id;

    try {
        const player = await Player.findById(playerId);
        if (!player) {
            return res.status(404).json({ error: 'Player not found' });
        }
        res.json(player);
    } catch (error) {
        console.error('Error fetching player:', error);
        res.status(500).json({ error: 'Internal Server Error' });
    }
});

export default router;

playerModel:

import { Schema, model } from 'mongoose';

const playerSchema = new Schema({
    Jugador: {
        type: String,
        required: true,
    },
    Equipo: {
        type: String,
        required: true,
    },
    ArquetipoOfensivo: {
        type: String,
        required: true,
    },
    ArquetipoDefensivo: {
        type: String,
        required: true,
    },
    POISEOfensivo: {
        type: Number,
        required: true,
    },
    POISEDefensivo: {
        type: Number,
        required: true,
    },
    POISETotal: {
        type: Number,
        required: true,
    },
    ValorScoring: {
        type: Number,
        required: true,
    },
    ValorSpacing: {
        type: Number,
        required: true,
    },
    ValorPassing: {
        type: Number,
        required: true,
    },
    ValorRimProtection: {
        type: Number,
        required: true,
    },
    ValorRebounding: {
        type: Number,
        required: true,
    },

});

const Player = model('Player', playerSchema);

export default Player;

Images:mongo empty array terminal

My guess is that the playerModel file has an issue or the error might come from the data I have inside the database of MongoDB. I really don’t know what to do.
I want to correctly fetch the data and be able to see it on the server so I can pass it later on to a react app.

I’m working on a web development project and need to dynamically generate HTML elements using JavaScript to ensure a responsive and interactive user interface. Could someone provide guidance or code examples on how to achieve this? Specifically:

How can I use JavaScript to dynamically create HTML elements based on user actions?
Are there any best practices or common patterns for updating the DOM dynamically?
What considerations should I keep in mind for ensuring responsiveness across different devices and screen sizes?
I’ve already tried about 15 attempts, but I’m looking for insights and best practices from the community. Any help would be greatly appreciated!

What did you try and what were you expecting?

I’ve attempted to dynamically generate HTML elements using JavaScript in my project. Specifically, I used the document.createElement method and manipulated the DOM based on user interactions. However, I’m facing challenges in ensuring a responsive UI.

What I tried:

Copy code
// Example code snippet of what I've tried
function createDynamicElement() {
    // Code to create dynamic elements
    // ...

    // Code to append elements to the DOM
    // ...
}```

cannot stringify arbitrary non-POJOs

const { status } = useAuth() as any

// if(status.value == ‘authenticated’ && ((data.value?.user?.contact == null || data.value?.user.contact == ”) && to.path != ‘/profile/need-info’)){

if (status.value == ‘authenticated’) {

const { data } = await useFetch('/api/profile/getUserOnly')

if (

  (data.value?.contact == null || data.value.contact == '') &&

  to.path != '/profile/need-info'

) {

  return navigateTo('/profile/need-info')

}

}

// if(status.value == ‘authenticated’ )

})`

I am beginner in using laravel and next js . I’m confusing which is more convience between fetch() and get() when fetching data from next js . In next js , in my knowledge , first data rendering is a little longer to show and second time re-rendering is more faster for the same screen . But when , I’m using with laravel pagination, for page one , first rendering took a little longer . and i clicked page two and click page one again ( page one => page two => page one again). At that time , data fetching speed is same . not faster more from the previous rendering(first rendering) .Currenly I’m using axios get method .But , when i found on google ,And it said that fetch method is using cache and it is more faster. Is there any point that should i know between get and fetch method and which one is more faster in second rendering? Sorry for insufficient knowledge in javascript . Thank you

reference link

axios.js

import Axios from 'axios'

const apiConfig = {
  baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
  }
}
const axios = Axios.create(apiConfig)

export default axios

CallApi.js

import { parseCookies } from 'nookies';
import axios from '../utils/axios';

export async function callApi(method, url, data,responseType=null) {
  const token= parseCookies.accessToken
  const config = {
    headers: {
      Authorization: `Bearer ${token}`
    },
    method: method,
    url: url,
    data: data,
    responseType: responseType
  }
  const response = await axios(config)
  return response.data

}

ApiRequestHelper.js

import { callApi } from './callApi'

const defaultRoute = '/app';

export async function fetchAllData(url) {
  return await callApi('get', defaultRoute + url)
}
export async function fetchSearchData(url, searchParams) {
  return await callApi('get', defaultRoute + url, searchParams);
}

Service.js

import { fetchAllData } from "../../libs/ApiRequestHelper";

export const fetchRegularCostsData = async () => {
 return await fetchAllData('/general-outcome');
  };
  

I am setting up a website and need to load a script that is hosted on another server. I just want to hide the origin server.

<div><script src="https://ORIGIN-SERVER-URL.js" id="hidden_embed_calendar" data-env="https://www.hidden.com" data-version="v0.3" data-uid="934582" data-uuid="79681090" data-color="33ae3f" data-text="Book Now" data-title="Select Departure Date"></script></div>

I want my website users not be able to see the server this originally comes from. Is it possible to set up my own server between my website and the origin server as a proxy and server the script from my server? That would result in a source code of my website showing something like:

<div><script src="https://MY-SERVER.js" id="myserver_embed_calendar" data-env="https://www.myserver.com" data-version="v0.3" data-uid="934582" data-uuid="79681090" data-color="33ae3f" data-text="Book Now" data-title="Select Departure Date"></script></div>

What do I need to to to arrange this? Please advise me on the term I should be looking for.

I tried to google but could not find it. I do not know the search terms I need to find the answer. Am i looking for example for a javascript proxy server?

Prior to using webpack, my vue routing was working just fine. However, I started running into a bunch of loader issues so decided to use webpack. However, after getting my webpack running the main page loads fine, but all my routes now 404. Everything that has been commented out is something that I have already tried out, but didn’t work. I believe there is something that is off with my webpack config file, but I can’t figure it out. Any ideas or help will be greatly appreciated. Thank you for your time.

App.vue

<template>
  <div class="base-app">
    <div class="mapbox" id="mapbox">
      <router-view />
    </div>
  </div>
</template>

<script>
// import Login from './components/login.vue';
// import Tract from './components/tract.vue';

export default {
  name: "App",
  // components: {
  //   Login,
  //   Tract
  // }
};
</script>

router.js

import { createWebHistory, createRouter } from "vue-router";
import Index from "./components/index.vue";
import Login from "./components/login.vue";
import Tract from "./components/tract.vue";

const routes =  [
  {
    path: "/",
    component: Index
  },
  {
    path: "/login",
    component: Login
  },
  {
    path: "/tract/:id",
    component: Tract
  }
];


const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

main.js

import { createApp } from 'vue';
import App from './App.vue';
// import login from './components/login.vue';
// import tract from './components/tract.vue';
import router from './router.js';

import "./assets/styles/normalize.css";
import "./assets/styles/app.css"; 

const app = createApp(App);
// app.component('login', login);
// app.component('tract', tract);
app.use(router);
app.mount('#app');

webpack.config.cjs

const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const autoprefixer = require("autoprefixer");
const path = require("path");

module.exports = {
  entry: {
    main: "./src/main.js",
  },
  output: {
    filename: 'main.bundle.js',
    path: path.resolve(__dirname, 'dist/')
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /.vue$/,
        loader: "vue-loader",
      },
      {
        test: /.s?css$/,
        use: [
          "style-loader",
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: () => [autoprefixer()],
              }
            },
          },
          "sass-loader",
        ],
      },
      {
        test: /.m?js/,
        resolve: {
          fullySpecified: false,
        },
      }
    ],
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
      chunkFilename: "[name].[contenthash:8].css",
    }),
    new htmlWebpackPlugin({
      template: path.resolve(__dirname, "public", "index.html"),
      favicon: "./public/favicon.ico",
    }),
  ],
  resolve: {
    extensions: [ '.tsx', '.ts', '.js', '.vue' ],
    alias: {
        'vue': '@vue/runtime-dom'
    }
  },
  devtool: 'source-map'
};

vue.config.cjs

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
        .tap(options => {
          // modify the options...
          return options
        })
  },
  devServer: {
    disableHostCheck: true,
    devMiddleware: {
      writeToDisk: false
    }
  }
}

package.json

{
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "startdev": "webpack-dev-server --mode development --config ./webpack.config.cjs",
    "start": "NODE_ENV=production webpack --config ./webpack.config.cjs"
  },
  "dependencies": {
    "@aws-amplify/ui-vue": "^3.1.20",
    "aws-amplify": "^5.3.3",
    "axios": "^0.22.0",
    "bootstrap": "4.6.0",
    "chart.js": "^4.4.0",
    "core-js": "^3.34.0",
    "jquery": "^3.6.0",
    "mapbox-gl": "^2.6.0",
    "popper.js": "^1.16.1",
    "postcss-loader": "^7.3.3",
    "vue": "^3.0.0",
    "vue-chartjs": "^5.2.0",
    "vue-router": "4"
  },
  "devDependencies": {
    "@babel/core": "^7.23.5",
    "@babel/preset-env": "^7.23.5",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "autoprefixer": "^10.4.16",
    "babel-loader": "^9.1.3",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.8.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.4",
    "mini-css-extract-plugin": "^2.7.6",
    "postcss": "^8.4.32",
    "sass": "^1.69.5",
    "sass-loader": "^13.3.2",
    "source-map-loader": "^4.0.1",
    "style-loader": "^3.3.3",
    "vue-loader": "^17.3.1",
    "vue-template-compiler": "^2.7.15",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

I can’t add http headers to the response to allow my frontend to make requests, it is being blocked by the CORS policy, and I can’t access the response

example code

I tried to create “headers” in the dict response, and add the Access-Control-Allow-Origin but it didn’t work

Is there a right or wrong answer here or is it a pure matter of opinion / depends on the circumstances of our project? It’s based around injecting DAO’s into other classes which call method’s of the DAO within it. I am using javascript to implement this.

Option 1
Should my DAO classes have specific methods which could be used based on an applications state after an event that takes place. Here all methods within the DAO class could be used based on an event which occurs. For example If a specific board square is landed on then a specific DAO classes methods are invoked from the mediation class that the DAO is passed into. This class also receives other DAO’s such as a DAO thats responsible for updating a players turn . So not all the functionality exists within the event specific class , just the responsibility pertaining to the targeted entity. This class consists of accessing a specific entity on the database but only consist of methods which will be needed for the event that has taken place. This makes the DAO class super cohesive and I can pass an object consisting of its Event Specific Object DAO as a whole into a mediator class that uses this DAO which provides a good interface if various DAO’s have the same methods but different implementations of them.

Option2
Or should I provide more generalised DAO’s that I can pass into my mediator classes when I need some of their methods for the required functionality. To prevent passing a whole class in which has multiple redundant methods for the mediator it’s passed into ( some methods of this class may not be needed in this case ) then I could pass in static or instance specific methods. But this could soon become wieldy if I need more than a few methods in the class I am passing the DAO methods into and that class also receives other DAO classes within its constructor.

Here is an example

class GeneralisedMediator {

  constructor(type, daoMethod1, daoMethod2, daoObject ){

    this.daoMethod1 = daoMethod1;
    this.daoMethod2 = daoMethod2;
    this.daoObject = daoObject; // a different DAO object part which is part of this mediation object with a single interface
  }

  peformAction(){

    // the two methods and the daoObject passed in collabarate and allow for me to use an interface 
  }
}

class EventSpecificMediator {

  constructor(type, daoObject1, daoObject2){

    this.daoObject1 = daoObject1;
    this.daoObject2 = daoObject2
  }

  peformAction(){

    // the two daoObjects collabrate and daoObject1 has specfic methods needed within this event 
  }
}

Multiple instances of the EventSpecificClass are created inside an array , each instance consists of different types and each instance receives a DAO class which has the same interface as other DAO instance specific classes that may be passed in. The implementation of what occurs depends of the EventSpecificClass thats passed into the mediator class where the mediator class relies on its methods via the interface. All Event Specific Classes have the same interface but have different implementations.

If using option 2, the generalised Mediator also has specific instances stored in an array.

In both examples another class such as a facade like class picks out the type of object needed from the array of either Event Specific Mediator classes or generalised classes from the array using the find method and then the peformAction method is called which mediates between the dependancies.

What is considered best or is it opinion based ? If so then I apologise in advance.

The following message is displayed in the console. The page worked good, and this just happened. Does anyone knows how to fix it?

Uncaught ReferenceError: lpGlobalSettings is not defined at HTMLDocument. (global.js?ver=3.0.9:1207:33) at i (jquery.js?ver=1.12.4-wp:2:27362) at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4-wp:2:28121) at Function.ready (jquery.js?ver=1.12.4-wp:2:29914) at HTMLDocument.J (jquery.js?ver=1.12.4-wp:2:30276)

Been searching for a day and no one on the internet seems to have this problem. I have a Bootstrap 5 carousel, relatively vanilla setup except I removed the buttons to solely rely on swiping to navigate through carousel-items.

Swiping left to right works just like the samples, no problem, until I allow the content inside them to be vertically scrollable via overflow-y being set to either auto or scroll in CSS. Then it’s like the inner element handles the pointer events and does not propagate them further to the parent elements. I can’t find any way to force propagate the events.

What am I missing here? How can I get the carousel-inner (or carousel object in general) to continue processing swipe events with a overflow-y child elements?

The HTML:

<div class="container pt-3 px-4">
  <div class="row">
    <div id="carouselMembers" class="carousel slide" data-controller="pool-carousel">
      <div class="carousel-inner" data-pool-carousel-target="carouselInner">
        <div class="pool-carousel-inner">
          <!-- lengthy vertically scrolling content -->
        </div>
      </div><!-- carousel-inner -->
    </div><!-- carouselMembers -->
  </div><!-- row -->
</div><!-- container -->

The CSS:

.pool-carousel-inner {
    overflow-y: auto;
}

Probably irrelevant context: I am using stimulus to handle some other JavaScript needs, thus the controller attributes. I am explicitly calling the carousel constructor from there, per the bootstrap docs, just to get swiping working at all. I have to customize CSS via an inner class (pool-carousel-inner) because I use carousels in multiple other places that behave and look differently.

I’ve also done things like setting my pool-carousel-inner class width to 50% and can verify the swipe definitely still works on the “empty” space that the inner element doesn’t take up (i.e. the space represented by the carousel-inner element that is NOT covered by the pool-carousel-inner element), so I know the carousel is setup correctly. But if I start a swipe/drag left-right over the inner content, it’s like it’s trying to scroll the whole browser window and the interaction events don’t get handled by bootstrap.

I’m using the cursor : url('./path/to/small-image.png') X Y, grab to set a custom image as my cursor, with an offset because I use a particular point of that image as a pointer (and a fallback value being the grab cursor).

When I render the page on a larger/smaller screen, naturally, the cursor stays the same size, and looks either tiny or gigantic compared to the page’s content.

How could I make the cursor scale with the page ? If that’s possible, how could I make sure the offset (cursor image corner to pointer distance) is proportionally the same ?

The mdn doc doesn’t list a size / scale attribute.
I’ve had no luck with computing offset (using 50% or calc(50%) fails), so even that is out for me.

How to scale my custom cursor on anchor tag hover does say that there is nothing in the cursor spec allowing for an easy on-the-fly scaling, but I’m looking for something I think is more static, so maybe there’s a solution ?
Maybe all browsers now implement something cool with cursors ?

Am I stuck with pre-making tons of different scale cursors and trying to select the right one once I’ve determined the rendered page’s size ?