Category: javascript

I want to make a button that has this highlight effect when the user hovers over it that works with rounded corners. (Effect is the second button)

https://codepen.io/sarath-ar/pen/dMKxxM

.btn-2::before,
.btn-2::after {
  transition-delay: 0s;
}

.btn-2 span::before,
.btn-2 span::after {
  transition-delay: 0.2s;
}

.btn-2::before {
  right: 0;
  top: 0;
}

.btn-2::after {
  left: 0;
  bottom: 0;
}

.btn-2 span::before {
  left: 0;
  top: 0;
}

.btn-2 span::after {
  right: 0;
  bottom: 0;
}

.btn-2:hover::before,
.btn-2:hover::after {
  transition-delay: 0.2s;
}

.btn-2:hover span::before,
.btn-2:hover span::after {
  transition-delay: 0s;
}

<button class="btn-2"><span>Hover Me</span></button>

I have been unable to successfully make the effect work for a curved button

I need help on how to use proxy that has authentication in selenium-webdriver in javascript. If the proxy only use host:port, the webdriver works fine. But if i use proxy like user:pass@host:port, the webdriver cant reach the url.

const webdriver = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

(async function example() {
    const proxyUrl = `http://user:pass@host:port`;

    const opts = new chrome.Options()
        .addArguments(
            `--proxy-server=${proxyUrl}`,
        );

    const driver = new webdriver.Builder()
        .forBrowser('chrome')
        .setChromeOptions(opts)
        .build();

    try {
        await driver.get("https://ipinfo.io/json");

        const pageSource = await driver.getPageSource();
        
        console.log(pageSource);
    } finally {
        await driver.quit();
    }
}());

And this is what i got when i use proxy that has auth:

<script jstcache="0">
  var loadTimeDataRaw = {
    "details": "Details",
    "errorCode": "ERR_NO_SUPPORTED_PROXIES",
    "fontfamily": "'Segoe UI', Tahoma, sans-serif",
    "fontfamilyMd": "'Segoe UI', Tahoma, sans-serif",
    "fontsize": "75%",
    "heading": {
      "hostName": "ipinfo.io",
      "msg": "This site can’t be reached"
    },
    "hideDetails": "Hide details",
    "iconClass": "icon-generic",
    "language": "en",
    "suggestionsDetails": [],
    "suggestionsSummaryList": [],
    "summary": {
      "failedUrl": "https://ipinfo.io/json",
      "hostName": "ipinfo.io",
      "msg": "The webpage at u003Cstrong jscontent="failedUrl">u003C/strong> might be temporarily down or it may have moved permanently to a new web address."
    },
    "textdirection": "ltr",
    "title": "ipinfo.io"
  };
</script>undefined</body>undefined</html>

I have been facing some issue with my application that I hosted on the Vercel, but the problem i am facing is that it is only rendering response as JSON rather than the full index.html.

This is in my localhost

This is on my vercel website – https://task-manager-five-sepia.vercel.app/

I am not sure what is i am missing in my vercel website repo.

Expectation was that it shows me the application just like what i am able to use it in my localhost.
NOTE : Deployment related things are sorted in vercel, every change i make in my repo

I am using TelerikUpload control for file Upload. I am able to upload and download file without any issue. Currently for download when I click on download its downloading the file to Download folder. Instead of downloading, I want the file to be opened in a new browser tab without downloading. Any help on how this can be achieved. Please see my below code.

//Razor file
<script type="text/javascript">
    function downloadAttachment(filename, content, mimeType) {
        var blob = new Blob([content], { type: mimeType });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);        
        link.download = filename;
        link.click();
        window.URL.revokeObjectURL(link.href);
    }
</script>
<TelerikButton  @onclick="() => AttachmentDownload(item)">Download</TelerikButton>


//Razor.cs file
 private async Task AttachmentDownload(Attachment attachment)
 {
     var extension = Path.GetExtension(attachment.fileName);
     var mimeType = MimeTypeHelper.GetMimeType(extension);
     byte[] ByteArray = FileStorage.ReadFile(attachment.Path);

     if (ByteArray != null)
     {
         await JSRuntime.InvokeVoidAsync("downloadAttachment", attachment.fileName, ByteArray, mimeType);
     }           
 }
 
 public static string GetMimeType(string extension)
{
    switch (extension)
    {
        case ".pdf":
            return "application/pdf";
        case ".csv":
            return "text/csv";
        case ".txt":
            return "text/plain";
        default:
            return "application/octet-stream";
    }
}

