Category: javascript

Hi Please help I am new to developing websites and doesn’t know how to fix the problem
I cant seem to make the 2 logo images fully responsive and stop them from going behind each other and other content when trying in different screen resolution or size
the class is logo and logoo

I dont know what to do and i want the 2 logos to be fully responsive and align with content
this is what the site looks like when i try on different device but its fine on my pc
[this is what it looks like on other laptop][1]

HTML

Login

            <form action="#">
                <div class="input-field">
                    <input type="text" placeholder="Enter your email" required>
                    <i class="uil uil-envelope icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Enter your password" required>
                    <i class="uil uil-lock icon"></i>
                    <i class="uil uil-eye-slash showHidePw"></i>
                </div>

                <div class="checkbox-text">
                    <div class="checkbox-content">
                        <input type="checkbox" id="logCheck">
                        <label for="logCheck" class="text">Remember me</label>
                    </div>
                    
                    <a href="#" class="text">Forgot password?</a>
                </div>
                <a href="Main.html">
                <div class="input-field button">
                    <input type="button" value="Login">
                </a>
                    
                </div>
            </form>

            <div class="login-signup">
                <span class="text">Don't have account yet?
                    <a href="#" class="text signup-link">Signup Now</a>
                </span>
            </div>
        </div>

        <!-- Registration Form -->
        <div class="form signup">
            <span class="title">Registration</span>

            <form action="#">
                <div class="input-field">
                    <input type="text" placeholder="Enter your username" required>
                    <i class="uil uil-user"></i>
                </div>
                <div class="input-field">
                    <input type="text" placeholder="Enter your email" required>
                    <i class="uil uil-envelope icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Create a password" required>
                    <i class="uil uil-lock icon"></i>
                </div>
                <div class="input-field">
                    <input type="password" class="password" placeholder="Confirm a password" required>
                    <i class="uil uil-lock icon"></i>
                    <i class="uil uil-eye-slash showHidePw"></i>
                </div>

                <div class="checkbox-text">
                    <div class="checkbox-content">
                        <input type="checkbox" id="termCon">
                        <label for="termCon" class="text">I accepted all terms and conditions</label>
                    </div>
                </div>

                <div class="input-field button">
                    <input type="button" value="Signup">
                </div>
            </form>

            <div class="login-signup">
                <span class="text">Already have an account?
                    <a href="#" class="text login-link">Login Now</a>
                </span>
            </div>
        </div>
    </div>
</div>

<script src="script.js"></script>

CSS

*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: ‘Poppins’, sans-serif; }

body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #4070f4;
background-image: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),url(brgy.png);
background-size: cover;
background-position: center;

} .logo{
max-width: auto;
max-height: 160px;
transform: translateY(-330px);
margin-left: -37%;
position: absolute;
} .logoo{ max-width: auto;
max-height: 200px;
transform: translateY(-330px);
margin-left: 34%;
position: absolute;

} @media screen and (max-width: 900px) {
.logo {
max-height: 120px; /* Adjust max-height as needed for smaller screens /
transform: translateY(-300px); / Adjust translateY as needed for smaller screens /
margin-left: -30%; / Adjust margin-left as needed for smaller screens */
margin-top: 5%;
}

.logoo {
    max-height: 120px; /* Adjust max-height as needed for smaller screens */
    transform: translateY(-300px); /* Adjust translateY as needed for smaller screens */
    margin-left: 25%; /* Adjust margin-left as needed for smaller screens */
    margin-top: 5%;
} }

Tengo un erro en la consola del navegador y no encuentro forma de solucionarlo, he revisado el archivo perfect-scrollbar.min.js:15 y no tengo idea donde esta el error.

I have a Bootstrap 4 carousel and I need to move 4 slides each time. I’m using this code, and it works:

$(this).carousel(4)

The problem is that the carousel just jumps to that index and does not transition. If I use this, then it works and transitions correctly:

$(this).carousel("next");
or
$(this).carousel("prev");

I tried use something like this but it does not work.

$(this).carousel("next") 
$(this).carousel("next") 

