Category: javascript

In my next js app some of the images are not loaded. In inspect element it shows that image is loaded successfully but some of the images in the list are not appearing. When I shrink viewport or refresh the images appear(In most cases). you can view the bug website enter image description hereenter image description here

I tried updating next js version from 13.4.3 to 14. I use sanity as CDN

I have an input element of the type number and prefilled with a zero.
Now i want to trigger some JS everytime the value changes…but

• It should not be triggered if the user presses backspace fort deleting the initial zero.
• It should be triggered if the user uses the arrows awailable for number fields

So this is not working because its getting triggered on backspace:

on(document, "change keydown", ".mynumberfield", function (e) {
...

Help with the problem. There are filled cells A1:A3, there are also filled cells B1:B3. I am adding a value to cell A4 and I need the available data to be in the range B1:B3 shifted down, that is, cell B1 became empty And the values that were in cells B1:B3 moved to cells B2:B4#1 BEFORE

#2 AFTER

it is worth noting that the cells in the first column are filled with the IMPORTAGE function

I tried the following code, but it doesn’t work:

function onEdit(e) {
 if (e && e.source) {
 if (e.source.getSheetName() !== 'Calculation') return;
 }
 if (e) {
 if (e.range && e.range.columnStart == 1 && e.range.rowStart == 1 && e.value != '') {
 var row = e.range.rowStart + 2;
 var column = e.range.columnStart + 1;
 var nextRow = row + 1;
 var nextColumn = column;
 var range = e.range.offset(nextRow, 0);
 if (SpreadsheetApp.getSheetByName('Calculation').getRange(range).isBlank()) {
 // Если диапазон пуст, активируем его
 SpreadsheetApp.getSheetByName('Calculation').getRange(range).activate();
 } else {
 // Если диапазон не пуст, добавляем сообщение об ошибке
 SpreadsheetApp.getActiveSpreadsheet().toast("Ошибка: диапазон не пуст");
 }
 } else if (e.range && e.range.columnStart == 1 && e.range.rowStart >= 2 && e.range.rowStart <= 3) {
 var row = e.range.rowStart + 1;
 var column = e.range.columnStart + 1;
 var nextRow = row + 1;
 var nextColumn = column;
 var range = e.range.offset(nextRow, 0);
 if (SpreadsheetApp.getSheetByName('Calculation').getRange(range).isBlank()) {
 // Если диапазон пуст, активируем его
 SpreadsheetApp.getSheetByName('Calculation').getRange(range).activate();
 } else {
 // Если диапазон не пуст, добавляем сообщение об ошибке
 SpreadsheetApp.getActiveSpreadsheet().toast("Ошибка: диапазон не пуст");
 }
 }
 }
}

I am trying to submit image in post api, but somehow I am not able to do it.

Currently I am using react-native-image-picker package.

On click of image selecting button, below function is being called. which is working fine.

    const handleImagePicker = async (item: string) => {
        const options: ImageLibraryOptions = {
          mediaType: 'photo',
        };
    
        try {
          const response = await launchImageLibrary(options);
    
          if (response.didCancel) {
            console.log('User cancelled image picker');
            return;
          }
    
          if (response.assets && response.assets.length > 0) {
            const {uri} = response.assets[0];
    
            if (item == 'Profile') {
              setSelectedProfileImage(uri);
              setProfilePictureEmpty(false);
            } else {
              setSelectedBannerImage(uri);
            }
          }
        } catch (error) {
          console.error('Error picking image:', error);
        }
      };

Then, On click of submit button below function is called.

 const addBusiness = async () => {
    const getUserId = async () => {
      try {
        const userId = await AsyncStorage.getItem('id');
        return userId;
      } catch (error) {
        return null;
      }
    };
    if (selectedProfileImage == '') {
      setProfilePictureEmpty(true);
      setErrMsg(string.enter_profile_picture);
    } else {
      var profileImg = {
        uri: selectedProfileImage,
      };
      var bannerImg = {
        uri: selectedBannerImage,
      };
      const userId = await getUserId();
      uploadImages(
        uploadImageAPI,
        businessDetails?.id,
        profileImg,
        bannerImg,
        (response: any) => {
          console.log(response)
          setSecondScreenEnabled(false);
        },
        (error: any) => {
          console.log('error', error);
        },
      );
    }
  };

here I am using custom API function. i.e., uploadImages.

Please find that function below:

export const uploadImages = async (
  url,
  Id,
  ProfilePicture,
  BannerPicture = null,
  onSuccess,
  onError,
) => {
  const formData = new FormData();
  instance.defaults.baseURL = Config.BASE_URL;

  const appendImage = (image, name) => {
    const { uri } = image;
    const fileType = uri.split('.').pop();
    formData.append(name, {
      uri: uri,
      type: `image/${fileType}`,
      name: `${name}.${fileType}`,
    });
  };

    formData.append('Id', Id);
 
  if (ProfilePicture) {
    appendImage(ProfilePicture, 'ProfilePicture');
  }

  if (BannerPicture) {
    appendImage(BannerPicture, 'BannerPicture');
  }

  try {
    const authToken = await getAuthToken();

    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    };

    if (authToken) {
      config.headers.Authorization = `Bearer ${authToken}`;
    }

    console.log('FormData:', formData);
    instance
        .put(url, formData, config)
        .then(function (response) {
          onSuccess(response.data);
        })
        .catch(function (error) {
          onError(error);
        });

    const response = await instance.put(url, formData, config);
    onSuccess(response.data);

  } catch (error) {
    if (error.response) {
      console.error('Response error:', error.response.data);
      console.error('Response status:', error.response.status);
      console.error('Response headers:', error.response.headers);
    } else if (error.request) {
      console.error('Request error:', error.request);
    } else {
      console.error('Error:', error.message);
    }
    onError(error);
  }
};

I am getting below error while submitting the image.

Request error: {"DONE": 4, "HEADERS_RECEIVED": 2, "LOADING": 3, "OPENED": 1, "UNSENT": 0, "_aborted": false, "_cachedResponse": undefined, "_hasError": true, "_headers": {"accept": "application/json", "authorization": "my_token"_responseType": "", "_sent": true, "_subscriptions": [], "_timedOut": false, "_trackingName": "unknown", "_url": "my_url", "readyState": 4, "responseHeaders": undefined, "status": 0, "timeout": 60000, "upload": {}, "withCredentials": true}

If anyone had face this thing and solved it then please help me out.

Thanks in advance 🙂

I wanted that when the openAddMenu method was called, the title in nuxt.config.js would be dynamically changed with the value “newTitle”.

Sidebar.vue

methods: {
         openAppMenu(itemIndex) {
              const newTitle = this.menuItems[itemIndex].title;
         },
}

nuxt.config.js

head: {
    title: 'XYZ', // this title
    meta: [
        {charset: 'utf-8'},
        {name: 'viewport', content: 'width=device-width, initial-scale=1'},
        {hid: 'description', name: 'description', content: pkg.description}
    ],
    link: [
        {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
    ]
},

I’m encountering an issue where for certain steps, the spotlight will be positioned correctly when I run it manually as a user, but then when I try to run it in an automated end to end test, the positioning is off. This same issue occurs with either cypress or selenium. I’ve added wait/pause calls in both tools to ensure that it wasn’t an issue of speed. Note that it is only the spotlight that is off in these instances, the tooltip is positioned correctly.

Below is a screencast of the behavior in cypress. There are some other issues with lags in spotlight positioning in the intermediate steps that don’t occur when run manually but eventually the spotlight is placed correctly. However with the last spotlight, it remains in the incorrect position. This creates a functional issue for the test since only the spotlight area can receive a mouse click. As a workaround I’m think of expanding the padding of the spotlight (using the spotlightPadding step config value) for only when running in the automated tests, but my preference of course is to try to avoid automated test specific code in the application code.
https://d.pr/v/L6dlRh

Here’s a screencast of the behavior when run manually:
https://d.pr/v/mQFQ3d

Here’s how I have the step in question configured in react-joyride:

{
 target: '.hip-modal-study-settings .hip-version-1',
 content: 'Click on Version 1',
 disableBeacon: true,
 disableScrolling: true,
 spotlightClicks: true,
},

Here’s how the joyride component is being called:

 <Joyride
        debug={true}
        continuous={true}
        stepIndex={stepIndex}
        steps={startTour && tourId !== null ? getTourList()[tourId].steps : []}
        showProgress={false}
        disableOverlayClose={true}
        disableOverlay={false}
        callback={handleJoyrideCallback}
        scrollToFirstStep
        run={startTour}
        styles={{
          options: {
            zIndex: 20000,
          },
          tooltip: {
            width: '250px'
          },
          spotlight: {
            transition: 'opacity 0.2s',
          }
        }}

      />

This is with the latest versions of react-joyride, cypress and selenium.

I am hoping someone can help me out.
OK, so I am creating a custom wordpress plugin which is based on this casette player demo from codrops: https://tympanus.net/codrops/2012/07/12/old-school-cassette-player-with-html5-audio/

I have so far created the metaboxes, custom post types etc, and added the required data to the WordPress REST API. For the actual audio tracks, the array from my AJAX request is working exactly as its supposed to, i.e. the player is working (nice!). The custom endpoint is here: https://dannysaber.dreamhosters.com/wp-json/wp/v2/songs and you can see the player working here: https://dannysaber.dreamhosters.com/tape-player-test/

What I would like to add here, is when a song is played, the title of the track is shown. I have managed to get the titles from the API, as an array, but I cannot figure out how to do this, my javascript is a bit rudimentary!

Another option I think that might work, is using something like this to get the ID3 tag of the actual tracks- https://github.com/aadsm/jsmediatags#browser (which also might support album art, if added). However, I think its best to get the data from the REST API. I am sure its possible, I just dont know how in this code to generate the song titles when a track is played. Am I doing the AJAX processing wrong? help is appreciated.

the code for the player is on this link (too long to copy here!) https://dannysaber.dreamhosters.com/wp-content/themes/dannysaber/js/jquery.cassette.js

In my HTML file is use Jquery scannerDetection. My problem is that if i select an input field the scanner writes to that input (cardnameinput) instead of the dedicated one (cardidinput). If i deselect everything the scanner inputs in the right field.

<input type="text" id="cardnameinput" class="k-textbox" style="width: 100%;"/>
<input type="text" id="cardidinput" class="k-textbox k-state-disabled" style="width: 
    100%;"/>

$(function () {
     $(window).scannerDetection({
         timeBeforeScanTest: 100, // wait for the next character for upto 200ms
         startChar: [188], // prefix character to start listening
         endChar: ["?".charCodeAt(0)], // suffix character eg end of scanning. We can not get the character code for "?" reliably, hence the use of "charCodeAt"
         avgTimeByChar: 45, // it's not a barcode if a character takes longer than 40ms
         ignoreIfFocusOn: "input",
         minLength: 4,
     });

     $(window).bind("scannerDetectionComplete", function (e, data) {
         console.log("Card succesfully scanned " + data.string);
         $("#cardidinput").val(data.string);
     }).bind("scannerDetectionError", function (e, data) {
         console.log("Error reading card " + data.string);
     });

     $("#siteDropDown").change(function () {
         var departmentComboBox = $("#departmentComboBox").data("kendoComboBox");
         departmentComboBox.dataSource.read();
         departmentComboBox.value("");
     });

     $("#createGuestCardButton").on("click", function (e) {
         e.preventDefault();
         checkGuestCard();
     });
 });

I’m trying to navigate to page on my application on page load with this code below

apex.navigation.dialog(‘f?p=110:25’, {
title: “Interactive Report”,
modal: true,
width: 800,
height: 600
});

But I’m getting Application 110 Dialog page 25 cannot be rendered successfully. Ensure the page template in use on page 25 is of template type “Dialog page”, with appropriate JavaScript dialog initialization, dialog closure and dialog cancel code defined. what could be the possible solutions to it?

I am developing my application using SvelteKit 2.0 with the JavaScript language.

On the development server, the source code appears to be enabled by default, enabling me to pinpoint the exact line numbers of errors in both the browser and server logs. I wish to achieve the same level of accuracy in the server logs for the production server, while ensuring that the browser cannot view my source code.

I tried the following configuration, but it didn’t work as my expect on the production server. Also, I checked the internet and don’t understand what sourcemap: 'hidden' exactly means and how doese it works?

vite.config.js

export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
    return {
        ...
        build: {
            sourcemap: 'hidden'
        }
    };
});

I have researched extensively, but I still do not understand source maps and their workings, nor do I know how to proceed.

Whenever I try and update state in my InView component, it brings back my AnimationText to the initial state it was in until I refresh. This is only when I update my darkNavbar state to inView. I’m wondering if this has to do with a rerender screwing up framer motion maybe?

app/page.tsx:

'use client';
import { useCallback, useEffect, useState } from 'react';
import styles from './page.module.scss';
import global from '@/scss/global.module.scss';
import { Container, Navbar, AnimatedText, Globe } from '@/components';
import { useMotionTimeline } from '@/hooks';
import { motion } from 'framer-motion';
import { timeline } from './timeline';
import cx from 'classnames';
import { InView } from 'react-intersection-observer';

const Home = () => {
  const heroScope = useMotionTimeline(timeline);
  const [darkNavbar, setDarkNavbar] = useState(false);

  return (
    <>
      <motion.div ref={heroScope} className={styles.heroContainer}>
        <Navbar />
        <Container>
          <section className={styles.heroSection}>
            <div className={styles.globeContainer}>
              <motion.div className={styles.globeBox} id="globe-box" initial={{ height: 0 }}>
                <AnimatedText
                  className={cx(global.heading, styles.heroTitle)}
                  id="hero-text"
                  auto={false}
                >
                  Optimizing your brand to maximize your impact
                </AnimatedText>
              </motion.div>
              <Globe id="globe" />
            </div>
          </section>
        </Container>
      </motion.div>
      <div className={styles.afterHero}>
        <Container className={styles.oneLineContainer}>
          <AnimatedText as="h2" className={cx(global.subheading, styles.oneLine)}>
            We’re giving the renewable energy space a makeover.
          </AnimatedText>
        </Container>

        <InView as="div" className={styles.expertiseContainer} onChange={(inView) => setDarkNavbar(inView)}></InView>
      </div>
    </>
  );
};

export default Home;

components/AnimatedText.tsx:

'use client';
import React, { useEffect } from 'react';
import { motion, useAnimate, stagger } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import styles from './AnimatedText.module.scss';

type TextElements =
  | 'p'
  | 'span'
  | 'a'
  | 'strong'
  | 'em'
  | 'blockquote'
  | 'h1'
  | 'h2'
  | 'h3'
  | 'h4'
  | 'h5'
  | 'h6';

interface ComposeTagProps {
  children: React.ReactNode;
}

export interface AnimatedTextProps {
  as?: TextElements;
  className?: string;
  children: string;
  auto?: boolean;
  id?: string;
}

export const AnimatedText = ({
  as = 'h1',
  className,
  children,
  auto = true,
  id,
}: AnimatedTextProps) => {
  const textArr = children.split(' ');

  const ComposeTag = ({ children }: ComposeTagProps) => {
    return React.createElement(as, { className, id }, children);
  };

  const ComposeMotion = motion(ComposeTag);

  const { ref, inView } = useInView({ triggerOnce: true });

  const [scope, animate] = useAnimate();

  useEffect(() => {
    if (auto && inView) {
      animate(
        'span',
        {
          opacity: 1,
          y: 0,
        },
        {
          delay: stagger(0.0185),
          ease: 'linear',
        },
      );
    }
  }, [inView, auto, animate]);

  return (
    <div ref={scope}>
      <div ref={ref}>
        <ComposeMotion>
          {textArr.map((word, idx) => (
            <motion.span
              key={`${word}-${idx}`}
              className={styles.word}
              initial={{ opacity: 0, y: 8 }}
            >
              {idx === textArr.length - 1 ? word : `${word} `}
            </motion.span>
          ))}
        </ComposeMotion>
      </div>
    </div>
  );
};

export default AnimatedText;

I am trying to create a redirect to the default browser if a user opens my website link using the Facebook or Instagram in-app browser.

So far, my solution works on Android, where a dialog box informs the user that they are about to leave the app, and the user has to click “Continue.” This behavior is acceptable for my needs.

However, on iOS/iPhone, my code doesn’t seem to work at all. I can’t figure out how to make the code work on iOS as well. I suspect it might be related to the fact that iOS does not support the googlechrome:// scheme in the same straightforward way Android supports intent://. I tried using http:// as a fallback, but that didn’t work either.

Here is my current code:

(function() {
    function isFacebookOrInstagramApp() {
        var ua = navigator.userAgent || navigator.vendor || window.opera;
        return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1) || (ua.indexOf("Instagram") > -1);
    }

    if (isFacebookOrInstagramApp()) {
        var url = window.location.href;
        var iosUrl = 'googlechrome://' + url.replace(/^https?:///, '');
        var androidUrl = 'intent://' + url.replace(/^https?:///, '') + '#Intent;scheme=http;package=com.android.chrome;end';

        // Check if the device is iOS or Android
        if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
            window.location.href = iosUrl;
        } else if (/Android/i.test(navigator.userAgent)) {
            window.location.href = androidUrl;
        } else {
            // Fallback for other devices
            window.location.href = 'http://' + url.replace(/^https?:///, '');
        }
    }
})();

I’m trying to create a scroll animation similar to the one found on Stripe’s homepage, starting from the “Modular solutions” section. Upon inspecting their site, I noticed they use SVGs within div tags, but I couldn’t figure out the exact technique they’re using to achieve this smooth animation effect.

Here is the Stripe homepage for reference.

Could someone explain or provide guidance on how to replicate this type of scroll animation? What libraries or techniques are typically used for such animations?

Thank you!

I have problem because in Picasa location marker gone.
This marker as I know is generated by Google Maps API and JS.

I am trying to find a developer who help me resolve this issue.
Here you can find similar solution here https://www.dpreview.com/forums/post/67706757 for this problem.
Unfortunately, this solution stopped working a few weeks ago.

Need a bit of help, removed all the activetab permissions from manifest.json but it’s still getting flagged by asking why I need it:

{
  "manifest_version": 3,
  "name": "MoodMender",
  "version": "1.0",
  "description": "An extension to lift your mood with happy and motivational content.",
  "permissions": ["storage"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

document.addEventListener("DOMContentLoaded", function() {
    // Retrieve user preferences from storage
    chrome.storage.sync.get(["sadContent", "cheerContent", "motivateContent"], function(data) {
        // Set default search terms if user preferences are not available
        const defaultSearchTerms = {
            sadContent: "happy cat videos",
            cheerContent: "funny comedy sketches",
            motivateContent: "motivational speeches"
        };

        // Bind event listeners to buttons
        document.getElementById("sadButton").addEventListener("click", function() {
            const searchQuery = data.sadContent || defaultSearchTerms.sadContent;
            openNewTab(`https://www.youtube.com/results?search_query=${encodeURIComponent(searchQuery)}`);
        });

        document.getElementById("cheerButton").addEventListener("click", function() {
            const searchQuery = data.cheerContent || defaultSearchTerms.cheerContent;
            openNewTab(`https://www.youtube.com/results?search_query=${encodeURIComponent(searchQuery)}`);
        });

        document.getElementById("motivateButton").addEventListener("click", function() {
            const searchQuery = data.motivateContent || defaultSearchTerms.motivateContent;
            openNewTab(`https://www.youtube.com/results?search_query=${encodeURIComponent(searchQuery)}`);
        });

        document.getElementById("customizeButton").addEventListener("click", function() {
            openNewTab(chrome.runtime.getURL("settings.html"));
        });
    });

    // Function to open a new tab
    function openNewTab(url) {
        chrome.tabs.create({ url: url });
    }
});

Tried removing Activetabs permission and updated on chrome still got rejected. Removed the permission and repackaged as new upload but still has the activetabs permisssion.