After passing the value in the input tag to another section, I can’t edit that inputs in react

I’m passing a value from one input tag to another input tag, which are in different independent sections. And after passing the value, I can’t edit the input to which I passed the value. Here is the error:

You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.

I get the values, but I can’t edit the inputs!

Here is code:

App.js

import React from 'react';
import { useState } from 'react';
import { StartingSection } from './components/StartingSection';
import { CustomizerSection } from './components/CustomizerSection';

function App() {
  const [checkSection, setSection] = useState(false);
  const showCustomizerSection = () => setSection(true);

  const [Width, setWidth] = useState();
  const [Length, setLength] = useState();
  
  return (
    <div className="App">
        {checkSection ? 
            <CustomizerSection 
              Width={Width} 
              Length={Length}
            /> 
          : 
            <StartingSection 
              Width={Width}
              setWidth={setWidth}
              Length={Length}
              setLength={setLength}
              onClick={showCustomizerSection}  
            />
          }
    </div>
  );

StartingSection.jsx

export function StartingSection({onClick, Width, setWidth, Length, setLength}) {
    return(
        <div>
            <input type="number" value={Width || ''} onChange={event => setWidth(event.target.value)} />
            <input type="number" value={Length || ''} onChange={event => setLength(event.target.value)} />
            <button className="button w-100" onClick={onClick}>Continue</button>
        </div>
    )
}

CustomizerSection.jsx

I pass values to this section, and at this point the error that I indicated above occurs.

export function CustomizerSection({Width, Length}) {
    
    return(
        <div>         
           <input type="number" value={Width} /> <=== this is where I pass the value
           <input type="number" value={Length} /> <=== this is where I pass the value
        </div>
    )
}

What could be the problem? Thanks!

How to be redirected by Express backend after successfully submitted the requiest from the frontend by Fetch API?

Below code fragment represents the usual signing in logic for the backend.
If credenctials are correct, the user will be redirected to the admin panel:

import Express from "express";
import { Controller, Post, Body as RequestBody, Res as HTTP_Response } from "routing-controllers";


@Controller()
class AccessControlController {

    @Post("/api/sign_in")
    protected async signIn(
        @Res() response: Express.Response
    ): Promise<Express.Response> {
    
        // check the user name and password
        // if password is correct update the session
    
        response.redirect("/admin");
        return response;
    }
}

Writing this code I have expected that if response has been returned to the frontend, the user will be automatically redirected to the /admin destination.

async function signIn() {

    try {

        await fetch("/api/sign_in", { method: "post", body: JSON.stringify({ /* ... */ }) })

    } catch {

    // ...
        
        return;
        
    }

    // ↓ If I need to write this on the frontend, no need in `response.redirect("/admin");` at backend?
    // window.location.href = "/admin"

    console.log("End");

}

I has been surprised when the script have reached the console.log("End"); line without redirection. If to output the response of the fetch it will include:

{
  ok: true,
  redirected: true,
  status: 200, // not 302!
  // ...
}

Of course the redirect will work if I comment out the window.location.href = "/admin" line. But should not just response.redirect("/admin"); at backend be enough?

Field value too long (3184658 characters)

This is my field in DTO

@IsNotEmpty({ message: 'Nội dung này không được để trống!' })
@IsString()
@MinLength(0, { message: 'Độ dài bài viết không hợp lệ!' })
content: string;

I have not set a maximum limit for this field, but when transmitting a large string of 3184658 characters an error occurred

"statusCode": 400,
"message": "Field value too long",
"error": "Bad Request"

If the error is due to DTO, the error code will usually be 422 (not 400). I tried reconfiguring my middleware but it’s not work

app.use(bodyParser.json({ limit: '10mb' }));
app.use(bodyParser.urlencoded({ limit: '10mb', extended: true }));

why does react useeffect function renders a console log twice

I am in the process of learning react useEffect().
In this example, “render” gets logged twice the first time I run the application.

import { useState, useEffect } from "react";

function MyComponent() {
  const [resourceType, setResourceType] = useState("posts");

  useEffect(() => {
    console.log("render");
  }, [resourceType]);

  return (
    <>
      <div>
        <button onClick={() => setResourceType("posts")}>Posts</button>
        <button onClick={() => setResourceType("users")}>Users</button>
        <button onClick={() => setResourceType("comments")}>Comments</button>
      </div>
      <h1>{resourceType}</h1>
    </>
  );
}

export default MyComponent;

It should render it once as the application is run.
Why is it printed twice in the console log.

Uncaught TypeError: underlyingArray.splice is not a function

I tried removing an item from my Knockout Observable array using remove() function, but getting the above mentioned error.
Heres my code
_this.fileUploader.files.remove(function (uploadedFile) { return uploadedFile.name == fileName; });

Tried the remove() method, would like the element to be removed, why am i getting splice() error?

Image file Texture doesn’t appear for PlaneGeometry on WebGL

What I want to do is make one cube and one 2D plane field

My source code is like this below.

I try to make cube and ground

And I tried to use https://picsum.photos/800/400?random=1 as texture for ground

However cube appears well but ground has no texture.

THREE.Texloader or THREE.Mesh, where am I wrong?

import React,{useRef,useState,useEffect} from 'react'
import axios from 'axios';


import styles from "../css/test-styles.module.css";


import * as THREE from 'three';
import TrackballControls from 'three-trackballcontrols';
import three_test from "../images/three_test.jpg";

function ThreePage() {
  const refContainer = useRef(null);
  useEffect(() => {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    refContainer.current && refContainer.current.appendChild( renderer.domElement );
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    var cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    camera.position.z = 5;
   
    var geometry = new THREE.PlaneGeometry( 100, 100, 64, 64 );

    const loadTex = async () =>{
        const texLoader = new THREE.TextureLoader();
        var texture = await texLoader.loadAsync(
            "https://picsum.photos/800/400?random=1"
            //three_test
        );
        console.log("check texture is loaded:",texture);
        var ground_material = new THREE.MeshStandardMaterial({ map: texture });
            
        var ground = new THREE.Mesh(
            geometry,
            ground_material
        );
        ground.rotation.x = Math.PI / -2;
        scene.add( ground );
    
        //const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
        //directionalLight.position.set(1, 1, 1);
    
        const controls = new TrackballControls(camera, renderer.domElement);
     
        // Any manual camera changes should be done first, then update the controls.
        camera.position.z = 5;
        controls.rotateSpeed = 5.0; //回転速度
        controls.update();
         
        const animate = function () {
          requestAnimationFrame(animate);
         
          // Required for updating during animations.
          controls.update();
          renderer.render(scene, camera);
        }
        animate();
    

    }
    loadTex();

  
  }, []);
  return (
    <div ref={refContainer}></div>

  );
}

export default ThreePage

Tabulator table width is shrinking at first time loading and after drag it is adjusting

enter image description here
above image show that how tabulator table width is shrinking

but it should show like below image
it should show like this
here table is shrinking at first time loading like in which is there in first image and when i drag it is coming but i want it should adjust properly

  this.wormGearTabulatorHeaders = [
            {
                title: "Type", field: "name", headerHozAlign: "left", width: "55%", headerSort: false, hozAlign: "left", editable: false

            },
            {
                title: "Value", headerHozAlign: "center", width: "45%",
                columns: [
                    {
                        title: "Min", field: "minValue",cellEdited: validateWormGear,editable:editCheck, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter:
                            decimalFormatter
                        , headerHozAlign: "right"
                        , editorParams: {
                            formatter: decimalFormatter
                        },
                    },
                    {
                        title: "Nom", field: "nomValue",cellEdited: validateWormGear, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"

                        , editorParams: {
                            formatter: decimalFormatter
                        }
                    },
                    {
                        title: "Max", field: "maxValue",cellEdited: validateWormGear,editable:editCheck, editor: "input", headerSort: false, width: "15%", hozAlign: "right", formatter: decimalFormatter, headerHozAlign: "right"

                        , editorParams: {
                            formatter: decimalFormatter
                        }
                    },
                ],
            },

        ];
        this.wormGearTabulatorTable = new Tabulator("#wormGearTabulatorTable", {
            maxHeight: "100%",
            maxwidth: "100%",
            data: wormGearTableData,
            layout: "fitDataTable",
            headerSort: false,
            columns: this.wormGearTabulatorHeaders,
        })
its html code for same table 
                                        <div id="wormGearTabulatorTable" style="max-height: 100%;max-width: 100%;position: relative;"></div>

Python Time Table

Good morning all,

I wanted to make a small .py file which will read time information at website. I tried a couple of solutions but it didnt work well.I will share which area at website, I was trying to take.enter image description here How can I run this “Time” in python? I installed couple libraries, I couldnt figure out.

I installed couple libraries, I couldnt figure out.

JS: how can i run React Js in a simple html/css/js code editor made in Javascript?

I would like to create a small and minimal code editor (in Javascript) to use React Js. I will need the code editor for educational reasons, only for simple online exercises.

enter image description here

I created a code editor that reads html, css and js code, but of course it doesn’t read React code. I would like to try to view the Previews of a simple only Hello World! (without import, function, etc.). How can I make my code editor read React code? I know, I could use ready-made code editors, but I would like to try to create one from scratch considering that I only need them for small teaching exercises.

html

 <div id="htmlCode" contenteditable="true" oninput="showPreview();" onchange="changeColor();">import React from "react";
import ReactDOM from "react-dom/client";

function Hello(props) {
  return &lt;h1>Hello World!&lt;/h1>;
}

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(&lt;Hello /&gt;);

  </div>
    
    <h3>PREVIEW</h3>
    <div class="preview-area">
      <iframe id="preview-window"></iframe>
    </div>


css

#htmlCode {
  width: 456px;
  height: 165px;
  padding: 10px;
  background-color: #444;
  color: white;
  font-size: 14px;
  font-family: monospace;
  white-space: pre;
}