I’ve been using this code below to remove attributes added by a 3rd party library from my webapp on runtime.

document.addEventListener('DOMNodeInserted', () => {
  const elements = document.querySelectorAll('[aria-owns]');
  elements.forEach(element => {
    element.removeAttribute('aria-owns')
  })
})

However recently, we’ve been getting this error in the console:

[Deprecation] Listener added for a ‘DOMNodeInserted’ mutation event.
Support for this event type has been removed, and this event will no
longer be fired. See https://chromestatus.com/feature/5083947249172480
for more information.

The summary is that DOMNodeInserted shouldn’t be used anymore for performance reasons, and more importantly bc it will stop working in the near future. It links to an article that mentions that using MutationObserver is the viable option.

However, MutationObserver doesn’t expose Elements, just nodes.

This is what I tried:

const observer= new MutationObserver(mutationList =>{
  mutationList.forEach(mutationRecord => {
    const elements= document.querySelectorAll('[aria-owns]');
    elements.forEach(element => 
      element.removeAttribute('aria-owns')
    )
  })
});
observer.observe(document, {
  childList: true, 
  subtree: true, 
  attributeFilter: ['aria-owns']
};

but if I understand correctly how MutationObserver works, then it feels like an overkill to get all the elements in the document with document.querySelectorAll('[aria-owns]') then iterate over them one by one to remove the attribute, if mutationRecod already yields a collection of the nodes that have just mutated and contain the attribute I am looking for.

is there a way to access the element from the nodes yielded by the MutationObserver?
or what is the correct way to edit the attributes of the nodes with a MutationObserver?

I have a Flutter Web application. In it, I use push notifications. The start screen is the login screen. I have two scenarios:

1. First launch of the application:
   When the user clicks “login”, I request permission to receive push notifications – a dialog appears, and I register handlers for notifications.

   NotificationSettings result = await FirebaseMessaging.instance.requestPermission();
   

Currently, everything works fine.

2. Reloading the page in the browser:
   However, when I reload the page in the browser, it doesn’t work.
   Although the login page opens after reloading, and I click “login”.
   The same code as in “scenario 1” is executed when clicking. The only difference is that the “permission dialog” does not appear, but that makes sense since I have already granted permission. However, in this case, push notifications do not work.

what could be the reason? how to fix it?

Because ckeditor 4 is showing a EOL warning, I’m now trying to migrate to ckeditor 5. However, I ‘m having multiple problems with ckeditor 5. One problem is with on change and getting plain text from the HTML textbox. Other problems are with view source layout is narrow and changes how the HTML code looks from what I was expecting. Also, the saved HTML and Plain text is causing mail delivery error: ” message has lines too long for transport”

I had this JavaScript code in ckeditor 4:

'on: {
    change: function( evt ) {
     // Do somethign here
    ckText = CKEDITOR.instances.htmltext.getData();
var div = document.createElement("div");
div.innerHTML = ckText;
var cleanText = div.textContent || div.innerText || "";
document.getElementById("plaintext").value = cleanText;
    }
} '

It worked great!

but with ckeditor 5 with this code:

'  editor.model.document.on('change:data', () => {                    
  // Do somethign here   
 var div = document.createElement("div");
 div.innerHTML = editor.getData();
var cleanText = div.textContent || div.innerText || "";
document.getElementById("plaintext").value = cleanText;
          }
      }

‘
ckeditor 5 removes all of the spacing between the paragraphs. Making it one continuous block.

The other problem is when I click on show source, I’m expecting to see HTML code similar to what I see when I’m coding a website, but what I’m seeing is new lines for every p and /p tag. It also changes the width for the textbox.

Plus, emails are being kicked backed as not deliverable because of error. I was testing the same email body that was originally created in ckeditor 4 that had no problem being delivered.

I am working on a one page website engine where I load pages into a single DIV. The link is in a DIV such as the one below.

<div id="nav" title="Homepage" data-target="practice-page-1.php" data-value="?url=homepage">Homepage</div>

data-target = is a php file

data-value = a URL that I add at the time the php file is loaded into the content DIV

