Category: javascript

I am trying to replace a certain string with a condition before it gets to the output.

Below is my code

<script setup>
import { ref } from 'vue'

const items = ref([{ letter: "A", message: '1' }, { letter: "B", message: '2' }])
</script>

<template>
    <li v-for="(item, index) in items">
        <p v-if="item.message === '1'">
            {{ item.letter }} - {{ 'Apple' }}
        </p>
        <p v-if="item.message === '2'">
            {{ item.letter }} - {{ 'Banana' }}
        </p>
    </li>
</template>

I tried adding the v-if inside the v-for but this seems impractical. I am trying to figure out a way to have item.message replace its string value before v-for. Any suggestions?

I have a problem when I submit the form which had empty rows so that in the database the empty rows are still inputted even though they are empty which causes the next input to skip the empty row.

Input data only on 2 rows:

enter image description here

Result in database:

enter image description here

`function submitFR() {
var ss = SpreadsheetApp.getActiveSpreadsheet();
var formSS = SpreadsheetApp.openById(“1OWqOlqy_pfZgmtgOx8i-b-V_u3IBZnsOklahh4pXGSM”).getSheetByName(“Form”);
var datasheet = SpreadsheetApp.openById(“1OonemP29xCjyChjYUYJWWGKyjo-BFFUVSJhoyx6MQEg”).getSheetByName(“Database Jurnal”);

var values = [[formSS.getRange(“B22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+1, 1, 1, 1).setValues(values);

var values = [[formSS.getRange(“D22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 2, 1, 1).setValues(values);

var values = [[formSS.getRange(“E22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 3, 1, 1).setValues(values);

var values = [[formSS.getRange(“L22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 4, 1, 1).setValues(values);

var values = [[formSS.getRange(“M22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 5, 1, 1).setValues(values);

var values = [[formSS.getRange(“N22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 6, 1, 1).setValues(values);

var values = [[formSS.getRange(“O22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 7, 1, 1).setValues(values);

var values = [[formSS.getRange(“P22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 8, 1, 1).setValues(values);

var values = [[formSS.getRange(“R22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 9, 1, 1).setValues(values);

var values = [[formSS.getRange(“S22”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 10, 1, 1).setValues(values);

var values = [[formSS.getRange(“B23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+1, 1, 1, 1).setValues(values);

var values = [[formSS.getRange(“D23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 2, 1, 1).setValues(values);

var values = [[formSS.getRange(“E23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 3, 1, 1).setValues(values);

var values = [[formSS.getRange(“L23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 4, 1, 1).setValues(values);

var values = [[formSS.getRange(“M23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 5, 1, 1).setValues(values);

var values = [[formSS.getRange(“N23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 6, 1, 1).setValues(values);

var values = [[formSS.getRange(“O23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 7, 1, 1).setValues(values);

var values = [[formSS.getRange(“P23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 8, 1, 1).setValues(values);

var values = [[formSS.getRange(“R23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 9, 1, 1).setValues(values);

var values = [[formSS.getRange(“S23”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 10, 1, 1).setValues(values);

var values = [[formSS.getRange(“B24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+1, 1, 1, 1).setValues(values);

var values = [[formSS.getRange(“D24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 2, 1, 1).setValues(values);

var values = [[formSS.getRange(“E24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 3, 1, 1).setValues(values);

var values = [[formSS.getRange(“L24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 4, 1, 1).setValues(values);

var values = [[formSS.getRange(“M24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 5, 1, 1).setValues(values);

var values = [[formSS.getRange(“N24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 6, 1, 1).setValues(values);

var values = [[formSS.getRange(“O24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 7, 1, 1).setValues(values);

var values = [[formSS.getRange(“P24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 8, 1, 1).setValues(values);

var values = [[formSS.getRange(“R24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 9, 1, 1).setValues(values);

var values = [[formSS.getRange(“S24”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 10, 1, 1).setValues(values);

var values = [[formSS.getRange(“B25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+1, 1, 1, 1).setValues(values);

var values = [[formSS.getRange(“D25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 2, 1, 1).setValues(values);

var values = [[formSS.getRange(“E25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 3, 1, 1).setValues(values);

var values = [[formSS.getRange(“L25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 4, 1, 1).setValues(values);

var values = [[formSS.getRange(“M25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 5, 1, 1).setValues(values);

var values = [[formSS.getRange(“N25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 6, 1, 1).setValues(values);

var values = [[formSS.getRange(“O25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 7, 1, 1).setValues(values);

var values = [[formSS.getRange(“P25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 8, 1, 1).setValues(values);

var values = [[formSS.getRange(“R25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 9, 1, 1).setValues(values);

var values = [[formSS.getRange(“S25”).getValue()]];
datasheet.getRange(datasheet.getLastRow()+0, 10, 1, 1).setValues(values);

}`