Any help will be appreciated.

I would like to extend the JavaScript String class to an EoString class, in order to use custom methods, that have sense only for strings of class EoString and not for all strings, otherwise I could extend the String prototype. So I defined the EoString class like that:

class EoString extends String
{
    normalize() { ... }    
}

Now I would like to call the normalize() method on a normal string, after typecasting it to EoString, like that:

var text = (EoString)'abcd'; // I don't know how to typecast
text.normalize();

So, how can I typecast a normal string to the EoString class? How can I access the string within the normalize() method? What should the normalize() method return? Shall I add a constructor() too?

Thanks

Im writing a simple Youtube Viewer in Windows Forms C#. I load the page with this.webVideo.DocumentText = html;in a WebBrowser Component and the page looks fine. I need to inform my app if the video is playing or paused, but the events of the Youtube Embed API don’t fire.

The html should be correct, as it works, when I just open the file in a normal browser.

What did i do:

1: I created a custom UserControl with a Webbrowser and added that to the Form.

2: When the UserControl loads i load the html from a file and manipulate it.

string html = Resources.videoViewer;
html = html.Replace("$VIDEO_ID$", videoId);
html = html.Replace("$VIDEO_WIDTH$", this.webVideo.Width.ToString());
html = html.Replace("$VIDEO_HEIGHT$", this.webVideo.Height.ToString());
html = html.Replace("$WS_PORT$", MyConfig.Port.ToString());
html = html.Replace("$WS_STATE_ROUTE$", WebSocketController.RouteState);
this.webVideo.DocumentText = html;

3: This html is really close to the example https://developers.google.com/youtube/iframe_api_reference?hl=en#Getting_Started.
My modifications were the addition of a WebSocket and the function of the events.

