Category: javascript

I’m trying to make a scrollbar in my app but there seems to be a bug. When I scroll and it gets to the bottom of the page it overlaps to the footer.

Bug description photo here

This is the scrollbar css

var changer = document.querySelector(".toc-wrapper");
var body = document.querySelector("body")

window.addEventListener('scroll', (event) => {
  let scroll = this.scrollY;
  var place = window.location.href
  console.log('SCROLLY', scroll)

  if (place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/docs/api/api.html#zks-l1chainid") {
    changer.style.height = "50vh"
  } else if (scroll <= 21340) {
    changer.style.height = "70vh"
  }

  if (place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/docs/api/js/utils.html#undol1tol2alias" || place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/api/js/utils.html#sleep") {
    changer.style.height = "50vh"
  } else if (scroll <= 18560) {
    changer.style.height = "70vh"
  }

  if (place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/docs/api/js/accounts.html#getting-token-balance-on-l1-1" && scroll >= 13100) {
    changer.style.height = "50vh"
  } else if (scroll <= 13100) {
    changer.style.height = "70vh"
  }

  if (place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/docs/dev/developer-guides/aa.html#example-of-using-the-library" || place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/dev/developer-guides/aa.html#verifying-aa-signatures-within-our-sdk") {
    changer.style.height = "50vh"
  }

  if (place == "https://aqwzx-zksync-v2-docs--pr484-feat-doc-222-rs0trdzc.web.app/docs/dev/building-on-zksync/contracts/differences-with-ethereum.html#gasperpubdatabyte-should-be-taken-into-account-in-development") {
    changer.style.height = "50vh"
  }

  if (place == "http://localhost:8080/docs/dev/troubleshooting/faq.html#proof-sampling-on-testnet") {
    changer.style.height = "50vh"
  }

  if (place == "http://localhost:8080/docs/api/js/types.html#transactionresponse") {
    changer.style.height = "50vh"
  }
})

In react app, I am using @rjsf/core Form and passing schema from backend like

  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "type": "object",
  "properties": {
    "emailAddress": {
      "type": "string",
      "minLength": 1,
      "format": "idn-email"
    },
    "password": {
      "type": "string",
      "minLength": 16,
      "maxLength": 50
    },
    "passwordResetLink": {
      "default": "http://localhost:8080/passwordReset",
      "type": "string"
    }
  },
  "required": [
    "emailAddress",
    "password"
  ]
}

and uiSchema is like

    "ui:submitButtonOptions": {
      props: {
        disabled: false,
        className: "btn btn-warning",
      },
      submitText: formConstants.buttons.LOGIN,
    },
    emailAddress: {
      "ui:options": {
        label: false,
        placeholder: formConstants.requiredFields.EMAIL,
      },
    },
    password: {
      "ui:widget": "password",
      "ui:options": {
        label: false,
        placeholder: formConstants.requiredFields.PASSWORD,
      },
    },
    passwordResetLink: {
      "ui:options": {
        label: false,
      },
      "ui:widget": CustomForgotPasswordField,
    },
  };

CustomForgotPasswordField is like,

const CustomForgotPasswordField = (props) => {
  const linkText = props.passwordResetLinkText || "Hello";
  const linkUrl = props.passwordResetLinkUrl || "www";

  return (
    <div className="form-group">
      <p>
        <a href={linkUrl}>{linkText}</a>
      </p>
    </div>
  );
};
export default CustomForgotPasswordField;

Link UI is displaying based on my requirement but I want to pass Link and Text dynamically from outside of a component. So I want to use it as props here but right now props are not supporting.

If I change "ui:widget": CustomForgotPasswordField then whole link UI will go off.

Please help me to achieve this

In HLA Assembly Language.I am stuck in this project multiplesOfAnother Function in HLA Assembly language program.
I need help in it.
procedure multiplesOfAnother( i: int32; j : int32 ); @nodisplay; @noframe;
I am expecting this function should return into EAX the value 1 if the parameters are multiples of one another; otherwise, return into EAX the value 0. In order to receive full credit, you should be preventing register corruption by preserving and then restoring the value of any register your function touches. This rule applies to every register except for EAX which is being used to pass an answer back to the calling code.
Feed Me i: 10
Feed Me j: 20
EAX = 1

