javascript – Page 2814 – Blancer.com Tutorials and projects

In the Dictionary structure, implementation details are coded with JS Object, why we need this because we can use an Object directly [closed]

I implemented custom get, set methods for dictionary, and they perform the same operations as using objects.

 constructor(){    
    this.items = {} 
 }

And get Method

 get(key){
     return this.has(key) ? this.items[key] : undefined
 }

Set Method

set(key, value){
    this.items[key] = value
}

Iframe : Reload back and forward Navigation

I am having an Main application in web and I want to reload different iframe( hosted on different servers) based on the option he choses in main Application.When I am reloading the application the Since the iframe source is still the HomePage of iframe it loads the homePage For Solving that issue

import { useNavigate, useLocation } from 'react-router-dom';

type NavigateFunction = (path?: string) => void;

interface moduleStatePath {
  path : string;
  moduleName: string;
}
const CustomNavigate= () : NavigateFunction => {
  const navigate = useNavigate();
  const location = useLocation();



  const saveCurrentRoute = (currentPath: string) => {
    const path = window.location.href;
    console.log("path",JSON.stringify(path))
    window.parent.postMessage({ type: 'iframePath', value: path }, '*');
  };

  
  const navigateAndSave: NavigateFunction = (path) => {
    if(path){
      navigate(path);
      saveCurrentRoute(location.pathname); 
    }
  };
  
 

  return navigateAndSave;
};

export default CustomNavigate;

I wrote a wrapper of navigate which also sends a post message to parent and parent inturns saves in localStorage and it then load the iframe with source that we get from localStorage

const iframeUrl = localStorage.getItem("iframePath");
const src= iframeUrl ? iframeUrl : HOME_URL;
 <iframe ref={iframeRef} src={src} title='HOME'></iframe>

but it is hindering the backward and forward of browser why and how to fix it

Need an answer why following phenomenon is happening and how to fix it.

Jquery ajax post, can’t get data

I have add a button ,when button click ,will be using jQuery AJAX POST method ,
my button code as below,

 $('#add').click(function () {
     $.ajax({
        url: "/api/mysite/testfun/",
        type: "GET",
        dataType: "json",
        data:JSON.stringify({name:$('#name').val()}),
        contentType: "application/json;charset=utf-8",
        success: function (res) {
            var text = JSON.stringify(res);
            alert(text);
        },
        error: function (xhr, status, error) {
            alert($('#name').val());
            console.log(xhr.statusText)
        }
    });
});

but when i try to using the url to check ,get the error “Cannot GET /api/test-app/testfun/ “

testurl https://localhost/api/test-app/testfun/

my testfun is in /api/mysite.js,the part code as below,

exports.testfun= function(req, res){
 exports.req = req;
 exports.res = res; 
 return 'This is Index'

}

Is there something wrong with it?
Or are there other ways to test it?

how to remove virus in js file in html website [closed]

When I uploaded my code to the live server, everything initially remained the same. However, after 8 to 10 hours, the website became inaccessible. Upon investigation, I discovered that there is a virus in my JavaScript files, but I am unable to pinpoint which specific file is causing the issue. Can anyone provide assistance in resolving this issue?

I attempted to remove the infected JavaScript files and uploaded the cleaned versions to the live server. However, the website is not displaying properly. I need assistance in effectively eliminating the virus from my JavaScript files.

How to stop page refresh after okta token refresh after every 2 min

import React from "react";
import { Route, Redirect, Switch } from "react-router-dom";
import { useOktaAuth } from "@okta/okta-react";
import { Superadmin } from "../../../../Application_Constants";
import { AuthPage } from "./AuthPage";
import { ErrorPage1 } from "../../errors/ErrorPage1";
import { makeStyles, useTheme } from "@material-ui/core/";
import { Provider } from "react-redux";
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import reducer from "../../redux/reducer";
import Header from "../../header/Header";

