Flexible grid that can be zoomed and resized

In my flex-based grid, there are 5x5 elements. The 3x3 grid in the center is clickable, where clicking on an element turns its background red and resizes its width and height. The other elements adjust their sizes accordingly.

You can view the codepen here.

Now, I am looking to zoom in on the central red element and its 8 surrounding elements only, so that only 9 elements are visible. When I change the center element, the view should adjust to show the clicked element and the 8 surrounding ones, making the other elements disappear. Ultimately, I want to focus on these 9 elements and be able to move around them effortlessly.

I have experimented with changing the display and opacity, but it affects the smoothness of the animation.

If anyone has a solution, idea, or knows of a tool/library that could help me achieve this, I would greatly appreciate your input.

javascriptcssreactjsflexboxgrid

Answer №1

Upon observing, I realized that the outermost elements are not clickable for the user. In light of this, here is a potential solution.

While it may not be aesthetically pleasing, this approach addresses part of the issue (specifically hiding, not zooming).

To implement this in your code, add the following snippet at the end of your JavaScript section. Remember to include jQuery in CodePen. Additionally, you can check out the working pen inspired by your original pen.

document.getElementById('app').getElementsByClassName('wrapper')[0].addEventListener("click", function(){
  showAll();
  hideOthers();
});

document.addEventListener("dblclick", function(){
  showAll();
});

function hideOthers() {
  var activeChild = $('.wrapper .center-zoom').index() + 1;
  var indexToHide = [18,17,16,15,14,13,12,11,10,9,8,7,3,2];
  hideThese = new Array(26);
  for(i = 0; i < indexToHide.length; i++){
    hideThese[i] = activeChild - indexToHide[i];
  }

  for(j = 14; j < (indexToHide.length) * 2; j++){
    hideThese[j] = activeChild + indexToHide[j-14];
  }

  for (k = 0; k < hideThese.length; k++) {
     var $target = $(".wrapper div:nth-child(" + hideThese[k]+ ")");
     jQuery($target).css('opacity', '0');
  }
};

function showAll() {
  for(i = 0; i <= 25; i++){
    var $target = $(".wrapper :nth-child(" + i + ")");
    jQuery($target).css('opacity', '1');
  }
}

I am currently exploring options for implementing the zooming functionality. I will follow up with more information soon.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When a user clicks the button for the second time in React, the UI remains static and does not re-render

I recently started working with React and decided to build an app using the Open Weather Map API. The idea is that when a user enters a location and clicks the Find button, a JSON file is retrieved and displayed on the UI. However, I encountered an issue ...

javascriptreactjs

Having trouble scaling image with CSS, not reacting to size properties

I have little experience in web development, but a small business client has me working on their website while I handle other tasks for them. I've created a home page design that is almost ready to be turned into a template for the chosen CMS. Things ...

htmlcssimage

using a route object to update the path in Nuxt

I need to navigate to a specific URL: myApp.com/search-page?name%5Bquery%5D=value The code snippet below works perfectly when I'm on the homepage myApp.com: this.$router.push({ path: "search-page", query: { name: { query: `${this.value} ...

javascriptvue.jsurlnuxt.jsrouter

Tips for integrating external JavaScript libraries and stylesheets into a widget

I am currently working on developing a custom Javascript widget that requires users to insert specific lines of code into their web pages. This code will then dynamically add an externally hosted javascript file, allowing me to inject HTML content onto the ...

javascripthtmlcssangularjs

Embedding JavaScript within PHP variables

In my PHP document, I have a dynamic variable located at the end of the footer section. This variable's content is generated differently on each page due to it being part of a template. The majority of this variable's content consists of JavaScri ...

phpjavascript

React Class Component with Dark Mode功能

Having an issue with toggling between dark and light mode on the navbar using a toggle switch. Whenever I click on the switch, I encounter the following error: Error: Cannot read properties of undefined (reading 'state') This error is related t ...

reactjs

Creating engaging animations for variable content in Safari using CSS