js

//PREVIEW
function showPreview() {
    var htmlCode = document.getElementById("htmlCode").innerText;
  
    var cssCode =
    "<style>" + document.getElementById("cssCode").value + "</style>";
    var jsCode =
    "<scri" + "pt>" + document.getElementById("jsCode").value + "</scri" + "pt>";
    
    var frame = document.getElementById("preview-window").contentWindow.document;
    document.getElementById("preview-window").srcdoc = htmlCode;
    frame.open();
    frame.write(htmlCode + cssCode + jsCode);
    frame.write(editor);
    frame.close();
  }
  
  showPreview()

Generate all Possible combination in a nested object

Consider a JavaScript function generateCombinations(obj) designed to generate all possible combinations of values for a given input object obj. The objective is to replace values within arrays and nested objects with null to cover all possible combinations. The provided function is intended to handle cases where objects are present as elements within arrays. Here are the statements related to the function:

The function initializes an array result to store the generated combinations.
The function uses recursion and iterates through the keys of the input object to generate combinations.
If the current value of a key is an array, the function iterates through each element and considers cases where the element is an object or a simple value.
For arrays with objects as elements, the function correctly generates combinations by setting object properties to their values or null.
The function handles cases where arrays might be empty, generating combinations with an empty array or an array containing a null element.
If the current value of a key is a nested object (not an array), the function generates combinations by replacing nested values with null.
The function sets absent keys to null in nested objects to ensure all keys are covered in the combinations.
The generated combinations are pushed to the result array and returned as the final output.

