Category: javascript

I’m trying to display the icon when I have more than three images. Can someone help me in the function.

const carousel = document.querySelector(".carousel");
arrowIcons = document.querySelectorAll(".wrapper i");
files = carousel.querySelectorAll("img");
for (let i = 0; i < files.length; i++) {
  nbImg = carousel.querySelectorAll("img")[i];
  if (nbImg > 3) {
    arrowIcons.style.display = "block";
  }
}

.wrapper i:last-child {
  right: 0px;
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />

<div class="wrapper">
  <div class="carousel">
    <img class="res" src="#" />
    <img class="res" src="#" />
    <img class="res" src="#" />
    <img class="res" src="#" />
    <img class="res" src="#" />
  </div>
  <i id="right" class="fas fa-angle-right"></i>
</div>

For example, I have several cards and there is a lot of data in this card, how can I get the information in this card with one click?

I used JavaScript in this project, it turned out very dirty and it became very unknown. I need a simpler solution so that I can get information.

I ran into an issue in which I could not get the value in my response header from a cross origin request. I figured out the answer, which was to configure my server to expose the header i needed (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Expose-Headers).

My question is why do I need to do that in order to have access to it in scripts, if I can actually see the value in the response in the network tab?

using useState() hook in react 18 and running the application, my browser in the console tells me that the setters that I created using it are not functions

const AdminPanel = () => {
    const {brandVisible,SetBrandVisible} = useState(false)
    const {typeVisible,SetTypeVisible} = useState(false)
    const {dyeVisible,SetDyeVisible} = useState(false)
    return (
      <Container className="d-flex flex-column">
        <Button variant={"outline-dark"} onClick={()=> SetTypeVisible(true)} className="mt-2 p-1">Добавить тип</Button>
        <Button variant={"outline-dark"} onClick={()=> SetBrandVisible(true)} className="mt-2 p-1">Добавить производителя</Button>
        <Button variant={"outline-dark"} onClick={()=> SetDyeVisible(true)} className="mt-2 p-1">Добавить краску</Button>
        <CreateBrand show={brandVisible} onHide={()=> SetBrandVisible(false)}/>
        <CreateDye show={dyeVisible} onHide={()=> SetDyeVisible(false)}/>
        <CreateType show={typeVisible} onHide={()=> SetTypeVisible(false)}/>
      </Container>
    );
  }

after reading this hook, I realized that I used it correctly

is there a way to disable “enter/submit” function in the search bar in wordpress with css? The search function has already automatic search whenever the user gives input. That’s why the “enter/submit” button won’t be necessary. But I do only have access to the css file and I don’t know how to disable the function in css only. Thank you for your help

I did try with pointer-events:none . it works for disabling the click function on the button, but not the “enter/submit” function

I have a question regarding localization in SharePoint Framework. I have a simple webpart, which should change language not matter of the SharePoint settings. For example SP sites are full in English, but the user has to have a change to switch the language to Spanish or German. The question is how can I do it easily?

I have a webpart context which has localization property which are passed and normally, I suppose they are used to load the correct language, right?

So can I somehow programmatically change it? Or is there a another correct or better way?

Thanks in advance.

so I have a function which will take string of upperCase letters and each individual letter has value as stated in alphabet object. Yet I have troubles writing it in typescript. Here is code which is working in javascript:

export const alphabet = {
  A: 1,
  B: 2,
  C: 3,
  D: 4,
  E: 5,
  F: 6,
  G: 7,
  H: 8,
  I: 9,
  J: 10,
  K: 11,
  L: 12,
  M: 13,
  N: 14,
  O: 15,
  P: 16,
  Q: 17,
  R: 18,
  S: 19,
  T: 20,
  U: 21,
  V: 22,
  W: 23,
  X: 24,
  Y: 25,
  Z: 26,
};

const adressDecoder = () => {
  let startColumnString = ["AA"];

  let startColumn = startColumnString.reduce((prev, curr) => {
    if (prev === 0) return alphabet[curr];
    return prev * 26 + alphabet[curr];
  }, 0);

  console.log(startColumn);
};

adressDecoder()

and here are errors:

So I tried to cast type to alphabet object, but I did it incorrect, and now console.log() returns undefined

interface Alphabet {
  [key: string]: number;
}

export const alphabet: Alphabet = {
  A: 1,
  B: 2,
  C: 3,
  D: 4,
  E: 5,
  F: 6,
  G: 7,
  H: 8,
  I: 9,
  J: 10,
  K: 11,
  L: 12,
  M: 13,
  N: 14,
  O: 15,
  P: 16,
  Q: 17,
  R: 18,
  S: 19,
  T: 20,
  U: 21,
  V: 22,
  W: 23,
  X: 24,
  Y: 25,
  Z: 26,
};

const adressDecoder = () => {
  let startColumnString = ["AA"];

  let startColumn = startColumnString.reduce((prev: number, curr: string) => {
    if (prev === 0) {
      let result: number = alphabet[curr];
      return result;
    }
    let result: number = prev * 26 + alphabet[curr];
    return result;
  }, 0);

  console.log(startColumn);
};

adressDecoder()

How to properly define interface/type of alpabet object?

I am learning Javascript and I need to include some scientific computations on a simulation with an interface. How could I evaluate the Hypergeometric Function 2F1(a,b,c,z)?

Thanks in advance!

I’m trying to get loggedin Used Data from firebase and add show into HTML Table
this is my database structure”

{
  "attendance": {
    "7-----------asdasdasd-----": {
      "2023-1-9": {
        "status": "success"
      }
    },
  }
}

I’m simply tring to get value date and status value from firebase make table in html to show data.
I’m able to login user using firebase auth google. and able to post value aswell. just not able to get value correctly and show in table.
Here is what i tried to get value from firebase and add into html table:

// Get the table element
var table = document.getElementById("attendance-table");

// Handle auth state changes
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in
    var userId = firebase.auth().currentUser.uid;
    firebase.database().ref("attendance/" + userId).on("value", function(snapshot) {
      // Clear the table
      table.innerHTML = "";

      // Get the attendance data
      var attendanceData = snapshot.val();
      var attendanceKeys = Object.keys(attendanceData);

      // Add a row to the table for each attendance record
      for (var i = 0; i < attendanceKeys.length; i++) {
        var date = attendanceKeys[i];
        var status = attendanceData[attendanceKeys[i]].status;
        var row = document.createElement("tr");
        var dateCell = document.createElement("td");
        var statusCell = document.createElement("td");
        dateCell.innerHTML = date;
        statusCell.innerHTML = status;
        row.appendChild(dateCell);
        row.appendChild(statusCell);
        table.appendChild(row);
      }
    });
  }
});

