When calling puppeteer in nodejs language, you want to set the language and country of the browser to French-Canada.
Configure “–lang=fr-CA” in the “args” of “launch” in the code, only the language becomes French, but the language setting of the browser is not Canada. Is there a similar problem? how should I solve it? ask for advice.
Author: Blancer
Cycle inside cycle AlpineJS
Im new in alpineJS. I read official documentation and google, but I have not found any answer to the question: how to loop through nested array? Example:
<body>
<div x-data="comments()">
<template x-for="i in commentsList">
<p x-text="i.text"></p>
<template x-for="reply in i.replies">
<p x-text="reply.text"></p>
</template>
</template>
</div>
</body>
<script>
const comments = () => {
return {
commentsList: [
{
"createdAt": "20.01",
"text": "Hello all how can i use double cycle in alpinejs?",
"replies": [
{
"createdAt": "21.01",
"text": "I dont know?"
},
{
"createdAt": "22.01",
"text": "What is written in official doc?"
}
]
},
{
"createdAt": "23.01",
"text": "How to show replies?",
"replies": [
{
"createdAt": "24.01",
"text": "It is not possible right now"
}
]
},
]
}
}
</script>
I read official documentation and used google. I need to get the answer to question, because I have not found it.
How to create a graph in leaflet-draw
In my angular application I am using leaflet-draw. How can I, when creating or editing lines, be able to connect it to another, that is, make one line out of 2 lines. Thank you.
I want to create graphs not only from lines, but also so that other objects (markers, circles, polygons and squares) can be included in one graph, if possible.
Div not appearing when clicking on a button
I am kinda new to programming, so I’m sorry if my question is silly or the code I’ll send is not perfect. I’m trying to build a simple web app in Flask that allows to track your CO2 emissions by inserting some information about your everyday consumptions.
Now, I have a few buttons (for example id=”nuovaEmissione”) that when clicked a div in the center of the page appears (using javascript .add(“active”) to the display property of the div) and lets you do other stuff. I applied the same, identic logic to another button (id=”obiettivoMensile”) and for some reasons the div would not appear.
Please, I’m losing my mind on this, I checked everything. The logic is the same of the other button, but it doesn’t work. What can I do?
I tried to check the names of the variables, some spelling mistakes in the javascript but everything is okay. I even asked chatgpt to solve the problem and it says that everything is correct.
document.getElementById('obiettivoMensile').addEventListener('click', function() {
document.getElementById('setObiettivo').classList.add('active');
});#setObiettivo {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
#setObiettivo.active {
display: block;
}<div>
<button id="obiettivoMensile" class="btn btn-success btn-sm">imposta</button>
</div>
<div id="setObiettivo">
ciao
</div>My dark mode function won’t change the style of the body tag
I am writing a function to switch between dark mode and light mode on my webpage, but the contents of the body tag won’t change. The navbar at the top of the page changes style, but the body doesn’t
I have tried narrowing down the body tag in my light mode class in css, yet it doesn’t change at all.
HTML:
<body>
<div class="topnav">
<div class="logo"></div>
<div class="navlinks">
<a href="index.html">Demo</a>
<a href="interactive.html">Interactive</a>
<button onclick="{darkMode()}" class="settingsButton">_ _ _</button>
</div>
</div>
<!-- graph -->
<div class="traffic">
<canvas id="chart1"></canvas>
<canvas id="graph2"></canvas>
</div>
CSS:
body{
background: #fafafa;
font-family: "Open Sans", Arial, sans-serif;
color: #333;
background-color: #202a51;
background-image: radial-gradient( #202a51, #111235);
transform-style: preserve-3d;
}
.topnav {
overflow: hidden;
display: flex;
height: 100px;
width: 100%;
z-index: 1000;
flex-direction: row;
justify-content: space-between;
background-color: white;
}
.lightMode{
.topnav{
background-color: #e5e1c4;
}
.topnav a{
color: #f45e33;
}
.settingsButton{
background-color: #e5e1c4;
color: #f45e33;
}
}
.lightMode body{
background-color: #A09682;
background-image: none;
}
JavaScript:
function darkMode(){
var element= document.body;
element.classList.toggle("lightMode");
}
Am I missing anything?
Why am I getting “Error: grid.mongo.ObjectID is not a constructor”
I’m playing with gridfs-stream in nextjs (a react server component) and I’m getting Error: grid.mongo.ObjectID is not a constructor
here’s my code:
import { writeFile } from "fs/promises";
import { join } from "path";
import Grid from "gridfs-stream";
import { connect } from "@/helpers/DBConfig.js";
import mongoose from "mongoose";
const connection = await connect();
export default function ServerUploadPage() {
async function upload(data) {
"use server";
const file = data.get("file"); // 'file' is the name attribute of the file input
if (!file) {
throw new Error("No file uploaded");
}
const bytes = await file.arrayBuffer();
const buffer = Buffer.from(bytes);
const gfs = Grid(connection.db, mongoose.mongo);
const writeStream = gfs.createWriteStream({
filename: file.name,
});
console.log("writeStream", writeStream);
writeStream.write(buffer);
writeStream.end();
writeStream.on("close", () => {
console.log("File uploaded successfully");
});
// With the file data in the buffer, you can do whatever you want with it.
// For this, we'll just write it to the filesystem in a new location
// const path = join("/", "tmp", file.name);
// await writeFile(path, buffer);
// console.log(`open ${path} to see the uploaded file`);
return { success: true };
}
return (
<main>
<h1>React Server Component: Upload</h1>
<form action={upload}>
<input type="file" name="file" />
<input type="submit" value="Upload" />
</form>
</main>
);
}
I tried removing the
conn.once('open', ...
because IO have read that it’s deprecated
JavaScript rounding works icncorrectly [duplicate]
That’s crazy! I tried vast majority implementations of rounding, but one case still fails.
Math.round((130.325) * 100) / 100 // 130.32 incorrect (should be 130.33)
BUT
Math.round((30.325) * 100) / 100 // 30.33 correct
and any other value different from 130.325 has correct rounding. As far as I realize, left part before the dot can’t affect on rounding, isn’t it?
Please help me to found the solution.
serie.data.some is not a function `[email protected]`
This is straight from the Area Chart examples, with just one modification. Using custom data instead of the randomized one used in the example.
But running this throws an error: serie.data.some is not a function.
Can you please help me find the issue here.
CODESANDBOX
src/Components/Area.tsx
export default function Bar() {
const { /*data,*/ randomizeData } = useDemoConfig({
series: 10,
dataType: "time",
});
// the first data variable destructed from the hook is working, whereas creating new data variable with the same structure is not working
const data = [
{
label: "Maths Level 2 Course",
data: {
primary: "2024-02-10",
secondary: 4,
radius: null,
},
},
{
label: "Maths Level 2 Course",
data: {
primary: "2024-02-10",
secondary: 1,
radius: null,
},
}
];
const primaryAxis = React.useMemo<
AxisOptions<(typeof data)[number]["data"][number]>
>(
() => ({
getValue: (datum) => datum.primary as Date,
}),
[]
);
const secondaryAxes = React.useMemo<
AxisOptions<(typeof data)[number]["data"][number]>[]
>(
() => [
{
getValue: (datum) => datum.secondary,
stacked: true,
// OR
// elementType: "area",
},
],
[]
);
return (
<>
<button onClick={randomizeData}>Randomize Data</button>
<br />
<br />
<ResizableBox>
<Chart
options={{
data,
primaryAxis,
secondaryAxes,
}}
/>
</ResizableBox>
</>
);
}
I am going to be fetching this data from an API and load it dynamically. But even static data is not working.
I have developed a script to Deep Fry Images, but it doesn’t seem crispy enough [closed]
It can change hue types, however, I do not know how to make it more crispy.
I am attempting to do this with native javascript.
I do not know any canvas or image functions to change anything other than hue. Any ideas?
I did try changing the random integers, but it added more hue variation, didn’t make it look crispy enough.
const stage = document.getElementById("stage"); //Gets the canvas
const ctx = stage.getContext("2d"); //Context
const img = new Image();
var imgData = 0; //Place to store the image data, for any function to use.
window.addEventListener('load', function() {
document.querySelector('input[type="file"]').addEventListener('change', function() {
if (this.files && this.files[0]) {
img.onload = () => {
//console.log(ctx.getImageData(0,0,stage.width,stage.height));
draw();
}
img.src = URL.createObjectURL(this.files[0]); // set src to blob url
draw();
}
});
});
function draw() {
ctx.clearRect(0, 0, stage.width, stage.height);
ctx.drawImage(img, 0, 0, stage.width, stage.height);
imgData = ctx.getImageData(0, 0, stage.width, stage.height);
console.log(imgData);
}
function fry() {
let max = 100,
min = -100;
for (let i = 0; i < imgData.data.length; i += 4) {
imgData.data[i] -= Math.floor(Math.random() * (max - min + 1)) + min;
imgData.data[i + 1] -= Math.floor(Math.random() * (max - min + 1)) + min;
imgData.data[i + 2] -= Math.floor(Math.random() * (max - min + 1)) + min;
imgData.data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);
}
draw();<input type='file' accept="image/png, image/jpeg" />
<button onclick="fry()">Deep Fry</button>
<div class="stage">
<canvas id="stage" width="400" height="400" style="border:1px solid #000000;"></canvas>
</div>Angular – ScrollIntoView, scolling to elements inconsistenty to different heights in scrollable modal
I have a modal, and anchor tags inside them.
When I navigate from a separate page, to the modal, depending on the element chosen, the scrollIntoView function works, but it inconsistently scrolls different elements to different heights. (The same elements are scrolled to the same position, but different elements scroll to different heights…some even barely scroll into the modal)
I’m using the
this.activatedRoute.fragment.subscribe(fragment => {
if(fragment) {
const element = document.getElementById(fragment);
console.log(element)
if (element) {
element.style.scrollMarginTop = "0px";
element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'});
}
} else {
this.topOfPage()?.nativeElement?.scrollIntoView();
}
})
Any ideas?
My Tailwind CSS does not seem to function
I am trying to make my tailwind script and whenever I go to test it out, It does not work as it comes up with an error called the content in the code Is [Code]terminal](https://i.sstatic.net/mLajNgkD.png) missing, have I gone anything wrong here?
I was trying to build a website with various colours and fonts, however it does not seem to work in this case, I have installed my plugins properly as far as I know
I have multiple room type and each room type has multiple row for pricing
I have multiple room type and each room type has multiple row for pricing but while i perform calculation it calculate for each room type form but If i add new pax slab row for that room type then it unable to calculate it.
is there any possibilities to perform calculation for each row according to roomtype each row
@foreach ($all_room_types as $room_type)
<div class="heading_room_name">Cost Per Person for {{ $room_type->room_type_name }} room</div>
<table class='table table-bordered table-room-{{ $room_type->id }}'>
<p class="bg-dark m-0 p-1 text-white">Add Direct Cost</p>
<thead>
<tr>
<td>
<b>Min. Pax<span style="color: red;">*</span></b>
</td>
<td>
<b>Max. Pax<span style="color: red;">*</span></b>
</td>
<td>
<b>Cost<span style="color: red;">*</span></b>
</td>
<td>
<b>Total Cost</b>
</td>
<td width='25'>
<div class='mx-5'>
<i class='fa fa-plus btn btn-sm btn-success add-pax-slab-row' data-room-type-id='{{ $room_type->id }}' style='cursor: pointer;'></i>
</div>
</td>
</tr>
</thead>
<tbody>
<div class="pax-slab-box">
<tr class='pax-slab-row-{{ $room_type->id }}'>
<td>
{!! Form::select('min_pax[]', $min_pax, null, ['class' => 'form-control min_pax','placeholder' => 'Select min pax']) !!}
{!! $errors->first('min_pax','<span class="help-block text-danger">:message</span>') !!}
</td>
<td>
{!! Form::select('max_pax[]', $max_pax, null, ['class' => 'form-control max_pax','placeholder' => 'Select max pax']) !!}
{!! $errors->first('max_pax','<span class="help-block text-danger">:message</span>') !!}
</td>
<td>
{!! Form::text('cost', null, ['class' => 'form-control cost-'.$room_type->id, 'placeholder' => 'Enter Cost']) !!}
{!! $errors->first('cost','<span class="help-block text-danger">:message</span>') !!}
</td>
<td>
{!! Form::text('total_cost', null, ['class' => 'form-control total-cost-'.$room_type->id,'placeholder' => 'Total Cost', 'disabled' => 'true']) !!}
{!! $errors->first('total_cost','<span class="help-block text-danger">:message</span>') !!}
</td>
<td width='25'>
<div class='mx-5'>
<i class='fa fa-trash btn btn-sm btn-danger remove-pax-slab-row' data-room-type-id='{{ $room_type->id }}' style='cursor: pointer;'></i>
</div>
</td>
</tr>
</div>
</tbody>
</table>
@endforeach
@foreach ($all_room_types as $room_type)
$('.cost-{{ $room_type->id }}').keyup(function() {
var cost = parseFloat($('.cost-{{ $room_type->id }}').val());
var profit = parseFloat($('.profit').val());
var tax_percentage = parseFloat($('.tax-percentage').val());
checkNum('.cost-{{ $room_type->id }}');
total_cost = calculate_total_cost(cost, profit, tax_percentage);
$('.total-cost-{{ $room_type->id }}').val(total_cost);
});
@endforeach
how can i make popup when pressed into a button or an image, a popup appears in HTML with JS?
I want to get the code for a website that when I press a button or an image above that button, a popup appears in the same window and tab that shows additional info and navigation buttons and some dots that shows which section of content is played. When I enter to the last content. it shows a button that says “OK” and when I click that, popup closes. Also a button that says ‘X’ at the right hand side can do that too. It’s like the Starbucks rewards site title:Endless Extras I tried too much but I can’t do that. Can anyone help me?
I tried multiple codes but they don’t work. I asked ChatGPT,Google Gemini etc. and also they can’t do anything. They gave codes but they don’t work. I asked them to revise and versa versa.
window.open opens in new tab when in fullscreen browser mode in mac
I have following code in my Next.js function. I want the url to be opened in the same tab but in a new smaller window.
window.open(url, '_blank', features)
where features are,
const features = `width=${newWindowWidth}, height=${newWindowHeight}, top=${top}, left=${left}`;
This works well on mac when in minimised browser mode (same on Firefox, safari, chrome). but as you switch to maximised browser mode. it suddenly opens the url in new tab. How to persist the behaviour of opening in a small new window in the same tab?
I know it’s a duplicate here. but no solution/answers are there. Thus, asking it again.
Long : JS-created vs HTML hard-coded speed? [closed]
I’m working on a web page conatining a <ul> with around 5,000 <li>s. Each <li> is a link with a similar structure (www.site.com/collction/####), with anchor text around 20-200 characters.
Presently, I’m storing the items in a json similar to the below format, and dynamically adding list items in JS (with a Docment Fragment to avoid 5,000 redraws):
[{
"url_end": "abcxyz",
"achor_text": "The first item: ABCXYZ"
},
{
"url_end": "def123"
"anchor_text": "The second item: DEF123"
},
...]
Here’s what I’m curious about:
- To my mind, I’m wondering if the loading-time savings from using a minimized js file (e.g. single-letter keys, and not needing the full URL path) is negated by the amount of time required to dynamically populate the <ul>?
- That is, would hard-coding the <ul> in HTML be a faster page load? It would also cache (rather than JS rebuilding the list every re-load), yes?
- The JS method is it keeps the HTML filesize small, so the page appears very quickly, then the JS builds the list with a placeholder “loading” text in the mean time.
- This 5,000-item list won’t ever be updated once I’m finished with the page.
Thoughts?