Your task is to review the provided JavaScript function and its statements and identify any issues or improvements needed to ensure it correctly handles cases where objects are present as elements within arrays.

Or Write your own function for this problem stating and make sure the function covers all the points






const fs = require('fs');


function generateCombinations(obj) {
const keys = Object.keys(obj);
const result = [];

    function generate(index, currentCombination) {
        if (index === keys.length) {
            // Set absent keys to null in nested objects
            Object.keys(obj).forEach((key) => {
                if (!(key in currentCombination)) {
                    currentCombination[key] = null;
                }
            });
    
            result.push(currentCombination);
            return;
        }
    
        const currentKey = keys[index];
        const currentValue = obj[currentKey];
    
        if (Array.isArray(currentValue)) {
            if (currentValue.length > 0) {
                currentValue.forEach((arrayElement, arrayIndex) => {
                    if (typeof arrayElement === 'object' && arrayElement !== null) {
                        const arrayElementKeys = Object.keys(arrayElement);
    
                        arrayElementKeys.forEach((arrayElementKey) => {
                            const arrayElementValue = arrayElement[arrayElementKey];
    
                            generate(index + 1, {
                                ...currentCombination,
                                [currentKey]: [
                                    ...(currentCombination[currentKey] || []).slice(0, arrayIndex),
                                    {
                                        ...(currentCombination[currentKey] || [])[arrayIndex] || {},
                                        [arrayElementKey]: arrayElementValue,
                                    },
                                    ...(currentCombination[currentKey] || []).slice(arrayIndex + 1),
                                ],
                            });
    
                            generate(index + 1, {
                                ...currentCombination,
                                [currentKey]: [
                                    ...(currentCombination[currentKey] || []).slice(0, arrayIndex),
                                    {
                                        ...(currentCombination[currentKey] || [])[arrayIndex] || {},
                                        [arrayElementKey]: null,
                                    },
                                    ...(currentCombination[currentKey] || []).slice(arrayIndex + 1),
                                ],
                            });
                        });
                    } else {
                        generate(index + 1, {
                            ...currentCombination,
                            [currentKey]: [
                                ...(currentCombination[currentKey] || []).slice(0, arrayIndex),
                                arrayElement,
                                ...(currentCombination[currentKey] || []).slice(arrayIndex + 1),
                            ],
                        });
    
                        generate(index + 1, {
                            ...currentCombination,
                            [currentKey]: [
                                ...(currentCombination[currentKey] || []).slice(0, arrayIndex),
                                null,
                                ...(currentCombination[currentKey] || []).slice(arrayIndex + 1),
                            ],
                        });
                    }
                });
            } else {
                // Handle empty arrays
                generate(index + 1, {
                    ...currentCombination,
                    [currentKey]: [],
                });
            }
        } else if (typeof currentValue === 'object' && currentValue !== null) {
            const nestedKeys = Object.keys(currentValue);
    
            nestedKeys.forEach((nestedKey) => {
                const nestedValue = currentValue[nestedKey];
    
                // Generate combinations with nested key and its value
                generate(index + 1, {
                    ...currentCombination,
                    [currentKey]: {
                        ...(currentCombination[currentKey] || {}),
                        [nestedKey]: nestedValue,
                    },
                });
    
                // Generate combinations with nested key set to null
                generate(index + 1, {
                    ...currentCombination,
                    [currentKey]: {
                        ...(currentCombination[currentKey] || {}),
                        [nestedKey]: null,
                    },
                });
            });
        } else {
            // Generate combinations with current key and its value
            generate(index + 1, {
                ...currentCombination,
                [currentKey]: currentValue,
            });
    
            // Generate combinations with current key set to null
            generate(index + 1, {
                ...currentCombination,
                [currentKey]: null,
            });
        }
    }
    
    generate(0, {});
    
    return result;

}