<html>
<head>
    <meta content='IE=Edge' http-equiv='X-UA-Compatible' />

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script>
        const serverAddress = "ws://127.0.0.1:5000/videoState";

        const socket = new WebSocket(serverAddress);

        socket.onopen = function () {
            socket.send("{'state': -1}");
        }

        socket.onmessage = function (event) {
            alert(event.data);
        }

    </script>

    <style>
        body {
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <script>
        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '400',
                width: '600',
                videoId: 'f_qddfYFpQM',
                playerVars: {
                    'playsinline': 1
                },
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            alert("ready");
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        function onPlayerStateChange(event) {
            socket.send("{'state': " + event.data + "}");
        }

    </script>
</body>
</html>

When I start my application everything seems to work. The Video gets embedded and the websocket connects, but the onPlayerReady and onPlayerStateChange never get called. I tried putting this html in a file and just running that in a normal browser and it works there. I even tried it in an old Internet Explorer i had flying around and it worked there.

The Reference said that there is a requirement that the method postMessage needs to exist, so i tried to check if it exists with alert(postMessage); and i got function postMessage() { [native code] } so it does exist in some shape or form.

I also tried adding the eventListeners Manually like player.addEventListener('onStateChange', onPlayerStateChange) but that didnt work either in Forms, but they did in the normal Browser. Adding a normal EventListener for clicks to a button worked in the WebBrowser Component, too, so im fairly Certain that these Events just dont fire for some reason or that the WebBrowser Component blocks them.

Im fairly new to WindowsForms and C# in general, so I would appreciate any pointers on what could solve this issue. If need be i’d even listen in to alternative ways to embed the video.

I’m not sure but is there way to access requested data from Chrome’s dev Tools (Network->fetch/xhr->some jsonData)
I‘m looking for a good point to start in JavaScript.
Thanks for your hint.

CU
Alex

I‘ve looked around but I can‘t figure out the best point to start. I hope someone gives me the right hint?

export default function MapScreen() {
    return (
        <NavigationContainer independent={true}>
            <MapStack.Navigator initialRouteName="MapScreenView">
                <MapStack.Group screenOptions={{headerShown: false,}}>
                    <MapStack.Screen name="MapScreenView" component={MapScreenView} />
                </MapStack.Group>
            </MapStack.Navigator>
        </NavigationContainer>
    );
}; 

/*
MapScreenView

Primary ancestor component of the map screen functionality.
In charge of rendering the world map & polygons. 
*/
class MapScreenView extends React.Component {
    constructor () {
        super();
        this.mapHasMoved = false;
        this.currentRegion = 'Clemson';
        this.polysMap = [];
        this.polysReady = false;
        console.log("nnNew map loaded")
    }

    updateMapHasMoved = (val) => {
        console.log("before: mapHasMoved = " + this.mapHasMoved)
        this.mapHasMoved = val;
        console.log("after: mapHasMoved = " + this.mapHasMoved);
    }

    updatePolysReady = (val) => {
        this.polysReady = val;
        console.log("polysReady = ")
        console.log(val);
    }

    RenderPolygons = async (region = this.currentRegion) => {
        var polys = [];
    
        var response = '';
        var coords = [];
        try {
            response = await axios.get(`${baseURL}/ClemsonLots/`);
        } catch (error) {
            console.log("get error: " + error);
        }
        console.log("Rendering polygons for region: " + region)
        for (var i in response.data) {
            coords.push([i, response.data [i]]);
        }
    
        //Create array of objects storing parking lot poly information
        for (var i = 0; i<coords[0].length; i++) {
            polys[i] = 
                {lotID: coords[i][1].lotID,
                 numCoords: coords[i][1].numCoords,
                 lotCoords: []
                };
            };
        
        //Create variable sized objects of coordinate pairs
        //, store them in polys[i].lotCoords
        for (var i = 0; i<coords[0].length; i++) {
            if (coords[i][1].numCoords == 3) {
                /* if else block to assign coordinate values from database */}
        }
    
        
        polys.map((lot, index) => {
            this.polysMap[index] = <Polygon 
                key={lot.lotID}
                coordinates={lot.lotCoords}
                fillColor="#27f"
                strokeColor="#27f"
                strokeWidth={2}
                zIndex={2}
            />
            });
        //console.log(this.polysMap[0])
        return true;
    }

    render() {
        return (
            <View style={StylesList.appBackground}>
                <View style={styles.mapScreenContainer}>
                    <MapView style={styles.map} 
                    region={startingRegion} rotateEnabled={false}
                    showsBuildings={true}
                    onMapReady={() => this.updatePolysReady(this.RenderPolygons())}
                    >
                        {this.polysMap}
                        {this.polysReady ? console.log(this.polysReady) : null}
                        {/* { this.mapHasMoved ? this.RenderPolygons() : null} */}
                    </MapView>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    mapScreenContainer: {
        height: '85%',
        width: '100%',
        marginTop: 20,
        borderColor: '#000',
        borderWidth: 1,
    },
    map: {
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
    },
});

const startingRegion = {
    latitude: 34.6738988,
    longitude: -82.8422494,
    latitudeDelta: 0.005,
    longitudeDelta: 0.001,
};

I’m making an app in React Native and I am trying to get it so that my map will render polygons based on coordinates in my database.

The problem I think lies in the RenderPolygons() function, but I’m new so Im not sure. The map itself loads when I run my code, but no polygons are loaded. I have tried logging the results to the console, and I can see and have tested by copying and pasting the values that the polysMap array correctly stores polygon blocks.

i.e. <MapPolygon coordinates={[{“latitude”: 34.6748, “longitude”: -82.8442}, {“latitude”: 34.6752, “longitude”: -82.8439}, {“latitude”: 34.6746, “longitude”: -82.8414}, {“latitude”: 34.6732, “longitude”: -82.8423}, {“latitude”: 34.674, “longitude”: -82.8434}]} fillColor=”#27f” strokeColor=”#27f” strokeWidth={2} zIndex={2} />

The above block is stored in polyMaps[0], and directly putting that in the render() function works. But calling {this.polyMaps} does not. When I tried running {console.log(this.polyMaps)} in the MapView, it just returns ‘[]’.

As a new attempt, I tried putting RenderPolygons() in another function and have it return true to update this.polysReady, but the console value of this.polysReady is “{“_h”: 0, “_i”: 0, “_j”: null, “_k”: null}”.

Apologies, I know there is a lot going on here but I am really stuck and any help is appreciated.

I am building an application using react native which auto completes various Form Fields on third party websites by injecting a JavaScript Script send from the server for signed in user using injectedJavaScript method in react-native-webview package (https://github.com/react-native-webview/react-native-webview). I works for all the fields accept file fields. is there any way to do it. if not is there any other approach to auto complete file form fields on third party website. or any modifications we can make in react native webview to not block the requests to attach files

I have tried using injectedJavaScript method but it doesn’t work. I know due to browser security policies it is blocked. but we are using web view it there way to modify it

I want a calculator page and after calculation , the result is in the same JSP page using servelt

I want a calculator page and after calculation , the result is in the same JSP page using servelt.

In a callback javascript file that supports a Google map (referenced by the html file) I have used the following Listener code responding to the click event on a checkbox:

window.eqfeed_callback = function (results) {
...
...
 google.maps.event.addDomListener(document.getElementById("cksites"), 'click', function () {
       ' turn on/off a layer on the map..
    });
...
...
};

When inspecting the page I am reminded that “addDomListerner” should be replaced by “addEventListener()” method since the latter is now deprecated (but will still work for the foreseeable future.).

“cksites” is the name of an checkbox that turns on/off a “layer” on the Google map.

A link to update this method is provided in the inspect view. I’ve tried numerous combinations of their suggestions and cannot seem to get an updated Listener in place. I was hoping to save some time as I am not by profession a Google map programmer.

One solution proposed adding: window.addEventListener(“load”, initMap); to solve the issue but does not say where in the code this line should be located (near the intiMap line ?)

Any help with this wuold be appreciated (the organization I work with has many of these click events so I thought it best to update them if I could).

Thanks in advance.

I usually checked accessToken in localStorage on the client, if it is there, then send a request from the client to reset tokens, but I want to give this task to the server, and therefore I put accessToken and refreshToken in cookies and try to send a request to the server with cookies.

How can I send a request to the server only 1 time when logging in to the application?

I want to check cookies on the server for the presence of refreshToken, and if they are there, then update the token and transfer the user’s data in the response (in the body)

I want to do this without an extra request from the client, that is, without using useEffect, but nothing comes out.

AppLayout.js

import Head from "next/head";

const AppLayout = ({ children, data }) => {
    console.log(data)// undefined
    return (
        <div className="layout">
            <Head>
                <meta name="viewport" content="width=device-width, initial-scale=1" />
                <link rel="icon" href="/favicon.ico" />
            </Head>
            <header />
            <main>{children}</main>
            <footer />
        </div>
    );
};

export default AppLayout;

// why getServerSideProps dont work ?
export function getServerSideProps({ ctx }) {
    // console.log(ctx?.req?.headers?.cookie);
  
    const data = 'hello';
    console.log('getServerSideProps')// dont work
    return {
      data
    }
};

_app.js

import '@/styles/index.scss'
import AppLayout from '@/components/AppLayout/AppLayout'
import Link from 'next/link'

export default function App({ Component, pageProps }) {
  return (
    <AppLayout {...pageProps}>
      <Link href="/">home</Link>
      <Link href="gg">gg</Link>
      <Component {...pageProps} />
    </AppLayout>
  )
}

I have two implementation variation for countingSort algorithm.

#1 – Using an array to count the occurrences:

const countingSort1 = (arr) => {
  const max = Math.max(...arr);
  const count = new Array(max + 1).fill(0);
  for (let i = 0; i < arr.length; i++) {
    count[arr[i]]++;
  }

  console.log(count); // Array(120001) [0, 0, 0, 1, 0, 1, 0, 0, 0, 0, …]

  let k = 0;
  for (let i = 0; i < count.length; i++) {
    for (let j = 0; j < count[i]; j++) {
      arr[k] = i;
      k++;
    }
  }
  return arr;
};

#2 – Using a dictionary (object) to count the occurrences:

const countingSort2 = (arr) => {
  const count = {};
  for (let i = 0; i < arr.length; i++) {
    const curr = arr[i];
    count[curr] = (count[curr] ?? 0) + 1;
  }

  console.log(count); // Object {3: 1, 5: 1, 24599: 1, 120000: 1}

  let i = 0;
  for (let val in count) {
    for (let j = 0; j < count[val]; j++) {
      arr[i] = +val;
      i++;
    }
  }
  return arr;
};

Usage:

const numbers = [3, 5, 24599, 120000];

console.log(countingSort1(numbers)); // [3, 5, 24599, 120000]
console.log(countingSort2(numbers)); // [3, 5, 24599, 120000]

Want to know:

When we have a wide range of numbers to sort with counting sort, the size of the counting array becomes very large, which can lead to memory issues.

This is correct because, as you can see, our range is from 3 to 120000, and the implementation shown in countingSort1() creates an array sized 120001 to accommodate all possible values. However, this is not the case in the second implementation, countingSort2().

So why do we talk about a ‘wide range’ (I know, more unique elements = more memory), and why is the countingSort1() style of implementation used more widely than countingSort2()? What are the drawbacks of using countingSort2()?

When I try to connect the client to my website with socket.io, it just spams
https://example.com/socket.io/?EIO=4&transport=polling&t=OUAHy-a 404 (At other times the request has just timed out instead of 404) repeatedly in the client console.
Here is the client html:

<!DOCTYPE html>
<html>
  <head>
    <title>Zesty testy</title>
  </head>
  <body>
    <script src="https://cdn.socket.io/4.4.1/socket.io.js"></script>
    <script src="./client.js"></script>
  </body>
</html>

And here is the client js:

const socket = io();

At last, here is the server js:

var app = require('express')(); 
var server = require('http').Server(app); 
var io = require('socket.io')(server);

io.on('connection', (socket) => {
  console.log('a user connected');
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

I have looked at many other questions alike mine, but no answer has been able to change the outcome.
Most of the code is from the socket.io webpage, with some slight change. I have been trying to get this to word for so long, and I will happily answer any questions to try and get this work. Thanks! (I am not using localhost.)

The expected result is for the Engine.io request thing to have status code 200 instead of 404, and the server console to display that a user has connected.

Invariant Violation: “main” has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn’t called., js engine: hermes
  at node_modulesreact-nativeLibrariesCoreExceptionsManager.js:null in reportException
  at node_modulesreact-nativeLibrariesCoreExceptionsManager.js:null in handleException

• … 7 more stack frames from framework internals

enter image description here

I’m just calling one file . When I call that file it through thi error

in my simple node app, my code keeps on return “404 file note found instead of my home page.
I have tried so many times to solve but isn’t working out yet.

const http = require('http');
const fs = require('fs');
const dir = './public/';
const port = process.env.PORT | 3000;

//creating the server and routing
// creating the server starts
const server = http.createServer( (req, res) =>{

    // routing the frontend here starts
    if(req.url === './') {
        render(res, 'index.html');
    }else if (req.url === '/about'){ 
        render(res, 'about.html');
    }else if (req.url === '/contact'){
        render(res, 'contact.html');
    }else{
        res.writeHead(404, {'Content-Type' : 'text/html'});
        res.end('<h1> 404 file not found </h1>');
    }
     // routing the frontend here end

}).listen(port, ()=>{
    console.log(`http://localhost:${port}`);
})
// creating the server endss sssssssssss

// we will load the document on the front end here (or we will use the fs read file here)
// startsssssssssssssss
const render = (res, file) => {
    fs.readFile(dir + file, (err, data) => {
        //if error
        if(err){
            res.writeHead(404, {'Content-Type' : 'text/html'});
        res.end('<h1> 404 file not found </h1>')
        }
        // if no error
        res.writeHead(200, {'Content-Type' : 'text/html'});
        res.write(data);
        res.end();
    });
}

I have tried using some other techniques but isn’t working out.