I have a view on which I am displaying some text. That is generating through API url. When I am printing that page in flutter application. I am getting the problem that the email in that text is converting to email protected. What is the solution to this.

this is the code:

<center style="margin-bottom: 30px;" class="">
        <strong class="company-header">{!! nl2br(e(str_replace(',', "n", $adminUser->company_header))) !!}</strong>
      
    </center>

And this is the output of the view on web:
enter image description here

When I am printing this in the flutter application, the email changes to email protected.

Its a page of a project with Blazor, .NET and JS.

I am trying to modify a map based on the positions of each element, and my problem is that when I try to move from the “drawing-list” element (it is a div where there are three elements that you can drag and move it to the main div to add more elements to the map if you wish.) nothing happens, but then when modifying it is not draggable within the main div, and all dragging elements are blocked.

The code (script) of a drawing-list:

    window.initializeSortableForDrawings = () => {
        const mapContainer = document.querySelector('.map-container');
        const drawingList = document.querySelector('.drawing-list');

        if (mapContainer && drawingList) {
            Sortable.create(drawingList, {
                group: {
                    name: "drawings",
                    pull: "clone",
                    put: false
                },
                sort: false
            });

            Sortable.create(mapContainer, {
                group: "drawings",
                onAdd: function (evt) {
                    const itemEl = evt.item;
                    const dibujoId = itemEl.id.replace('dibujo-list-', '');

                    // Clonar el elemento arrastrado
                    var clonedElement = itemEl.cloneNode(true);
                    clonedElement.id = `dibujo-${dibujoId}`;
                    clonedElement.removeAttribute('draggable');
                    clonedElement.style.position = 'absolute';

                    // Obtener las coordenadas del evento de arrastre y soltar
                    const containerRect = evt.target.getBoundingClientRect();
                    clonedElement.style.left = `${evt.clientX}px`;
                    clonedElement.style.top = `${evt.clientY}px`;

                    // Añadir el elemento clonado al zoom-container
                    evt.target.appendChild(clonedElement);

                    // Eliminar el original para evitar duplicación
                    evt.from.removeChild(itemEl);

                    console.log(`Dibujo ${dibujoId} añadido al mapa.`);

                    // Verifica si dotNetRef está definido antes de llamar a invokeMethodAsync
                    if (dotNetRef) {
                        dotNetRef.invokeMethodAsync('ActualizarMapa')
                            .then(() => {
                                console.log('Mapa actualizado.');
                            })
                            .catch(error => console.error('Error al actualizar el mapa:', error));
                    } else {
                        console.error('dotNetRef no está definido.');
                    }
                }
            });
        }
    };

    // Permite que el contenedor acepte elementos arrastrados
    function allowDrop(ev) {
        ev.preventDefault();
    }

    // Llamado cuando se inicia el arrastre
    function drag(ev) {
        ev.dataTransfer.setData("text", ev.target.dataset.dibujoId); // Guardar el ID del dibujo
    }

    // Llamado mientras se está arrastrando
    function dragging(ev) {
        ev.preventDefault();
        var dibujoId = ev.dataTransfer.getData("text");
        var dibujoElement = document.getElementById('dibujo-list-' + dibujoId);

        // Crear una versión visual mientras se arrastra
        var previewElement = document.getElementById('drag-preview');
        if (!previewElement) {
            previewElement = dibujoElement.cloneNode(true);
            previewElement.id = 'drag-preview';
            previewElement.style.position = 'fixed';
            previewElement.style.pointerEvents = 'none'; // Evita interacciones con el elemento mientras se arrastra
            previewElement.style.zIndex = '1000';
            document.body.appendChild(previewElement);
        }

        // Actualiza la posición del preview mientras se arrastra
        previewElement.style.left = ev.clientX + 'px';
        previewElement.style.top = ev.clientY + 'px';
    }

    // Llamado cuando se suelta el elemento
    function drop(ev) {
        ev.preventDefault();
        var dibujoId = ev.dataTransfer.getData("text"); // Obtener el ID del dibujo
        var dibujoElement = document.getElementById('dibujo-list-' + dibujoId);

        // Clonar el elemento arrastrado y agregarlo al contenedor del mapa (zoom-container)
        var clonedElement = dibujoElement.cloneNode(true);
        clonedElement.removeAttribute('draggable'); // No permitir arrastrar el elemento nuevamente
        clonedElement.style.position = 'absolute'; // Posicionar el elemento en el mapa

        // Posicionarlo en las coordenadas donde se suelta
        const containerRect = ev.target.getBoundingClientRect();
        clonedElement.style.left = (ev.clientX - containerRect.left) + 'px';
        clonedElement.style.top = (ev.clientY - containerRect.top) + 'px';

        // Agregar el elemento clonado al contenedor de zoom
        ev.target.appendChild(clonedElement);

        // Eliminar el preview del arrastre
        var previewElement = document.getElementById('drag-preview');
        if (previewElement) {
            previewElement.remove();
        }

        // RE-RENDERIZADO
        clonedElement.style.display = 'none';
        requestAnimationFrame(() => {
            clonedElement.style.display = '';
        });

        dotNetRef.invokeMethodAsync('ActualizarMapa')
            .then(() => {
                logMessage('Mapa actualizado en Blazor.');
            })
            .catch(error => {
                logMessage('Error al actualizar el mapa:', error);
            });
    }