This multi-step wizard is designed to smoothly transition between its 3 steps. Upon clicking the "next" button in step 1, the content is pushed down to reveal step 2. Similarly, when advancing from step 2 to step 3, the contents of both previous steps are ...

htmlcsssafari

Develop a React.js script that enables the addition of a new question

As I work on creating a script to incorporate Q&A functionality in react.js and mongodb, I'm facing an issue wherein pressing a button triggers the following errors: Error: Cannot POST /create Status: 404 (Not Found) When examining my code, I a ...

node.jsreactjsmongodb

ajax - Text not appearing in Google's cached version

My website retrieves content using MS AJAX from an ASP.NET webservice. However, when I check the cached version on Google, I notice that the initial text is not displayed. I am wondering what would be the most effective method to ensure the website's ...

javascriptajax

Tips for effectively using the parseInt function to access and verify a span element from inside a chrome extension

Trying to utilize parseInt to ascertain if a span element is greater than or equal to 1 within my Google Chrome Extension. Attempting to monitor this "0" for changes and trigger a specific URL upon change - Refer to the Image View of the "inspect" option ...

javascripthtmlgoogle-chromeparseint

JavaScript tutorial: Removing and reinserting data from a table

When dealing with my scenario, I only want the user to be able to select list box options that will then append both the values and text to table rows. However, a small issue arises when the user tries to select the same option (an already selected option) ...

javascriptjqueryhtml

Created using Node.js version 10, this revolutionary React application is taking the

I inherited a main react application that hosts several other react applications. As new applications continue to be developed, I became concerned about the use of nodejs10 for each new project. Is it possible that issues may arise in the future due to t ...

node.jsreactjs

Can a vertical line be sketched next to a horizontal line?

Let's keep it short and sweet. Here's what I'm attempting to achieve: https://i.sstatic.net/e2ZU2.png Currently, this is what I have: https://i.sstatic.net/cagv7.png Below is the code snippet: #ligne_horizontale_experience { ma ...

htmlcssbootstrap-4

The flash movie covers part of the menu that is relatively positioned

While designing a website, I encountered an issue with the Flash slider (CU3ER) overlapping the menu bar. Despite trying various z-index configurations to ensure the drop-down menu stays on top, none of them seem to work. Initially, the drop-down menu rem ...

htmlcsswordpressformattingz-index

Steps to apply the nav-active class to a navigation using jQuery just once

Seeking assistance with a problem I am facing. I would like to add the nav-active class to an li element only once, meaning if a child element is selected, then the parent li should not have the nav-active class. Below is the code I am using, but it does n ...

javascriptjqueryhtmlcss

What makes this specific handler stand out as the designated 404 handler?

While browsing through the app.js file generated by express generator, I came across the following code snippet: app.use('/', index); app.use('/users', users); // catch 404 and forward to error handler app.use(function (req, res, next ...

javascriptnode.jsexpressmiddleware

Three.js combined with Ember.js

I've been brainstorming ways to merge Ember.js with Three.js. My goal is to render multiple elements, manage the data with Ember.js bindings and general pub/sub handling, while also being able to manipulate the views/elements with three.js using THREE ...

cssember.jsthree.js

Utilizing NodeJS, Express, and the Jade template engine to insert JSON data into

While trying to follow a tutorial on NodeJS, Express, Jade, and MongoDB, I ran into a frustrating issue. Despite reading through various forum threads and attempting the suggested solutions, I still can't seem to make the POST command work. Please di ...

javascriptjsonnode.jsexpresspug

Center the SVG in the header using Bootstrap

I utilized a card template from Bootstrap for creating a warning card. The icon at the top of the card is an svg obtained from Bootstrap's icons library . On that page, you can find examples of how the icon should be aligned properly. However, in my i ...

htmlcssbootstrap-4

What's the best way to make div columns appear closer together when floating?

Check out My CodePen: http://example.com/codepen Hello there, today I am working on a 6-column layout with 3 columns in each row. The 3rd column is quite long and resembles a sidebar. According to the design, columns 4 and 5 should be positioned close to ...

csshtmlcss-float