I am trying to load the correct page into the content DIV when the user uses the back or forward button in the browser. The actual website address never changes, but I append a unique URL to it for different functionalities. I can capture the full URL using the below. The back and forward buttons do move through URLs, but the usual methods to capture these movements don’t work. I need the content in the DIV to move along with browser backward and forward action.

//DETECT ANY NAVIGATION CHANGE AND LOAD PAGE FOR FORWARD AND BACKWARD CHANGES  
        window.navigation.addEventListener("navigate", (event) => {
            var changedURL = event.destination.url;
            console.log(changedURL);
})

changedURL shows the hole URL (example: practice.php?url=page3). I just want the part starting with the question mark and after (my added URL), which is the data-element “value”. I need to cut the value out of the address and then find the corresponding target (practice-page-3.php).

Then I can load that target file into the content DIV just fine.

I want to add Options value in the reportFields List dynamically using the categoryOptions state management which get the values from the getAllCategories function. I’m going somewhere wrong but don’t know where.

    import { useState, useEffect } from 'react';
    
    const getAllCategories = () => {
      let url = `/category/list/active`;
      return http.get(url)
        .then(response => {
          const data = response.data;
          if (data.ok) {
            return data.data;
          } else {
            return [];
          }
        })
        .catch(error => {
          console.error('Error:', error);
          return [];
        });
    };
    
    interface Category {
      id: string;
      name: string;
    }
    
    const [categoryOptions, setCategoryOptions] = useState([]);
    
    useEffect(() => {
      async function getCategoryOptions() {
        const categories = await getAllCategories();
        setCategoryOptions(
          categories.map((category: Category) => ({
            value: category.name,
            text: category.name,
          }))
        );
      }
      getCategoryOptions();
    }, []);
    
    
    export const reportFields = [
      {
        "headerName": "Category",
        "field": "category_id",
        "disabled":false,
        "default":true,
        "prefix": "",
        "suffix": "",
        "dbField": "final.category_name",
        "type": "string",
        "options": categoryOptions
      }
    ]

I’m migrating a large application from Nuxt 2 to Nuxt 3 and I decided to create a fresh Nuxt 3 application and move code from my previous version to this one but I encountered a problem in my nuxt.config.js file when adding my old middleware array in the configuration. Here’s what it looks like:

export default defineNuxtConfig({
  // ... some other configs
  router: {
    middleware: ["redirect", "authenticated"], 
    // line above returns an error that this option doesn't exist
    base: `${process.env.ROUTER_BASE}`,
  },

I already have my middleware folder in my project structure but I want to know how should I define this in my config file, I used to have a problem in Nuxt 2 where I needed to specify the order in which my middleware functions where executed and I fixed that by setting the order in my middleware array, I’m looking for the same behavior in Nuxt 3 but I can’t find any docs on this part of my migration

I’m trying to create a countdown timer in React using Framer Motion, where the digits change with a flip effect. I want the top half of the card to “fall” or “flip” down when the digit changes, creating a smooth animation effect. However, I’m having trouble getting the flip animation to work correctly. Here’s the code I have so far:

import React, { useState, useEffect } from 'react'
import { motion, AnimatePresence } from 'framer-motion'

const Countdown = () => {
  const initialCount = 2 * 24 * 60 * 60
  const [count, setCount] = useState(initialCount)

  // useEffect para decrementar a contagem a cada segundo
  useEffect(() => {
    if (count > 0) {
      const timer = setTimeout(() => setCount(count - 1), 1000)
      return () => clearTimeout(timer)
    }
  }, [count])

  // Função para formatar o tempo em dias, horas, minutos e segundos
  const formatTime = (seconds: number) => {
    const days = Math.floor(seconds / (24 * 60 * 60))
    const hours = Math.floor((seconds % (24 * 60 * 60)) / 3600)
    const minutes = Math.floor((seconds % 3600) / 60)
    const secs = seconds % 60
    return { days, hours, minutes, secs }
  }

  const { days, hours, minutes, secs } = formatTime(count)

  const FlipDigit = ({ digit }: { digit: string }) => {
    return (
      <div className='relative w-20 h-32 bg-gray-800 text-white rounded-lg shadow-lg overflow-hidden'>
        <div className='absolute inset-0 flex flex-col'>
          <div className='h-1/2 w-full overflow-hidden'>
            <AnimatePresence mode='popLayout'>
              <motion.div
                key={`top-${digit}`}
                initial={{ rotateX: 0 }}
                animate={{ rotateX: 0 }}
                exit={{ rotateX: 90 }}
                transition={{ duration: 0.3, ease: 'easeInOut' }}
                style={{
                  transformOrigin: 'bottom',
                  backfaceVisibility: 'hidden',
                  boxShadow: '0 10px 20px rgba(0, 0, 0, 0.5)',
                }}
                className='absolute inset-0 flex items-center justify-center bg-gray-700'
              >
                <span className='text-6xl'>{digit}</span>
              </motion.div>
            </AnimatePresence>
          </div>
          <div className='h-1/2 w-full overflow-hidden'>
            <div className='absolute inset-0 flex items-center justify-center bg-gray-700'>
              <span className='text-6xl'>{digit}</span>
            </div>
          </div>
        </div>

        <div className='absolute top-1/2 w-full h-[1px] bg-gray-600'></div>
      </div>
    )
  }

  // Componente para a unidade de tempo (dias, horas, etc.)
  const FlipUnit = ({ value, label }: { value: number; label: string }) => {
    const paddedValue = String(value).padStart(2, '0')
    return (
      <div className='flex flex-col items-center'>
        <FlipDigit digit={paddedValue} />
        <div className='mt-2 text-xl text-gray-400'>{label}</div>
      </div>
    )
  }

  return (
    <div className='flex justify-center items-center h-screen bg-gray-900'>
      <div className='flex space-x-8'>
        <FlipUnit value={days} label='DAYS' />
        <FlipUnit value={hours} label='HOURS' />
        <FlipUnit value={minutes} label='MINUTES' />
        <FlipUnit value={secs} label='SECONDS' />
      </div>
    </div>
  )
}

export default Countdown

Here is the code in codesandbox

upon clicking the div the background color of div should changes as per the selected type of color either rgb or hex color mode but the problem is when type of color is hex ,things go perfectly fine, chnages the backgroud color randomly on clicking the div but on clicking rgb button rgb color value changes but background color dont change.

import { useState, useEffect } from 'react';

export default  function RandomColor() {

    const [typeOfColor, setTypeOfColor] = useState('rgb')
    const [color, setColor] = useState('#000000')

    

    function randomColorUtility(length) {
        return Math.floor(Math.random() * length);
    }



    function handleCreateRandomHexColor() {
        const hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
        let hexColor = "#";

        for (let i = 0; i < 6; i++) {
            hexColor += hex[(randomColorUtility(hex.length))]
        }
        
        setColor(hexColor);
    }

    function handleCreateRandomRGBColor() {
        let r = randomColorUtility(256);
        let g = randomColorUtility(256);
        let b = randomColorUtility(256);
        setColor(`(${r},${g}, ${b})`);
    }

    useEffect(() => {
        if (typeOfColor === "rgb") handleCreateRandomRGBColor();
        else handleCreateRandomHexColor();
      }, [typeOfColor]);
    



    

    return (
        <div   onClick={
            typeOfColor === "hex"
              ? () => handleCreateRandomHexColor()
              : () => handleCreateRandomRGBColor()
          }style={{
            width: "100w",
            height: "100vh",
            background: {color},
        }}>
            <button onClick={() => setTypeOfColor("hex")}>Create HEX Color</button>
            <button onClick={() => setTypeOfColor("rgb")}>Create RGB Color</button>
            {/* <button onClick={handleCreateRandomColor}> Generate Random Color </button> */}
            <div 
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          color: "#fff",
          fontSize: "60px",
          marginTop: "50px",
          flexDirection  :'column',
          gap :'20px'
        }}>

                <h3>{typeOfColor === "rgb" ? "RGB Color" : "Hex Color"} </h3>
                <h1> {`${color}`}</h1>

            </div>
        </div>
    );
}

I’ve been able to create most elements on this Popup box, but I find it very difficult to create a dark background Overlay when Popup box is opened. Also to Reposition the Close button to the top-right corner inside the Popup box. And lastly, to tap anywhere outside the Popup box to close Popup. Is there a way to make this happen with CSS?

This is exactly what I want

This is what I’ve been able to do

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">

<style>
body {
    background-color: #b0b0b0  !important;
}

.txtrmv {
    position: absolute !important;
    border: none !important;
    font-size: 20px !important;
    color: white !important;
    margin: 0 !important;
    padding: 0 !important;
    text-decoration: none !important;
}