The code of the main div:

window.initializeSortable = () => {
        const tryInitialize = () => {
            const container = document.querySelector('.zoom-container');
            if (container) {
                logMessage('Contenedor encontrado:', container);

                Sortable.create(container, {
                    animation: 150,
                    onStart: (evt) => {
                        const element = evt.item;
                        element.classList.add("dragging");
                        logMessage(`Iniciando arrastre para: ${element.id}`);
                        DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', true)
                            .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
                    },
                    onEnd: (evt) => {
                        const element = evt.item;
                        element.classList.remove("dragging");
                        const elementId = evt.item.id.replace('dibujo-', '');

                        const rect = element.getBoundingClientRect();

                        const container = document.querySelector('.map-container');
                        const containerRect = container.getBoundingClientRect();

                        const newX = Math.round(rect.left - containerRect.left);
                        const newY = Math.round(rect.top - containerRect.top);

                        logMessage(`Elemento ${elementId} movido a X: ${newX}, Y: ${newY}`);

                        dotNetRef.invokeMethodAsync('UpdateElementPositionAsync', parseInt(elementId), newX, newY)
                            .catch(error => logMessage(`Error al actualizar la posición: ${error}`));

                        DotNet.invokeMethodAsync('RMSuit_v2', 'SetDraggingState', false)
                            .catch(error => logMessage(`Error al actualizar estado de arrastre: ${error}`));
                    },
                    onMove: (evt) => {
                        const element = evt.dragged;
                        const container = document.querySelector('.map-container');
                        const containerRect = container.getBoundingClientRect();

                        // Usamos el evento original del mouse para obtener las coordenadas correctas
                        const mouseEvent = evt.originalEvent;
                        const newX = Math.round(mouseEvent.clientX - containerRect.left - element.offsetWidth / 2);
                        const newY = Math.round(mouseEvent.clientY - containerRect.top - element.offsetHeight / 2);

                        // Actualizar la posición del elemento en tiempo real
                        element.style.left = `${newX}px`;
                        element.style.top = `${newY}px`;

                        logMessage(`Moviendo elemento: ${element.id}, X: ${newX}, Y: ${newY}`);
                    }
                });
            } else {
                logMessage('Sortable: el contenedor no se encontró, reintentando...');
                setTimeout(tryInitialize, 100); // Reintento después de 100ms
            }
        };

        tryInitialize();
    };

The complete code is here:

https://github.com/MarcomedSoltel/Problem/commit/b384ca942e2858774706d69dda74b01226bf4ead

Try to solve it by debugging to see what could happen. I also try to give a unique id to each new element, but all I can think of is that the changes are not updated well visually or why the positions are 1,1 instead of dragging it correctly on the map. I’m a little stuck on this, and I don’t really know how to move forward.

I have a old project and I try to update this (quasar 1 to 2)
here the version I use:

• [email protected]
• [email protected]
• node v22.7.0

at this point I have an error in my console from my browser:

Uncaught ReferenceError: process is not defined
    at eval (index.js:7:1)
    at ./src/router/index.js (app.js:282:1)
    at __webpack_require__ (app.js:1487:32)
    at fn (app.js:1785:21)
    at eval (app.js:23:79)
    at ./.quasar/app.js (app.js:19:1)
    at __webpack_require__ (app.js:1487:32)
    at fn (app.js:1785:21)
    at eval (client-entry.js:239:67)
    at ./.quasar/client-entry.js (app.js:30:1)