I have a dataset that includes dates (as DespatchDate) with a number of other fields.

I would like to filter this dataset to exclude weekends.

I thought I could just use

if (vm.showWeekends == false) {
  vm.reportData = vm.reportData.filter(DespatchDate => DespatchDate.getDay() !== 0 && DespatchDate.getDay() !== 6 )
}

However I get an error that getDay() is not a function. I assume this is because I need to parse the dates first, but how do I parse the whole dataset in one go? I don’t want to use a loop if I can help it for speed.

I am using spectrum color selector to select the color of events for my calendar (fullcalendar) and It works just fine. The problem comes when i try to modify one of those events. I have two different color selectors (both of them are spectrum) and I want the default color selected on that color selector (the one where i modify the event) to have the same color than the event, but if i update it manually this happens:

If i don’t change the default color	If i do change it to the event color

Here’s the code where I create the color selector:

$("#color-picker > li > div").spectrum({
                    preferredFormat: "hex",
                    showInput: true,
                    showPalette: true,
                    palette: [
                      ["#3c8dbc", "#f56954", "#00a65a", "#f39c12", "#00c0ef", "#d2d6de"]
                      // Añade los colores que desees a la paleta
                    ],
                    change: function(color) {
                      // Guarda el color seleccionado
                      currColor = color.toHexString();
                    //document.getElementById("color-picker-btn").setAttribute('style', 'color:'+currColor+';');
                    },
                    cancelText: "Cancelar",
                    chooseText: "Elegir",
                    clearText: "Limpiar",
                    noColorSelectedText: "Ningún color seleccionado",
                    togglePaletteMoreText: "Más",
                    togglePaletteLessText: "Menos"
                  });

And here is the code where I modify the color selected:

$("#color-picker > li > div").spectrum({
                    color: evento.borderColor
                }); 

To be honest I don’t know what the problem is and I have been doing some research but couldn’t find anything.

Edit: Could it be related to the web page using rgb colors instead of hex?

I’m having truoble setting this piece of code.

I need to make a script that take these data from table (A25:C38) and save into a table (like single record).
I never used a FOR cicle before and I’m pretty noob about java, could you please help me?

enter image description here

I tried to write somethings but of course it doesnt work.
Could you help me?

function savecCost() {
//var data = fieldRangeCost.getValues()

for (var i = 26; i = 38; i++ ) {
  var fieldRangeCost = ss.getDataRange("A"&[i],"B"&[i])
   console.log(fieldRangeCost)
  const fieldvaluesCost = fieldRangeCost.map(f => formws.getRange(f).getValue())
  console.log(fieldvaluesCost) 
   }

}

I tried to make the code working but didnt work

(May 15 2023) In this example from threejs, the controllers are defined using these codes:

// controllers

controller1 = renderer.xr.getController( 0 );
controller1.addEventListener( 'selectstart', onSelectStart );
controller1.addEventListener( 'selectend', onSelectEnd );
scene.add( controller1 );

controller2 = renderer.xr.getController( 1 );
controller2.addEventListener( 'selectstart', onSelectStart );
controller2.addEventListener( 'selectend', onSelectEnd );
scene.add( controller2 );

const controllerModelFactory = new XRControllerModelFactory();

controllerGrip1 = renderer.xr.getControllerGrip( 0 );
controllerGrip1.add( controllerModelFactory.createControllerModel( controllerGrip1 ) );
scene.add( controllerGrip1 );

controllerGrip2 = renderer.xr.getControllerGrip( 1 );
controllerGrip2.add( controllerModelFactory.createControllerModel( controllerGrip2 ) );
scene.add( controllerGrip2 );

According to the documentation from threejs, both renderer.xr.getController and renderer.xr.getControllerGrip returns a THREE.Group.

.getController ( index : Integer ) : Group
index — The index of the controller.