const AppWithRouterAccess = () => {
  const store = createStore(reducer, applyMiddleware(thunk));

  const theme = useTheme();
  const { authState, oktaAuth } = useOktaAuth();

  return (
    <Switch>
      {!authState.isAuthenticated ? (
        /*Render auth page when user at `/auth` and not authorized.*/

        <Route>
          <AuthPage />
        </Route>
      ) : (
        /*Otherwise redirect to root page (`/`)*/
        <Redirect from="/auth" to="/" />
      )}

      <Route path="/error" component={ErrorPage1} />

      {!authState.isAuthenticated ? (
        /*Redirect to `/auth` when user is not authorized*/
        <Redirect to="/auth/login" />
      ) : (
        <>
          {/* provider used to integrates redux store with react application */}
          {/* redux provides a centralized store to manage the state of application */}
          <Provider store={store}>
            <Header />
          </Provider>
        </>
      )}
    </Switch>
  );
};

export default AppWithRouterAccess;

This is AppWithRouterAccess.js file. authState.isAuthenticated is getting refresh because Okta token refreshes and my page is getting refreshed and store refreshes. How can I stop my Redux to get refreshed after authState.isAuthenticated updates. Redux store should not get updated.

Why is the whole list not wrapping around the wrapper?

I’ve been trying to create a marquee text element, but one of the list items is leaking of out the list, I have no clue why that might be happening. Can someone help regarding this? I’ve attached a picture of what is happening and how can I make it one straight wrapper. https://i.stack.imgur.com/UIX85.png

var $tickerWrapper = $(".tickerwrapper");
var $list = $tickerWrapper.find("ul.list");
var $clonedList = $list.clone();
var listWidth = 10;

$list.find("li").each(function (i) {
  listWidth += $(this, i).outerWidth(true);
});

var endPos = $tickerWrapper.width() - listWidth;

$list.add($clonedList).css({
  width: listWidth + "px",
});

$clonedList.addClass("cloned").appendTo($tickerWrapper);

//TimelineMax
var infinite = new TimelineMax({
  repeat: -1,
  paused: true,
});
var time = 40;

infinite
  .fromTo(
    $list,
    time,
    {
      rotation: 0.01,
      x: 0,
    },
    {
      force3D: true,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    0
  )
  .fromTo(
    $clonedList,
    time,
    {
      rotation: 0.01,
      x: listWidth,
    },
    {
      force3D: true,
      x: 0,
      ease: Linear.easeNone,
    },
    0
  )
  .set($list, {
    force3D: true,
    rotation: 0.01,
    x: listWidth,
  })
  .to(
    $clonedList,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: -listWidth,
      ease: Linear.easeNone,
    },
    time
  )
  .to(
    $list,
    time,
    {
      force3D: true,
      rotation: 0.01,
      x: 0,
      ease: Linear.easeNone,
    },
    time
  )
  .progress(1)
  .progress(0)
  .play();

//Pause/Play
$tickerWrapper
  .on("mouseenter", function () {
    infinite.pause();
  })
  .on("mouseleave", function () {
    infinite.play();
  });

.tickerwrapper {
  position: relative;
  top: 30px;
  left: 0%;
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: pointer;
}

ul.list {
  position: relative;
  display: inline-block;
  list-style: none;
  padding: 40px;
  margin: 0;
  color: aliceblue;
}

ul.list.cloned {
  position: absolute;
  top: 0px;
  left: 0px;
}

ul.list li {
  float: left;
  padding-left: 20px;
}

.client_img {
  height: 4vw;
  padding-left: 100px;
}

 <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>


<div class="tickerwrapper">
  <ul class="list">
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
    <li class="listitem">
      <img alt="3d logo" class="client_img" src="https://assets.stickpng.com/images/60e7f964711cf700048b6a6a.png" />
    </li>
  </ul>
</div>

How is `@babel/runtime` implemented so that it can reference dependency outside `node_modules`?

From these lines on GitHub, they’re referencing the regenerator runtime:

    "./helpers/regeneratorRuntime": [
      {
        "node": "./helpers/regeneratorRuntime.js",
        "import": "./helpers/esm/regeneratorRuntime.js",
        "default": "./helpers/regeneratorRuntime.js"
      },
      "./helpers/regeneratorRuntime.js"
    ],
    "./helpers/esm/regeneratorRuntime": "./helpers/esm/regeneratorRuntime.js",

but if you see the source code folder there is nowhere you can find the files ./helpers/regeneratorRuntime.js or ./helpers/esm/regeneratorRuntime.js.

