Category: javascript

I have 2 input fields 1 for image and 1 for video.
I want to add more fields when +Add More button is pressed.
Here is the code

<div class="row p-20 partPending">
<div class="col-lg-6">
<x-forms.file allowedFileExtensions="png jpg jpeg" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partImage')" fieldName="part_image"
                            fieldId="part_image" />
</div>
<div class="col-lg-6">
<x-forms.file allowedFileExtensions=" mp4 avi " allowedFileSize=" 1mb" class="mr-0 mr-lg-2 mr-md-2" :fieldLabel="__('app.partVideo')" fieldName="part_video"
                            fieldId="part_video" />
</div>
</div>
 <div class="row px-lg-4 px-md-4 px-3 pb-3 pt-0 mb-3  mt-2">
 <div class="col-md-12">
 <a class="f-15 f-w-500" href="javascript:;" id="add-more"><i
 class="icons icon-plus font-weight-bold mr-1"></i>@lang('app.addMore')</a>
 </div>
 </div>

$("body").on("click",".add-more",function(){ 
var html = $(".partPending").first().clone();    
});

How can i get the desired result. Please help

My components tree is like: <App/> => <Art/> => <Gallery/>.
Gallery is imported in Art & Art is imported in App component. I have a container in my Art component that shows fine until I import Gallery component.
When I import Gallery it disappears it is only happening with Gallery component.
With other components its working fine.
No errors in console.
my Gallery component:

import "./gallery.scss";
import { useState } from "react";
import { Close } from "@material-ui/icons";
import { data } from "../../imgData";
export default function Gallery() {
  const [artContainer, setArtContainer] = useState(false);
  const [artSrc, setArtSrc] = useState("");

  const openImg = (imgSrc) => {
    setArtSrc(imgSrc);
    setArtContainer(true);
  };
  return (
    <>
      <div className={artContainer ? "art-container open" : "art-container"}>
        <div className="icons">
          <a href={artSrc} download={artSrc}>
            <img className="icon_" src="assests/download.svg" alt="download" />
          </a>

          <Close className="icon_" onClick={() => setArtContainer(false)} />
        </div>

        <img src={artSrc} alt="" />
      </div>
      <div className="gallery" id="gallery">
        {data.map((d) => (
          <div key={d.id} className="art" onClick={() => openImg(d.imgSrc)}>
            <img src={d.imgSrc} alt="" />
          </div>
        ))}
      </div>
    </>
  );
}

consider the following code:

<div className="mx-md-4 my-5 mx-sm-0 mx-xs-0 flex-column align-items-center d-flex justify-content-center ">
                <Grid className='mt-3' container spacing={2}>
                    <Grid className='mt-4' item md={4} sm={12} xs={12}>
                        <img src={props.src} className='rounded' alt="" />
                    </Grid>
                    <Grid className='mt-4' item md={8} sm={12} xs={12}>
                        <div className="container d-flex">
                            <h3 className=' mt-4 mb-5'><strong>{props.title}</strong></h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eum provident alias, ipsa unde quidem perferendis inventore harum quibusdam placeat odit architecto ad deserunt dignissimos vero ipsam voluptates? Excepturi magnam eveniet odit! Quam numquam culpa eaque vel, cupiditate expedita harum, labore explicabo molestiae molestias fuga laboriosam, itaque sed incidunt soluta eos repellat autem repudiandae praesentium. Consectetur esse praesentium harum tempore!</p>
                            <h5 className="mt-4 text-secondary">Service Hours</h5>
                            <h5 className="mt-2 text-danger">7:00 AM - 8:00 PM</h5>
                        </div>
                    </Grid>
                </Grid>
 </div>

The items are overlapping at around 1000px width:
items overlapping

anyone know why this is happening and how to fix it?

i have something to ask…

1. How to dynamically change the action for the form tag from username & password value that we get.. example when the value is admin, the action form will dedicated to index_admin.html.

Or

2.how to change the value of “#batas” based on username & password.. in case, on the different file.

here’s the code for index.html