Returns a Group representing the so called target ray space of the XR controller. Use this space for visualizing 3D objects that support the user in pointing tasks like UI interaction.

.getControllerGrip ( index : Integer ) : Group
index — The index of the controller.

Returns a Group representing the so called grip space of the XR controller. Use this space if the user is going to hold other 3D objects like a lightsaber.

Note: If you want to show something in the user’s hand AND offer a pointing ray at the same time, you’ll want to attached the handheld object to the group returned by .getControllerGrip() and the ray to the group returned by .getController(). The idea is to have two different groups in two different coordinate spaces for the same WebXR controller.

.getHand ( index : Integer ) : Group
index — The index of the controller.

Returns a Group representing the so called hand or joint space of the XR controller. Use this space for visualizing the user’s hands when no physical controllers are used.

My question is, if controller1/2 and controllerGrip1/2 are all just instances of Group, how does the controller1.addEventListener( 'selectstart', onSelectStart ); work so that the code is able respond to buttons? And what is the difference between controller and controllerGrip and hands? It seems by only adding event listeners to the controller, the code also respond to hand pinch, so why is this?

I have the following html and javascript code that has a slider with five slides
I need three slides out of five to be randomly selected every time the page is loaded, and the two slides that are not selected will be completely hidden.
Thank you for telling me where is the problem with my code?

I tried the following code, but all five slides show that every time the page is loaded, three of the slides randomly have content and two are empty.
I need those two blank slides not to be displayed

<div class="container">
<section id="testim" class="testim">
         <div class="testim-cover">
            <div class="wrap">

                <span id="right-arrow" class="arrow right fa fa-chevron-right"></span>
                <span id="left-arrow" class="arrow left fa fa-chevron-left "></span>
                <ul id="testim-dots" class="dots">
                    <li class="dot active"></li><!--
                    --><li class="dot"></li><!--
                    --><li class="dot"></li><!--
                    --><li class="dot"></li><!--
                    --><li class="dot"></li>
                </ul>
                <div id="testim-content" class="cont">
                    
                    <div class="slogan">
                        <p>"How does visual identity design help business/product value grow?"</p>    
                        <h2>MINE</h2>
                    </div>

                    <div class="slogan">
                        <p>"How can we analyze ourselves, audience, competitors, and market and help business progress/grow?"</p>     
                        <h2>MINE</h2>      
                    </div>

                    <div class="slogan">
                        <p>"How can I differentiate my business from others?"</p>     
                        <h2>MINE</h2>          
                    </div>

                    <div class="slogan">
                        <p>"What is the best and latest business model and plan for me?"</p>     
                        <h2>MINE</h2>              
                    </div>

                    <div class="slogan">
                        <p>"How will innovative targeting be achieved at each stage of business?"</p>     <h2>MINE</h2>              
                    </div>

                </div>

            </div>
         </div>
    </section>
</div>

<script>
const slogans = Array.from(document.querySelectorAll('.slogan'));
const nonEmptySlogans = slogans.filter(slogan => slogan.innerHTML.trim() !== '');

if (nonEmptySlogans.length >= 3) {
  const selectedSlogans = [];

  while (selectedSlogans.length < 3) {
    const randomIndex = Math.floor(Math.random() * nonEmptySlogans.length);
    const randomSlogan = nonEmptySlogans.splice(randomIndex, 1)[0];
    selectedSlogans.push(randomSlogan);
    randomSlogan.style.display = 'block';
  }
}
</script>

<script>
    
// vars
'use strict'
var testim = document.getElementById("testim"),
        testimDots = Array.prototype.slice.call(document.getElementById("testim-dots").children),
    testimContent = Array.prototype.slice.call(document.getElementById("testim-content").children),
    testimLeftArrow = document.getElementById("left-arrow"),
    testimRightArrow = document.getElementById("right-arrow"),
    testimSpeed = 4500,
    currentSlide = 0,
    currentActive = 0,
    testimTimer,
        touchStartPos,
        touchEndPos,
        touchPosDiff,
        ignoreTouch = 30;