So how is this be done?

who can help me with this issue. This error comes up sometimes

“Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec”enter image description here

I trayed to resolve allot of times still Iam encountering this issue

I build a website that have several icon when it clicked it will do several task but it’s not working where do i do wrong?

HTML
<i class="scroll-up" id="scroll-up">
      <img
        src="assets/icons/icons8-upward-arrow.gif"
        class="socicon up-arrow"
        alt="scroll-up"
      />  
    </i>

CSS
.scroll-up {
  position: fixed;
  right: 0.5%;
  bottom: 3%;
  cursor: pointer;
}

.up-arrow {
  width: 3rem;
  height: 3rem;
}

Javascript
const scrollUp = document.querySelector("#scroll-up");

scrollUp.addEventListener("click", () => {
    window.scrollTo({
        top: 0,
        left: 0,
        behavior: "smooth",

    });
});

This is a button when you clicked it will go up to the top of the website but it isn’t working in my device

Disclaimer: Actually i followed a tutorial to make portfolio website here is the link if you wanna see it=text

Browser permission to retain file permission after refresh?

Let’s say that a user gives the browser permission to view/access a file. Then they refresh the page. Is there currently any mechanism to keep the permission to view that file afterwards? Here is an example in a database application showing what I mean:

https://www.loom.com/share/8b4d8b5b09384c8e90e3dbfca722b95f

I couldn’t find any mention of it in File API.

How do I design to phone using JavaScript and assign value to the buttons [closed]

I’m carrying out a voucher project, I want to design two phones that have different phone numbers.
But when I set function to display value, its working only on one phone.

Function display(val) {
document.getElementById(‘result’).value += val
return val
}

//but it working only on one phone not on the two phones.

I am having trouble retrieving the data using the resolver with @graphql-tools/load-files

I can’t use loadfiles method to get the resolver data, which will return null, but I can get it through ‘import Resolver from “./lists/utensils.resolvers.mjs”;’.

Here is my server.js file

import express from "express";
    import { graphqlHTTP } from "express-graphql";
    import { makeExecutableSchema } from "@graphql-tools/schema";
    import { loadFilesSync, loadFiles } from "@graphql-tools/load-files";
    
    async function loadResolvers() {
      return await loadFiles("**/*resolvers.mjs", {
        extensions: ["mjs"],
      });
    }
    
    async function startGraphQLServer() {
      try {
   
        const typesArray = loadFilesSync("**/*", { extensions: ["graphql"] });
    
        const resolverArray = await loadResolvers();
    
       
        const schema = makeExecutableSchema({
          typeDefs: typesArray,
          resolvers: resolverArray,
        });
    
        const app = express();
        app.use("/graphql", graphqlHTTP({ schema: schema, graphiql: true }));
        app.listen(3000, () => {
          console.log("Running GraphQL server");
        });
      } catch (error) {
        console.error("Error starting GraphQL server:", error);
      }
    }
    
    startGraphQLServer();

and this resolver.mjs file.

import getAll from "./utensils.model.mjs";

const utensilsModel = {
  Query: {
    products: async () => {
      try {
        return await getAll ();
      } catch {
        console.error(error);
        throw new Error("Failed to fetch utensils");
      }
    },
  },
};

export default utensilsModel ;

reset href attribute after clicking on modal

I have several buttons in gridview to call a bootstrap modal (the same modal but different contents):

return Html::a('<i class="fa">&#xf06e;</i> ', $key, [
                'title' => 'Lihat rincian agenda ini',
                'data-bs-toggle' => 'modal',
                'data-bs-target' => '#exampleModal',
                'class' => 'modal-link',
            ]);

return Html::a('<i class="fab text-danger fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
                    'title' => 'Laporan agenda belum disetujui',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);
 return Html::a('<i class="fab text-success fa-readme"></i> ', ['laporan/' . $model->id_agenda], [
                    'title' => 'Lihat laporan agenda ini',
                    'data-bs-toggle' => 'modal',
                    'data-bs-target' => '#exampleModal',
                    'class' => 'modal-link',
                ]);