<table id="attendance-table">
  <thead>
    <tr>
      <th>Date</th>
      <th>Status</th>
    </tr>
  </thead>
  <tbody id="attendance-table-body"></tbody>
  <tfoot></tfoot>
</table>

For example, if you imagine a map with a vehicle icon on it, when you zoom out, you probably don’t want a vehicle that expands to the size of a city, you’d like to keep something that continues to occupy the same amount of space on the road.

I want to give condition in column B based on Column A data.
Example ColA have data Score i.e 80,90,40,50,60,70
and I want Column B should come If ColA=80 then “Good”,90 then “Excellent”,60 then Average

I am trying on it but output is not coming ok

I am designing a website such that a question appears on each page and users can go through the questions by clicking on the “Next” button at the bottom of every page and proceed to the next page. I want to add a back button as well so that they can go the previous pages and change their answers whenever needed.
This is the HTML code for the “Next” button:

<button ng-disabled="question.answer === undefined || question.answer == '' || question.answer == {}" ng-click="RC.nextQuestion()" type="button" class="btn btn-default" style="float:right ; margin-top:20px">Next</button> 

This is the JavaScript code for the “Next” button:

this.next = function(){
        if(self.state == "workerIdSlide"){
            if(self.questionId == null && self.partId == null){
                self.load(function(){
                    self.state = self.allStates[++self.slideIndex];
                });
                return;
            }
        }
        if(self.slideIndex + 1 < self.allStates.length){
            self.state = self.allStates[++self.slideIndex];
        }else{
            self.submitResults(self.resultsSubmitted, self.handleError);
        }
    };

This is what I tried as for the JavaScript code:

this.previous = function(){
        if(self.state == "workerIdSlide"){
            if(self.questionId == null && self.partId == null){
                self.load(function(){
                    self.state = self.allStates[--self.slideIndex];
                });
                return;
            }
        }
    };
    this.previousQuestion = function(){
        if(self.questionIndex == 0{
            ++self.questionIndex;
        else{
            self.previous();
        }
    };

But, it did not work. Can someone tell me how I can add a “Back” button?

The following JavaScript code from my Cordova Android app (running in a webview) on Android 13

var redIcon = L.icon({                                
                iconUrl: 'file:///android_asset/www/lib/images/marker-red-small.png',                           
                iconSize:     [40, 40]
            });

fails and triggers this message in the console:

Not allowed to load local resource: file:///android_asset/www/lib/images/marker-red-small.png

What I don’t understand is that the same code used to work with previous versions of Android (versions 8 and 9 at least, if I remember correctly)

After submitting a form to Django, it takes about 3 seconds to process

I need an Ajax script that will redirect the user to an intermediate page where he will wait for a response from Django.

Django got a new redirect after receiving the response
I tried to solve this problem with Django, but I can’t do 2 redirects in one view

i have an html single page website where i have a menu on the top like below:

    <nav role="navigation" class="collapse navbar-collapse" id="main-navbar">

                        <ul class="nav navbar-nav no-float" id="parallax-menu">
                            <li class="menu-item current_page_item"><a href="javascript:void(0);">Home</a></li>
                            <li class="menu-item" id="gos"><a href="javascript:void(0);">About Us</a></li>
                            <li class="menu-item "><a href="javascript:void(0);">Blog</a>



                            </li>
                            <li class="menu-item">
                                <a href="javascript:void(0);">Portfolio</a>




                            </li>
                            <div id="blocks"><img src="bike.gif" style="width:30%" alt=""></div>
                        </ul>
                        




                    </nav>

as you can see i have a class called “current_page_item”, when an item in menu is selected that items becomes yellow in color, whenever the user selects an item i also want the image to move to the item selected. please tell me how to accomplish this. thanks in advance