;

window.onload = function() {

    // Testim Script
    function playSlide(slide) {
        for (var k = 0; k < testimDots.length; k++) {
            testimContent[k].classList.remove("active");
            testimContent[k].classList.remove("inactive");
            testimDots[k].classList.remove("active");
        }

        if (slide < 0) {
            slide = currentSlide = testimContent.length-1;
        }

        if (slide > testimContent.length - 1) {
            slide = currentSlide = 0;
        }

        if (currentActive != currentSlide) {
            testimContent[currentActive].classList.add("inactive");            
        }
        testimContent[slide].classList.add("active");
        testimDots[slide].classList.add("active");

        currentActive = currentSlide;
    
        clearTimeout(testimTimer);
        testimTimer = setTimeout(function() {
            playSlide(currentSlide += 1);
        }, testimSpeed)
    }

    testimLeftArrow.addEventListener("click", function() {
        playSlide(currentSlide -= 1);
    })

    testimRightArrow.addEventListener("click", function() {
        playSlide(currentSlide += 1);
    })    

    for (var l = 0; l < testimDots.length; l++) {
        testimDots[l].addEventListener("click", function() {
            playSlide(currentSlide = testimDots.indexOf(this));
        })
    }

    playSlide(currentSlide);

    // keyboard shortcuts
    document.addEventListener("keyup", function(e) {
        switch (e.keyCode) {
            case 37:
                testimLeftArrow.click();
                break;
                
            case 39:
                testimRightArrow.click();
                break;

            case 39:
                testimRightArrow.click();
                break;

            default:
                break;
        }
    })
        
        testim.addEventListener("touchstart", function(e) {
                touchStartPos = e.changedTouches[0].clientX;
        })
    
        testim.addEventListener("touchend", function(e) {
                touchEndPos = e.changedTouches[0].clientX;
            
                touchPosDiff = touchStartPos - touchEndPos;
            
                console.log(touchPosDiff);
                console.log(touchStartPos); 
                console.log(touchEndPos);   

            
                if (touchPosDiff > 0 + ignoreTouch) {
                        testimLeftArrow.click();
                } else if (touchPosDiff < 0 - ignoreTouch) {
                        testimRightArrow.click();
                } else {
                    return;
                }
            
        })
}
</script>

We have a lot of images stored on a drive which our intranet picks up and uses in a map (using Leaflet) as tiles. However, the drive on which they were stored recently went down and we had to move to another drive from a backup.

Since then, the images haven’t worked. Looking into this, accessing them results in a Cross-Origin Read Block, as below:

Now, the interesting bit here is that they are jpgs, and I can see them and open them as jpgs in File Explorer, but for some reason Chrome (and Edge) seem to think they are text/html, as below:

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://myimageurlgoeshere.jpg with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Is this where my issue lies, or can anyone suggest anywhere to look? When I try accessing an image URL through the browser I get this:

In react I tried to redirect user from current page to another page after reload by using onunload & onbeforeunload. but after first reload it shows the url changed and comeback to current page again. and after second reload it goes to redirected page.
These are some code I tried…

Test 001: Just after confirmation / “Leave Page” button clicked, it should redirect. Fact is it goes to the page and redirect to the previous page. >_<

import { useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const history = useHistory();

  useEffect(() => {
    const handleBeforeUnload = (event) => {
      // Prevent the default dialog box from showing
      event.preventDefault();
      // Redirect the user to the desired page
      history.push('/redirected-page');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

  // Rest of your component code...

  return (
    // JSX for your component...
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.0/react-dom.min.js"></script>

Test 002: Then I thought it might be the timing issue and I set a timer. Now things goes worse! it doesn’t go there.

useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();

      // Delay the redirection by 100 milliseconds
      setTimeout(() => {
        history.push('/Applicant-profile');
      }, 100);
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, [history]);

For the div, I set the onClick event listener, passed the function to it:

const [menuBurgerOpen, setMenuBurgerOpen] = useState('close');
    const handleClick = () => {
        setMenuBurgerOpen((prevMenuBurgerOpen) =>
            prevMenuBurgerOpen === 'close' ? 'open' : 'close'
        );
};

In the console, open is displayed first, and then close immediately. This is the first time I’ve encountered this, I don’t know what the problem is

How to fix this problem?

I tried adding event.stopPropagation(), the problem was not solved

As well as many other variants of the function, the result does not change

const currentDate = new Date();
const lastMonthStartDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth() – 1,
1
);
const lastMonthEndDate = new Date(
currentDate.getFullYear(),
currentDate.getMonth(),
0
);
from = lastMonthStartDate.toISOString().split(“T”)[0];
to = lastMonthEndDate.toISOString().split(“T”)[0];
console.log(lastMonthStartDate, lastMonthEndDate);
console.log(from,”last month” ,to);

while executing this I am getting
1st log —->Sat Apr 01 2023 00:00:00 GMT+0530 (India Standard Time) Sun Apr 30 2023 00:00:00 GMT+0530 (India Standard Time)
2nd log—-> 2023-03-31 last month 2023-04-29

while executing this I want
1st log —->Sat Apr 01 2023 00:00:00 GMT+0530 (India Standard Time) Sun Apr 30 2023 00:00:00 GMT+0530 (India Standard Time)
2nd log—-> 2023-04-01 last month 2023-04-30

I want to create an event listener when I open a dialog box. From my taskpane, I open the dialog and send data where I create some elements. The elements need to be controlled by two arrows that let you navigate between them (images in my case).

Here’s how I add my event listeners. slides-container is the container for all the images I am navigating through and slide class is just each image. Both definitely exist and get no errors:

Office.onReady((info) => {
  // -----

  Office.context.ui.addHandlerAsync(
    Office.EventType.DialogParentMessageReceived,
    createCarousel,
    onRegisterMessageComplete
  );
}

function createCarousel(args) {
  const results = JSON.parse(args.message);
  // create some elements and populate page

  const slidesContainer = document.querySelector(".slides-container");
  const slideWidth = slidesContainer.querySelector(".slide").clientWidth;
  const prevButton = document.querySelector(".prev");
  const nextButton = document.querySelector(".next");

  nextButton.addEventListener("click", function (event) {
    event.preventDefault(); // tried with and without, did not work
    slidesContainer.scrollLeft += slideWidth;
  });

  prevButton.addEventListener("click", function (event) {
    event.preventDefault();
    slidesContainer.scrollLeft -= slideWidth;
  });
}

I added a console.log inside the callbacks and each event listener was triggered twice for some reason.

I tried the same code in a regular HTML page and it worked. What could be the reason?

I’m trying to press the buttons on this chart JS on the webpage https://icomarks.com/ico/online. I tried both by xpath, full xpath and JS path without succeeding. In the example you’ll find my attempt to press the “All” button as below:

Thank you!

from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

url='https://icomarks.com/ico/online'

driver = webdriver.Chrome()
driver.get(url)

# xpath
button = WebDriverWait(driver, 3).until(EC.element_to_be_clickable((By.XPATH, '//*[@id="highcharts-34i2crn-1324"]/svg/g[23]/g[1]/g[7]')))
button.click()

# full xpath
button = WebDriverWait(driver, 3).until(EC.element_to_be_clickable((By.XPATH, '/html/body/div[4]/div/div[1]/div[2]/div/div[2]/svg/g[23]/g[1]/g[7]')))
button.click()

# JS path
element=driver.execute_script('return document.querySelector("#highcharts-7gub67p-1324 > svg > g.highcharts-range-selector-group > g.highcharts-range-selector-buttons > g.highcharts-no-tooltip.highcharts-button.highcharts-button-pressed")')
driver.execute_script("arguments[0].click();", element)

Could someone help me make a small utility script to auto click the (connect) button on a public wifi portal. Source Code here.

Once you click the 1st button (Connect), it will load a second (Connect) button. The second one might be clickable immediately or you have to wait for a few seconds.

I’m very new to userscript and HTML.

type here