I tried to understand what Is missing but I’m a little lost

I post also the actual package.json:

"dependencies": {
    "@quasar/app-webpack": "^3.13.4",
    "@quasar/babel-preset-app": "^2.0.3",
    "@quasar/extras": "^1.16.12",
    "@quasar/quasar-ui-qcalendar": "^4.0.0-beta.16",
    "@vue/compat": "^3.5.4",
    "@vuex-orm/core": "^0.36.4",
    "apexcharts": "^3.53.0",
    "axios": "^1.7.7",
    "encoding-japanese": "^2.2.0",
    "js-md5": "^0.8.3",
    "jwt-decode": "^4.0.0",
    "lodash.isequal": "^4.5.0",
    "moment": "^2.30.1",
    "quasar": "^2.16.11",
    "stylus-loader": "^8.1.0",
    "vue": "^3.5.4",
    "vue-apexcharts": "^1.6.2",
    "vue-avatar": "^2.3.3",
    "vue-i18n": "^10.0.0",
    "vuex": "^4.1.0"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.25.1",
    "@eslint/compat": "^1.1.1",
    "@eslint/js": "^9.10.0",
    "@quasar/icongenie": "^4.0.0",
    "@vue/babel-preset-app": "^5.0.8",
    "autoprefixer": "^10.4.20",
    "eslint": "^8.0.1",
    "eslint-webpack-plugin": "^4.2.0",
    "eslint-plugin-vue": "^9.28.0",
    "eslint-plugin-html": "^8.1.1",
    "eslint-plugin-import": "^2.30.0",
    "globals": "^15.9.0",
    "quasar-app-extension-ide-helper": "1.0.2"
  },
  "engines": {
    "node": ">= 22.7.0",
    "npm": ">= 10.8.2",
    "yarn": ">= 1.22.22"
  },
  "browserslist": [
    "last 1 version, not dead, ie >= 11"
  ]

I have another error in the console maybe I don’t know if this have side effects or not but:

[Vue warn]: Failed to mount app: mount target selector "#app" returned null.

Sorry if the information is confuse, I’m also confuse where I need to check

I am using an area chart from ApexCharts. Now I want to use a custom marker and show some images as markers. How can I do those things?

// finance page area chart

It was the path of images..
const imageUrls = [
  './assets/images/icon/ETH-2.png',
  './assets/images/icon/ETC.png',
  './assets/images/icon/BTC.png',
  './assets/images/icon/LTC.png'
];


  markers: {
    size: 10, // Adjust marker size
    strokeColors: '#FFFFFF',
    strokeWidth: 2,
    hover: {
      size: 35, // Size of marker on hover
    },
    custom: {
      images: imageUrls.map((url, index) => ({
        src: url,
        width: 30, // Adjust width based on your image size
        height: 30 // Adjust height based on your image size
      })),
      // Function to set the correct image for each data point
      fillColor: function (dataPointIndex) {
        return imageUrls[dataPointIndex % imageUrls.length];
      }
    },
  },
  tooltip: {
    enabled: false,
  },
  xaxis: {
    labels: {
      show: true, // Show x-axis text labels
    },
    axisBorder: {
      show: false, // Hides the x-axis border/line
    },
    axisTicks: {
      show: false, // Hides the x-axis ticks
    },
  },
  yaxis: {
    min: 0,
    max: 70,
    tickAmount: 7,
    labels: {
      show: true, // Show y-axis text labels
    },
    axisBorder: {
      show: true, // Show the y-axis border
      color: "#1F2336", // Change the y-axis border color
    },
  },
  grid: {
    show: false,
  },
};

// Initialize ApexCharts and render
var chart = new ApexCharts(document.querySelector("#show-amount-graph"), options);
chart.render();

I tried to do this, but it did not work.

Problem: I use Parcel as a bundler of my project and try to inject HTML markup into my index.html from my TypeScript file. Injected markup contains <img> elements with dynamically resolved paths for their src attribute. The paths I’m trying to add to the images’ src attributes are stored as properties of my data.json file, which I import directly into my TypeScript file. The problem is that Parcel support only string literals inside new URL() syntax, therefore I don’t know how to use template literals/variables inside this function to add dynamic URL dependencies.

Code:

import data from "../data.json";