<div class="collapse navbar-collapse" id="navbarNavDropdown">
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="index.html">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="about.html">About Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="product.html">Product</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="contact.html">Contact Us</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="masuk.html" id="batas">Masuk</a>
              </li>
            </ul>
          </div>

and here is the login page’s code

<form action="" id="form_id" method="post" name="myForm">
                <script>
                    document.get
                </script>
                <table>
                    <tr>
                        <td><label for="username">Username</label></td>
                        <td><input type="text" name="username" id="username" placeholder="Masukkan username" ></td>
                    </tr>
                    <tr>
                        <td><label for="password">Password</label></td>
                        <td><input type="password" name="password" id="password" placeholder="Masukkan password" ></td>
                    </tr>
                    <tr>
                        <td colspan="2"><input type="submit" value="login" id="submit" onclick="validate()"></td>
                    </tr>
                </table>
            </form>

Thank you very much for someone who asnwer this

I have this code running in the browser

<html>

    <script type="module">
        console.log("working");

        var url = "https://slack.com/api/chat.postMessage";
        var auth_token = "xoxb-2B"; //Your Bot's auth token
        var body = {channel: "ses", text: "testing app"}

        async function postData(url = '', data = {}) {
            // Default options are marked with *
            const response = await fetch(url, {
                method: 'POST', // *GET, POST, PUT, DELETE, etc.
                headers: {
                    "Authorization": "Bearer " + auth_token,
                    "Content-Type" : "application/json"
                },
                body: JSON.stringify(data) // body data type must match "Content-Type" header
            });
            return response.json(); // parses JSON response into native JavaScript objects
        }

        postData('https://slack.com/api/chat.postMessage', body)
        .then(data => {
            console.log(data); // JSON data parsed by `data.json()` call
        });
    </script>
</html>

I’m getting

Access to fetch at ‘https://slack.com/api/chat.postMessage’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

I don’t understand, I need to specify the bearer token somehow, even in the docs it says to put it in the Authorization header, why aren’t they allowing it?

I finally almost got it working! The X and Y axes on my scatter plot each have a separate d3.drag()behavior that adjusts the scale and the plot itself calls d3.zoom() for panning/zooming. I can pan perfectly but the zooming still isn’t right.

See here: codepen

Typically, zooming is done by setting the scale’s domain to a rescaled version of some default x and y scales (x2, y2) domains that are set initially.

 x.domain(d3.event.transform.rescaleX(x2).domain());          
 y.domain(d3.event.transform.rescaleY(y2).domain());

This works fine by itself but in combination with other zoom and drag behaviors the rescaling causes the zoom state of the plot to be out of sync which makes the plot jump around when panning or zooming.

To circumvent this, each zoom/drag instance directly modifies the scales domains. Everything works well however zooming in and zooming out doesn’t set the domains correctly. I believe I need to implement the d3.event.transform.k value into calculating the delta somehow. Zooming is possible but it then goes wrong.

    // ZOOMING
    if (d3.event.sourceEvent && d3.event.sourceEvent.type == "wheel") {
      
      let domainX = x.domain();      
      let linearX = d3.scaleLinear().domain(x.range()).range([0, domainX[0] - domainX[1]]);
      let deltaX = linearX(t.x - lastX);      
            
      let domainY = y.domain();
      let linearY = d3.scaleLinear().domain(y.range()).range([domainY[1] - domainY[0], 0]);
      let deltaY = linearY(t.y - lastY)
      
      if (t.k > lastK) {
        // ZOOM IN
        x.domain([domainX[0] - deltaX, domainX[1] + deltaX]); 
        y.domain([domainY[0] + deltaY, domainY[1] - deltaY]);
        
      } else {
        // ZOOM OUT
        x.domain([domainX[0] + deltaX, domainX[1] - deltaX]);         
        y.domain([domainY[0] - deltaY, domainY[1] + deltaY]);
      } 
              
    }

Please help! Thank you.

D3fc is used here but it’s not important.

i am currently redirecting user based on GEO_IP using htaccess but the problem is i am facing huge traffic loss and even sometime when i try myself using VPN then it not redirecting correct.