// Example JSON object with arrays containing objects

// Generate combinations
const combinations = generateCombinations(inputObject);

// Convert combinations to JSON string
const jsonString = JSON.stringify(combinations, null, 2);

// Write to a file
fs.writeFileSync('Queue/output.json', jsonString, 'utf-8');
console.log('Output file created: output.json');


for this input const inputObject = {
  key1: [1, 2],
  key2: {
    nested1: 'a',
    nested2: ['x', 'y'],
  },
  key3: 'value3',
};


If you are getting this type of output then your code is correct 

[
  {
    key1: [1, 2],
    key2: { nested1: 'a', nested2: ['x', 'y'] },
    key3: 'value3'
  },
  {
    key1: [1, 2],
    key2: { nested1: 'a', nested2: ['x', null] },
    key3: 'value3'
  },
  //  (other combinations)
  {
    key1: [1, 2],
    key2: { nested1: null, nested2: ['x', 'y'] },
    key3: 'value3'
  },
  {
    key1: [1, 2],
    key2: { nested1: null, nested2: ['x', null] },
    key3: 'value3'
  },
  //  (other combinations)
  {
    key1: null,
    key2: { nested1: 'a', nested2: ['x', 'y'] },
    key3: 'value3'
  },
  {
    key1: null,
    key2: { nested1: 'a', nested2: ['x', null] },
    key3: 'value3'
  },
  //  (other combinations)
  {
    key1: null,
    key2: { nested1: null, nested2: ['x', 'y'] },
    key3: 'value3'
  },
  {
    key1: null,
    key2: { nested1: null, nested2: ['x', null] },
    key3: 'value3'
  },
 ]

unable to exectute the callback function in MongoClient.connect

const mongodb = require('mongodb')
const MongoClient = mongodb.MongoClient

const url = 'mongodb://127.0.0.1:27017/task-manager'

const client = new MongoClient(url)