This the JS to call the modal:

    $(function () {
    $('.modal-link').on('click', function (e) {
        e.preventDefault();
        $('#exampleModal').modal('show').find('#modalContent').load($(this).attr('href'));
    });
});

The first click on any button gives the correct contents (href). But the second click and next ones give content from the first click. How do I reset the contents so each click gives accurate href content?

html two sided range input

the image of required slider
i want a input range that has two side. the firt one has has complete slider and the second one has only thumb as shown in figure. one thing more i also need the values when the slider slides(value of B/W first and last thumb.
NOTE: only the first slider has complete body and the second only thumb and BG is #FAFAFA

the color of the design are:
1)#F8BC00
2)#FAFAFA

i try but i only able to create simple slider

html:

<div class="range-slider px-5">
                        <div class="thumb" id="firstThumb"></div>
                        <div class="thumb" id="secondThumb"></div>
                    </div>


JS:

const firstThumb = document.getElementById('firstThumb');
const secondThumb = document.getElementById('secondThumb');
const rangeSlider = document.querySelector('.range-slider');

// Initial thumb positions
let firstPosition = 0;
let secondPosition = 100;

// Update thumb positions based on user input
function updateThumbs() {
  firstThumb.style.left = `${firstPosition}%`;
  secondThumb.style.left = `${secondPosition}%`;
}

// Event listeners for dragging thumbs
firstThumb.addEventListener('mousedown', (event) => {
  startDrag(handleMouseMoveFirst);
});

secondThumb.addEventListener('mousedown', (event) => {
  startDrag(handleMouseMoveSecond);
});

// Touch event listeners for dragging thumbs on mobile devices
firstThumb.addEventListener('touchstart', (event) => {
  startDrag((e) => handleTouchMove(e, handleMouseMoveFirst));
});

secondThumb.addEventListener('touchstart', (event) => {
  startDrag((e) => handleTouchMove(e, handleMouseMoveSecond));
});

// Common function to start drag for both mouse and touch events
function startDrag(moveHandler) {
  document.addEventListener('mousemove', moveHandler);
  document.addEventListener('touchmove', moveHandler, { passive: false });
  document.addEventListener('mouseup', () => endDrag(moveHandler));
  document.addEventListener('touchend', () => endDrag(moveHandler));
}

// Common function to end drag for both mouse and touch events
function endDrag(moveHandler) {
  document.removeEventListener('mousemove', moveHandler);
  document.removeEventListener('touchmove', moveHandler);
}

// Update thumb position while dragging with mouse
function handleMouseMoveFirst(event) {
  firstPosition = Math.min(secondPosition, Math.max(0, (event.clientX - rangeSlider.getBoundingClientRect().left) / rangeSlider.offsetWidth * 100));
  updateThumbs();
}

function handleMouseMoveSecond(event) {
  secondPosition = Math.min(100, Math.max(firstPosition, (event.clientX - rangeSlider.getBoundingClientRect().left) / rangeSlider.offsetWidth * 100));
  updateThumbs();
}

// Update thumb position while dragging with touch
function handleTouchMove(event, moveHandler) {
  const touch = event.touches[0];
  const touchX = touch.clientX - rangeSlider.getBoundingClientRect().left;
  const touchPercentage = (touchX / rangeSlider.offsetWidth) * 100;

  if (moveHandler === handleMouseMoveFirst) {
    firstPosition = Math.min(secondPosition, Math.max(0, touchPercentage));
  } else if (moveHandler === handleMouseMoveSecond) {
    secondPosition = Math.min(100, Math.max(firstPosition, touchPercentage));
  }

  updateThumbs();
}

// Initial update
updateThumbs();

please help me to achieving this 🙂

parameter cc_lang_pref does not work in 2024?

Does the cc_lang_pref and cc_load_policy parameters not work in 2024? I’m trying to include them in my code, but they don’t seem to work. It only works when I set h1=es, but sometimes it gets stuck in the same language. In incognito mode, it can switch to other languages, but the primary language doesn’t work. In normal mode, only the primary language works, and the others don’t work.

var iframeCode = `<iframe height="500" src="${videoUrl}?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=0&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;hl=es" allowfullscreen allowtransparency allow="autoplay"></iframe>`;

..
..
..
..
..
..
..
..