const productList: HTMLUListElement | null = document.querySelector(
  ".product-list__list",
);

if (productList) {
  for (const product of data) {
    const markup = `
        <img
          src="${new URL(product.image.mobile, import.meta.url).toString()}"
          alt="${product.name}"
          class="product__image"
        />
   `;

    productList.insertAdjacentHTML("beforeend", markup);
  }
}

What I’ve tried: I tried using template literals, variables inside new URL() function, but it was in vain, since Parcel doesn’t support anything else than string literals inside of it.

I am using below HTML for my code.

  <body>
    <div id="myId" class="oldClass">
      This is the original content of the element with ID "myId".
    </div>
  </body>

I am perform DOM Manipulation using below JavaScript Code:

const myElement = document.getElementById('myId');

myElement.setAttribute('data-example', 'value');
console.log(myElement);
myElement.removeAttribute('data-example');
console.log(myElement);

However, first console.log() statement is not displaying the data-example property.

<div id="myId" class="oldClass">
      This is the original content of the element with ID "myId".
    </div>

I’m working with a JavaScript object, and when I do console.log(sessions), it outputs the following structure on console:

{
  101: { "id": 101, "nameEn": "English 1", "nameFr": "French 1" },
  102: { "id": 102, "nameEn": "English 2", "nameFr": "French 2" },
  103: { "id": 103, "nameEn": "English 3", "nameFr": "French 3" }
}

The sessions data type is an object.

I’m trying to write a function that retrieves the nameEn and nameFr values based on a given id. Here’s what I’ve tried:

// Function to fetch nameEn and nameFr based on id
const getNameById = (id) => {
  const session = sessions.find(session => session.id === id);  // Line A
  if (session) {
    return { nameEn: session.nameEn, nameFr: session.nameFr };
  } else {
    return `No session found for id ${id}`;
  }
};

// Example usage
console.log(getNameById(101)); 
console.log(getNameById(102)); 
console.log(getNameById(103)); 

However, at Line A, I’m encountering the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'find')

What am I missing, and how can I fix this to properly retrieve the nameEn and nameFr based on the id?

Is it possible to get the text value of a response if the json decoding fails?

I have the following code:

try {
   var response = await fetch(url, options);
   var data = await response.json();
   // do stuff
}
catch(error) {
   var text = await response.text(); // TypeError: Failed to execute 'text' on 'Response': body stream already read
}

This sometimes happens if the server is down or the network is offline.

I’m realizing it makes the response.json() function useless because if I have errors I’ll always need to get the text value.

Currently the error is:

SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

Ignore the error above and please let me know if there is a way to get the text value from the response after I call json().

It seems to me that if the method to convert the response to json using the response.json() method fails it should allow you to get the text value. Does that make sense?

When I try to display on the bottom, it will always display on the right side even after trying to edit with the CSS

I don’t understand on how to change it to make it dropdown below and not on the rightside of the screen

I’m using a vue component and the data’s are stored inside the script

    <nav class="main-menu">
      <h2 class="menu-title">Main Menu</h2>
      <ul class="menu-list">
        <li v-for="(item, index) in mainMenuItems" :key="index" :class="['menu-item', { active: item.active }]" @click="selectMenuItem(item)">
          <img loading="lazy" :src="item.icon" :alt="`${item.text} icon`" class="menu-icon" />
          <span class="menu-text">{{ item.text }}</span>
          <img v-if="item.expandable" loading="lazy" src="https://cdn.builder.io/api/v1/image/assets/TEMP/5622eaac7f157249290a781c986056d5b8bc189ab0f414896a487c987140e352?placeholderIfAbsent=true&apiKey=072fca6f880e47769db5f7634dd8a8c6" alt="Expand icon" class="expand-icon" />

            <!-- Dropdown for expandable items -->
          <ul v-if="item.active && item.children" class="submenu-list">
            <li v-for="(subItem, subIndex) in item.children" :key="subIndex" class="submenu-item">
              {{ subItem.text }}
            </li>
          </ul>
        </li>
      </ul>
    </nav>

I’m expecting it to be displayed on the bottom of the sidebar of it’s parent and not inside and right of it’s parents

I am practicing Deno Fresh, and currently I am attempting to learn how to add animations to islands. I have written the basic island below, including an animation method.

export default function StartAnimation() {
    function animation(): void {
        const _id = setInterval(frame, 10);
        const target = document.getElementById("target");
        let degree = 1;

        function frame() {
            target!.style.transform = `rotate(${degree}deg)`;
            if (degree === 360) {
                degree = 0;
            } else {
                degree++;
            }
        }
    }

    return (
        <div id="frame">
            <div id="target" onLoad={animation}>Test animation</div>
        </div>
    )
}