I am not sure, how accurate is htaccess GEO detection.

code :

GeoIPEnable On
# US
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^US$
RewriteRule ^(.*)$ https://example.com/us$1 [L]

# UK
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^UK$
RewriteRule ^(.*)$ https://example.com/uk$1 [L]

# CA
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^CA$
RewriteRule ^(.*)$ https://example.com/ca$1 [L]

# IN
RewriteCond %{ENV:GEOIP_COUNTRY_CODE} ^IN$
RewriteRule ^(.*)$ https://example.com/in$1 [L]

can anyone help me fixing my htaccess for more accuracy or if anyone have alternative solution with javascript or PHP.

                    <label class="form-check-label">
                      <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" value="all" name="check" class="form-check-input"> All
                    </label>
                  </div>
                  <div class="form-check-inline">
                    <label class="form-check-label">
                      <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="pending" class="form-check-input"> Pending
                    </label>
                  </div>
                  <div class="form-check-inline">
                    <label class="form-check-label">
                      <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="confirmed" class="form-check-input"> Confirmed
                    </label>
                  </div>
                  <div class="form-check-inline">
                    <label class="form-check-label">
                      <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="received" class="form-check-input"> Received
                    </label>
                  </div>
                  <div class="form-check-inline">
                    <label class="form-check-label">
                      <input type="checkbox" onclick="checkAll(this)" onchange="onChange(this)" name="check" value="returned" class="form-check-input"> Returned
                    </label>
                  </div> 

I have these checkboxes and what im doing is i want to save the states of the checkboxes on page reload. I have these additional codes for

selecting only one checkbox

    function checkAll(checkbox) {
    var checkboxes = document.getElementsByName('check');
    var checkeditem = document.querySelector('.form-check-input:checked').value;
    
    
        
    checkboxes.forEach((item) => {
        if (item !== checkbox) item.checked = false;
    })
} 

and for reloading the current page and adding parameters on the url

  function onChange(element) {
        
    
        
        
        const urlParams = new URLSearchParams(window.location.search);

        urlParams.set('value', element.value);

         window.location.search = urlParams;
        
    }

Summery

I’m creating Vue/Nuxt application by SPA mode.
To generate /.dist file, I execute nuxt generate

pages
  ├ index.vue
  └ test.vue

I want to know how to redirect / to /test path by Nuxt.

What I trided

I tried middleware and module, but they do not work.

https://github.com/nuxt-community/redirect-module

I try to change the background color at on small app in html css js
one snap of this is:

var myoutput = document.getElementById("output");

function roundNum(){
AlphaValue=0.4;
RedValue=255;
GreenValue=0;
BlueValue=0;
outputColor=[RedValue,GreenValue,+BlueValue,AlphaValue];
return outputColor;
}
myColor=roundNum();
myColor1=myColor[0];
myColor2=myColor[1];
myColor3=myColor[2];
myColor4=myColor[3];
myoutput.style.backgroundColor ="( 
rgba("+myColor1+","+myColor2+","+myColor3+","+myColor4+");";

i’ve been trying to submit user input to my firebase database but it doesn’t work for me. i’m a beginner in react-native and firebase kindly help. Say, i have 3 input fields and want to save the data entered by user into my database after clicking on submit.

I am looking for a proper way to extract all the array of objects thru simple loop.

let scores=
{
    ballet:
    {
        monica:     ["comments1","91"],
        yael:       ["comments2","79"],
    },
    swimming:
    {
        gabay:      ["comments3","82"],
        victor:     ["comments3","95"],
    },
    guitar:
    {
        gangina:    ["comments4","97"],
        diko:       ["comments5","42"],
    }
};

…as a side note since the real database is huge so performace is also an issue here 🙂

I was tring :

let index = 0;
while(index < scores.length){
  console.log(scores[index]);
  index += 1;
}

with no results 🙁

…and I thought it must be simple 🙂

When I use the function of jwt.verify() or jwt.decode() in react, it shows me a lot of errors.