client.connect((error,client)=>{
    if(error){
        console.log('unable to connect to database')
    }

    console.log('connected')
})

this is my code, and Mongodb is running. when I run ‘node app.js’ it gets connected to the databse but ‘connected’ is not printed in the console.

{“t”:{“$date”:”2024-01-02T10:55:49.736+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:22943, “ctx”:”listener”,”msg”:”Connection accepted”,”attr”:{“remote”:”127.0.0.1:51487″,”uuid”:{“uuid”: {“$uuid”:”82e75c91-1569-429a-8ab8-f9df73b09bd3″}},”connectionId”:8,”connectionCount”:8}}
{“t”:{“$date”:”2024-01-02T10:55:49.739+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:51800, “ctx”:”conn8″,”msg”:”client metadata”,”attr”:{“remote”:”127.0.0.1:51487″,”client”:”conn8″,”doc”:{“application”:{“name”:”mongosh 2.1.1″},”driver”:{“name”:”nodejs|mongosh”,”version”:”6.3.0|2.1.1″},”platform”:”Node.js v20.9.0, LE”,”os”:s v20.9.0, LE”,”os”:{“name”:”win32″,”architecture”:”x64″,”version”:”10.0.22621″,”type”:”Windows_NT”}}}}
{“t”:{“$date”:”2024-01-02T10:58:04.729+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:22943, “ctx”:”listener”,”msg”:”Connection accepted”,”attr”:{“remote”:”127.0.0.1:51502″,”uuid”:{“uuid”:{“$uuid”:”0ff1492e-4251-4162-8f2c-511ecec28105″}},”connectionId”:9,”connectionCount”:9}}
{“t”:{“$date”:”2024-01-02T10:58:04.732+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:51800, “ctx”:”conn9″,”msg”:”client metadata”,”attr”:{“remote”:”127.0.0.1:51502″,”client”:”conn9″,”doc”:{“driver”:{“name”:”nodejs”,”version”:”6.3.0″},”platform”:”Node.js v20.5.0, LE”,”os”:{“name”:”win32″,”architecture”:”x64″,”version”:”10.0.22621″,”type”:”Windows_NT”}}}}
{“t”:{“$date”:”2024-01-02T10:58:15.244+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:22943, “ctx”:”listener”,”msg”:”Connection accepted”,”attr”:{“remote”:”127.0.0.1:51504″,”uuid”:{“uuid”:{“$uuid”:”94614883-ab8a-45b6-88f6-d1e1eb3fbbcb”}},”connectionId”:10,”connectionCount”:10}}
{“t”:{“$date”:”2024-01-02T10:58:15.246+05:30″},”s”:”I”, “c”:”NETWORK”, “id”:51800, “ctx”:”conn10″,”msg”:”client metadata”,”attr”:{“remote”:”127.0.0.1:51504″,”client”:”conn10″,”doc”:{“driver”:{“name”:”nodejs”,”version”:”6.3.0″},”platform”:”Node.js v20.5.0, LE”,”os”:{“name”:”win32″,”architecture”:”x64″,”version”:”10.0.22621″,”type”:”Windows_NT”}}}}

this is the console of mongodb.

I have tried my best to solve the problem. I have even tried to change my firewall settings to identify the problem and have enabled port ‘27017’ in my firewall settings but nothing seem to work.

Include Module Title when exporting to excel file

I need to include the module title on the first row when exporting to excel. I tried some ways but still not working. Either it wont appear or the excel button wont work. Help me please.

For reference, here’s my code:

$(document).ready(function(){

    , dom: 'lT<"dt-toolbar">fgtipB'
    , lengthMenu: [ [10, 50, 100, 500, -1], [10, 50, 100, 500, 'All'] ]
    , scrollY: 320
    , buttons: [
        {
            extend:    'copyHtml5'
            , text:      '<i class="fa fa-files-o"></i>'
            , titleAttr: 'Copy'
            , exportOptions: { columns: [ ':gt(0)' ] }
        },
        {
            extend:    'excelHtml5'
            , text:      '<i class="fa fa-file-excel-o"></i>'
            , filename: 'Employee Job Hiring Info List'
            , exportOptions: { columns: [ ':gt(0)' ] }
        },
    ]

tried adding a customize{xlsx] option but not working. Title should be added in the first row of excel.

How to host a Multi-Tenant Next.js and Firebase Application with Custom Domains

I’ve developed a web application using Next.js and Firebase hosted on vercel. The application includes an admin side for content management. Now, I want to offer this application to multiple users and allow them to host it on their custom domains along with their own admin interface.

I just want it to covert it into SaaS how do i implement this?

I designed the firebase database data of different users but I can’t figure out how to host and manage it.

Building a site using Carrd, and my embed code has different effects depending on where its located

I’m using Carrd for a personal project involving displaying images and showing text when you click on said image. I have to preface, I used ChatGPT to help learn the code needed for this, and while that seemed to help me get 99% of the way, I can’t seem to solve these two bugs I’m having.

https://wallprojects.carrd.co/#memory

This links to one of the functioning sections. Each row is their own Embed code block so I could guarantee everything would line up how I wanted it to. That works great.

If you click on any picture in the top row, you get the full image and the WIP text besides it. Here’s the code for embed Block 1:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
.thumbnail {
cursor: pointer;
transition: transform 0.2s;
width: calc(100% / 9 - 20px);
margin-left: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}

.thumbnail img {
width: 100%;
height: 100%;
object-fit: contain;
}

.thumbnail:hover {
transform: scale(1.1);
}
#lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}

#lightbox img {
max-width: 80%;
max-height: 80%;
width: auto;
height: auto;
object-fit: contain;
}

#caption {
color: #fff;
margin-top: 20px;
text-align: center;
}

#lightbox-caption {
margin-left: 20px;
white-space: nowrap;
}

.grid-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
background-color: #212121;
padding: 10px;
}

@media (max-width: 600px) {
.thumbnail {
width: calc(100% / 3 - 20px);
}
}

</style>
</head>
<body>

<div class="grid-container">
<div class="thumbnail" onclick="openLightbox('Rank-Up-Magic Astral Force<br>Price Test<br>History Test', 'https://product-images.tcgplayer.com/186411.jpg')">
<img src="https://product-images.tcgplayer.com/186411.jpg" alt="Rank-Up-Magic Astral Force Price Test History Test">
</div>

/*For brevity, I've removed the other 8 images since they are the exact same layout as the above, starting after the grid-container*/

<div id="lightbox">
<img id="lightbox-image" src="" alt="Large Image">
<!-- Add a container for the caption and apply margin -->
<div id="lightbox-caption">
<div id="caption"></div>
</div>
</div>

If you click on any image in any row below that, while you still get the on-click pop-up, the thumbnail image stays on-top until you move your cursor outside of it. This is Issue 1.

The code blocks in the same section below block 1 with the grid-container, and just have the images formatted as shown in block 1, ending with .

If I re-arrange the embed code blocks, its always the top row that functions correctly, and any row below that which doesn’t function correctly.

I’m also having a separate though possibly connected issue. Using Carrd, you can have different section breaks to simulate having multiple pages. If I do that, every embed code block that isn’t on the same section as Block 1, while still keeping the image size constraints, and the on-hover feature, does not keep the on-click pop-up function. To make it even more strange, if you click on one of the images in these broken sections, then use the buttons to make your way back to the working section, the pop-up happens.

To see this click the link below, click on any of the shown images, click the button labeled BACK, then click the button labeled Major & Minor Memories to see the effect mentioned:

https://wallprojects.carrd.co/#ralts

As for what I’ve tried myself, for both the 1st Issue where the thumbnail stays active after clicking only on other images that aren’t the in the block at the top of the section, and the 2nd Issue where the on-click pop-up doesn’t work at all if I’m in a different section, I’ve tried the same same things

Whatever section I place Block 1 in is the only section where the on-click function works. Copying Block 1 into a section that is higher up on website only that section gets the on-click function while maintaining the first issue as described above. Any other section that is below that, even if that section has its own copy of Block 1, has Issue 2 where the on-click function isn’t working at all.

The on-hover transform and the image size constraints is still present in every section, but the on-click pop-up function is not working, but if you click on an image in a section that doesn’t contain Block 1 in the highest section that block 1 is in, then you use the buttons to return to the page with Block 1, the aforementioned image with its corresponding text pops up.

Does anyone have any idea what I’m doing wrong that could be causing one or both of these issues? I know next to nothing about coding, but I wanted to learn enough to make this project work on Carrd. Thanks