When running deno task start, I get no errors, and the div appears without issue, but the animation does not run.

Is there anything wrong with my code, and more generally is there a standard way to add animations to islands within Deno Fresh?

I need to create a linkable image/text which activates the LINE App on a particular Account.
This is on an X-Cart Popup.
The program encodes the full colon : to %3A which then doesn’t work to activate the LINE App.
Using any number of Script suggestions will make matters worse by inserting spaces etc within the scipt tags which renders ALL those links inoperable.

I need some script or html to prevent the full colon being encoded into %3A.
The program removes some scripts and html when saving!

♦ Original html:

<div class="class=">
        <a href="line://ti/p/~made-in-thai"></a>
        <a href="https://www.madeinthailand.co.th/images/content//made-in-thai_2.jpg"></a>
    </div>
</div>

♦ html after saving:

<div class="class=">
        <a href="line%3A//ti/p/~made-in-thai"></a>
        <a href="https://www.madeinthailand.co.th/images/content//made-in-thai_2.jpg"></a>
    </div>
</div>

I use useIntersectionObserver from VueUse to trigger a fade-in animation when an element enters the viewport. If I navigate to another page (e.g., click on an item in the carousel to view its details) and then go back to previous route with the saved position, the intersection observer doesn’t trigger automatically, and the elements remain hidden unless I scroll the page down and up or refresh it. Also, if I scroll to the carousel, click on the carousel item and navigate to another route, the observer fails to trigger sometimes as well. So it’s not only an issue when returning to a route, but also after scrolling and navigating away.

To hide the elements before the observer activates, I use the invisible class, which includes visibility: hidden and opacity: 0. The issue seems to be that intersection observer doesn’t detect the elements when visibility: hidden is applied, so the fade-in animation never starts when returning to the page.

Observer.vue:

<template>
    <div ref="observerRef">
        <slot :isVisible="isVisible" />
    </div>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core';

const props = defineProps({
    rootMargin: {
        type: String,
        default: '0px',
    },
});

const observerRef = ref(null);
const isVisible = ref(false);

const { stop } = useIntersectionObserver(
    observerRef,
    ([{ isIntersecting }]) => {
        if (isIntersecting) {
            isVisible.value = isIntersecting;
            stop();
        }
    },
    {
        rootMargin: props.rootMargin,
    }
);
</script>

Component where I use intersection observer:

<ItemObserver v-slot="{ isVisible }">
    <div :class="isVisible ? 'fade-in' : 'invisible'">
        <CarouselContent>
            <CarouselItem v-for="item in 8" :key="item">
                <NuxtLink
                    to="/">
                    Link
                </NuxtLink>
            </CarouselItem>
        </CarouselContent>
    </div>
</ItemObserver>

css:

@keyframes fadeIn {
    from {
        visibility: hidden;
        opacity: 0;
    }
    to {
        visibility: visible;
        opacity: 1;
    }
}

.fade-in {
    visibility: hidden;
    opacity: 0;
    animation: fadeIn 0.3s cubic-bezier(0.5, 0, 0.5, 1) forwards;
}
.invisible {
    visibility: hidden;
    opacity: 0;
}

Looking for a possible solution.

I’m new to Javascript and am having trouble understanding async functions (particularly the query function). I have a working query below but need to return the results of that query as an array.

const allComedians = "Comedians";
let shows = ["Heat 1","Heat 2","Heat 3","Heat 4","Heat 5","Showcase 1","Showcase 2","Showcase 3"];
let showKeys = ["1","2","3","4","5","6","7","8"];
let ActiveComedians = [];

function initialize () {
    for (let x = 0; x < shows.length; x++){
        if (project.title === shows[x]){
            wixData.query(allComedians).contains("showKey", showKeys[x])
                .eq("isActive", true)
                .find()
                .then((results) => {
                    for (let i = 0; i < results.items.length; i++){
                        let add = results.items[i].title.trim();
                        ActiveComedians.push(add);
                    }
             })
             .catch((err) => {
             console.log(err);
             })
             return ActiveComedians;
         }
    }
}

Thanks in advance for any clarity you are able to provide.

The above code runs the desired query and delivers the expected results, but I am unable to access the contents of my array ActiveComedians because it isn’t returned until after all other parts of my script execute.