The errors are:

ERROR in ./node_modules/jwa/index.js 5:13-30

Module not found: Error: Can’t resolve ‘crypto’ in ‘C:Usersclientnode_modulesjwa’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “crypto”: require.resolve(“crypto-browserify”) }’
– install ‘crypto-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “crypto”: false }

ERROR in ./node_modules/jwa/index.js 9:11-26

Module not found: Error: Can’t resolve ‘util’ in ‘C:Usersclientnode_modulesjwa’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
– install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/jws/lib/data-stream.js 4:13-30

Module not found: Error: Can’t resolve ‘stream’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “stream”: require.resolve(“stream-browserify”) }’
– install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

ERROR in ./node_modules/jws/lib/data-stream.js 6:11-26

Module not found: Error: Can’t resolve ‘util’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
– install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/jws/lib/sign-stream.js 8:13-30

Module not found: Error: Can’t resolve ‘stream’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “stream”: require.resolve(“stream-browserify”) }’
– install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

ERROR in ./node_modules/jws/lib/sign-stream.js 12:11-26

Module not found: Error: Can’t resolve ‘util’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
– install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

ERROR in ./node_modules/jws/lib/verify-stream.js 8:13-30

Module not found: Error: Can’t resolve ‘stream’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “stream”: require.resolve(“stream-browserify”) }’
– install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

ERROR in ./node_modules/jws/lib/verify-stream.js 12:11-26

Module not found: Error: Can’t resolve ‘util’ in ‘C:Usersclientnode_modulesjwslib’

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
– add a fallback ‘resolve.fallback: { “util”: require.resolve(“util/”) }’
– install ‘util’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “util”: false }

NOTE: I try to do the recomendations that the errros say, but it dont fixes it

I am creating a sorting visualizer. For iterative sorting algorithms, my code works perfectly but for quick sort and merge sort it does not. The function does not wait and immediately returns output but I have to show changes slowly by animations.Following is my code.

const delay = (time) => {
    return new Promise((resolve) => setTimeout(resolve, time));
  };
const quickSortHelper = async(arr, a, b) => {
    if (b > a) {
      document.getElementById(a).style.backgroundColor="green"
      let pivot = getPivot(arr, a, b)
      await delay(2*animationSpeed)
      setArray([...arr])
      document.getElementById(a).style.backgroundColor="#343434"
      await delay(2*animationSpeed)
      quickSortHelper(arr, a, pivot - 1)
      await delay(4*animationSpeed)
      quickSortHelper(arr, pivot + 1, b)
    }
  }
  const quickSort = () => {
    setStartSorting(true)
    let arr = [...array]
    console.log(arr);
    quickSortHelper(arr, 0, arr.length - 1)
    console.log('ended');
    setStartSorting(false)
  }
  const getPivot = (arr, a, b) => {
    let pivot = arr[a]
    var i = a
    var j = b
    while (j > i) {
      while (pivot >= arr[i] && i<=b) {
        i++
      }
      while (pivot < arr[j] && j>=a) {
        j--
      }
      if (j > i) {
        let temp = arr[i]
        arr[i] = arr[j]
        arr[j] = temp
      }
    }
    let temp =pivot
    arr[a] = arr[j]
    arr[j] = temp
    return j
  }
 

The console.log(‘ended’) is executed immediately as soon as I run the function and states are also updated immediately.

I am using a selenium script to access elements on PDF rendered on MS Edge.
Even though I can see the elements while inspecting the page like

<div id="layout-container" style="opacity: 1; width: 826px; height: 1066px; top: 45px; transform: scale(1) translate(346px, 0px);"><div class="pagerect" id="pagediv_0" style="left: 5px; top: 3px; width: 816px; height: 1056px;"></div></div>

My script is unable to access them using all sorts of ways in selenium, waiting for elements to render etc

I have even tried executing JS snippet to try and access them and the script return no results even though the same script works in Console of dev tools.
Like

document.querySelector("#layout-container")

This works in the Console but not when executing.

I am using Selenium with Python so solutions on that will be preferred.