</style>
</head>
<body>
<br><br><br><br><br>
  <a class="trigger_sb_divi_modal template-pop trigger_template-31291 cboxElement txtrmv"
            data-href="#template-31291">&#x5B;CLICK TO SHOW VIDEO&#x5D;</a>

            <div style="display:none;">
              <div class="sb_divi_modal" id="template-31291">
                <div class="container-popup">
                  <div class="video-wrap">
                    <video src="https://btcscriptsmaker.com/Testvideo1.mp4" controls="" muted="muted"
                    preload="none" class="image fit" style=
                    "width: 100%; visibility: visible;"></video>
                  </div>
                </div>
              </div>
            </div>

  <script src="https://btcscript.net/assets/js/jqscript.js" type=
  "d9698a347787f66e577c9a00-text/javascript"></script>
  <script src=
  "https://btcscript.net/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js"
  data-cf-settings="d9698a347787f66e577c9a00-|49" defer></script>
</body>
</html>

I’d like to make a javascript bookmarklet for Chrome which generates the date of a linkedin.com post and creates an alert.

So the date of a post like this one from Bill Gates:
https://www.linkedin.com/posts/williamhgates_what-do-kangaroos-have-to-do-with-newborn-activity-7222643141433028611-LDNX/

I’ve used this website to find out it was posted on Fri, 26 Jul 2024
https://ollie-boyd.github.io/Linkedin-post-timestamp-extractor/

Is it possible to make the javascript that sits behind this webpage into a bookmarklet?
https://ollie-boyd.github.io/Linkedin-post-timestamp-extractor/extractor.js

I’ve tried editing:

const linkedinURL= document.querySelector("#url").value;

to change #url to

window.location.protocol + "//" + window.location.hostname + window.location.pathname

And i tried changing the output to an alert()

I tried using javascript compression website to make it into a bookmarklet format

I have build a chrome extension and inside the chrome extension i created an iframe and in src field of iframe i pasted my application url. so whenever user open the extension it will open my application, But the issue is i want to store the user data(credentials, token) in such a way that if user open the extension in other pages/tabs the data(credentials, token) should be accessible, in my application im using localStorage to store the user credentials, but when user switches to other tabs, there is no information i localStorage
Example: User opened a coding platform leetcode and logged in my applition by opening extension, but when user switched to other tab, GFG then user is again asked to login

I want to store the user credentials such a way that it will only ask user once and the data should be accessible to different tabs

I tried by emitting an event through the extension background.js and i also added eventListner in my application but not able to receive the data which was sent through extension

content.js

    window.addEventListener('message', function(event) {
        const {href} = window.location
        if(event.data.action === 'token-updated'){
            console.log("token updated", event.data.token)
            chrome.storage.local.set({ token: event.data.token }).then(() => {
                console.log("Value is set", event.data.token);
            });
    
            chrome.storage.local.get(["token"]).then((result) => {
                console.log("Value is " + result.token);
            });
        } else if (event.data.action === 'requestData') {
            const key = event.data.key;
    
            // Get the requested data from Chrome storage
            chrome.storage.local.get([key], (result) => {
                const data = result[key];
    
                // Send the data back to the iframe
                event.source.postMessage({ action: 'responseData', data: data }, event.origin);
            });
        }
    });

manifest.json

    {
        "manifest_version": 3,
        "name": "Api Analyzer",
        "description": "Analyzes all ypu API's and give optimization of api tips",
        "author": "Chary",
        "version": "0.0.1",
        "action": {
        "default_icon": {
            "16": "images/logo16.png",
                "48": "images/logo48.png",
                "128": "images/logo128.png"
        }
    },
        "permissions": [
        "storage",
        "tabs",
        "activeTab",
        "declarativeContent"
    ],
        "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"],
            "all_frames":true
        }
    ],
        "background": {
        "service_worker": "background.js"
    },
        "icons": {
        "16": "images/logo16.png",
            "48": "images/logo48.png",
            "128": "images/logo128.png"
    },
        "web_accessible_resources": [{
        "resources": [
            "images/*.png"
        ],
        "matches": ["http://*/*", "https://*/*"],
        "extension_ids": []
    }]
    }

background.js

    chrome.action.onClicked.addListener(function (tab) {
        console.log("ckicked")
    });
    
    chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
        console.log(request, sender, sendResponse)
        if (request.action === 'requestData') {
            sendResponse({data: { value: "my value"});
        }
    });