Press on a circle to adjust its size to fit the section or division

Is it possible to make a circle expand and fill the section/div when clicked?

I want the circle to fill the screen upon clicking, and then have some text appear in its place.

Before posting this, I searched on the web and came across this jsfiddle link.

<div class="container">

    <div class="ObjectContainer">
        <div id="red" class="Object"></div>
        <a href="#">A link</a>
    </div>

    <div class="ObjectContainer">
        <div id="brown" class="Object"></div>
        <a href="#">A link</a>
    </div>

    <div class="ObjectContainer">
        <div id="dGrey" class="Object"></div>
        <a href="#">A link</a>
    </div>

    <div class="ObjectContainer">
        <div id="Grey" class="Object"></div>
        <a href="#">A link</a>
    </div>

</div>

body {
            text-align:center;
            font-family:helvetica;
            font-size: 16px;
            background: #f0f0f0;
            padding-top: 50px;
        }
            a {
                color: #f0f0f0;
                text-decoration: none;
            }
        .container {
            display: inline-block;
            margin: 0 auto;
            width: 400px;
        }
        /* ANIMATIONS */
        .Object, .ObjectContainer a {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        .ObjectContainer {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
            position: relative;
            overflow:hidden;
        }
            .ObjectContainer .Object {
                display: block;
                width: 100%;
                height: 100%;
            }
            .ObjectContainer a {
                position: absolute;
                bottom: -200px;
                left: 0;
                opacity: 0;
                width: 100%;
                line-height: 0px;
                text-align: center;
                vertical-align: middle;
            }

        .ObjectContainer:hover .Object {
            margin: 2.5%;
            height: 95%;
            width: 95%;
            border-radius: 100px;
        }
            .ObjectContainer:hover a {
                opacity: 1;
                bottom: 0;
                line-height: 200px;
            }
        #red.Object {
            background: #e7222f;
        }
        #brown.Object {
            background: #796959;
        }
        #dGrey.Object {
            background: #363635;
        }
        #Grey.Object {
            background: #6f6f6e;
        }

This is what I'm looking for, but in reverse order.

Edit

After playing around with the code you provided, I think I've almost got it. Here's the updated jsfiddle link.

All I did was swap the code around. It didn't occur to me at first. I still need to work on the text layout (needs more spacing) and might try implementing a click-based event.

#red.Object {
    background: #e7222f;
    margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius: 100px;
}
#red.Object:hover {
    background: #e7222f;
    margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius:0;
}

Answer №1

After making adjustments to the top two circles, do these initial results meet your expectations?

body {
        text-align:center;
        font-family:helvetica;
        font-size: 16px;
        background: #f0f0f0;
        padding-top: 50px;
    }
        a {
            color: #f0f0f0;
            text-decoration: none;
        }
    .container {
        display: inline-block;
        margin: 0 auto;
        width: 400px;
    }
    /* ANIMATIONS */
    .Object, .ObjectContainer a {
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }
    .ObjectContainer {
        width: 200px;
        height: 200px;
        float: left;
        display: block;
        position: relative;
        overflow:hidden;
    }
        .ObjectContainer .Object {
            display: block;
            width: 100%;
            height: 100%;
        }
        .ObjectContainer a {
            position: absolute;
            bottom: -200px;
            left: 0;
            opacity: 0;
            width: 100%;
            line-height: 0px;
            text-align: center;
            vertical-align: middle;
        }

    .ObjectContainer:hover .Object {
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
        /* -webkit-transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -ms-transform: rotate(100deg);
        -o-transform: rotate(100deg);
        transform: rotate(100deg); */
    }
        .ObjectContainer:hover a {
            opacity: 1;
            bottom: 0;
            line-height: 200px;
        }
    #red.Object {
        background: #e7222f;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #brown.Object {
        background: #796959;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #dGrey.Object {
        background: #363635;
    }
    #Grey.Object {
        background: #6f6f6e;
    }

Answer №2

$(document).ready(function(){

$('#circle').on('click', function(){
  var wrapperWidth = $('#wrapper').width();
  var wrapperHeight = $('#wrapper').height();
  $(this).animate({
    width: wrapperWidth,
    height: wrapperHeight,
    borderRadius: 0
  }, 500);
});

});
#wrapper{
  width: 300px;
  height: 300px;  
  background-color: lightgrey;
}

#circle{
  position: absolute;
  width: 45px;  
  height: 45px;
  background-color: green;  
  border-radius: 50%;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  
  <div id="circle"></div>
  
  
</div>

Answer №3

Here are some clever tricks for your coding puzzle (wow!)

see the code below

function clicker(e){
 //console.log(e.target.tagName);
  var width=window.getComputedStyle(e.target,null)||e.target.currentStyle;
  if(e.target.tagName=='DIV'){
   if(width.borderBottomLeftRadius!='0px'){
  e.target.style='width:100%;height:100%;border-radius:0px;'; 
  e.target.children[0].style='opacity: 1;bottom: 100px;line-height: -20px;';
}
  else{
     e.target.style='width:95%;height:95%;border-radius:100px';
       e.target.children[0].style='opacity: 1;bottom: 0px;line-height: 0px;';
  }
  } //endif
 
}
function add(x){
  document.getElementsByClassName('ObjectContainer')[x].addEventListener('click',clicker,true)
}
for(i=0;i<document.getElementsByClassName('ObjectContainer').length;++i){
  add(i);
}
/* setting up the basic layout of the page */
    body {
            text-align:center;
            font-family:helvetica;
            font-size: 16px;
            background: #f0f0f0;
            padding-top: 50px;
    }
            a {
                    color: #f0f0f0;
                    text-decoration: none;
            }
    .container {
            display: inline-block;
            margin: 0 auto;
            width: 400px;
    }
    /* ANIMATIONS */
    .Object, .ObjectContainer a, .test {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition:  0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
    }
    .ObjectContainer {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
            position: relative;
overflow:hidden;
    }
    
            .ObjectContainer a {
                    position: absolute;
                    bottom: -200px;
                    left: 0;
                    width: 100%;
                    line-height: 0px;
                    text-align: center;
                    vertical-align: middle;
            }

    .ObjectContainer .Object  {
      
            margin: 2.5%;
            height: 95%;
            width: 95%;
            border-radius: 100px;
            /* -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
            -o-transform: rotate(100deg);
            transform: rotate(100deg); */
    }

    #red.Object {
            background: #e7222f;
    }
    #brown.Object {
            background: #796959;
    }
    #dGrey.Object {
            background: #363635;
    }
    #Grey.Object {
            background: #6f6f6e;
    }
<div class="container">

    <div class="ObjectContainer">
            <div id="red" class="Object"> <a href="#" >A link </a></div>
           
    </div>
    
    <div class="ObjectContainer">
            <div id="brown" class="Object"> <a href="#" >A link </a></div>
           
    </div>

    <div class="ObjectContainer">
            <div id="dGrey" class="Object"> <a href="#" >A link </a></div>
           
    </div>

    <div class="ObjectContainer">
            <div id="Grey" class="Object"> <a href="#" >A link </a></div>
           
    </div>
</div>

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

Trouble with minification in Sencha cmd 5

I've been attempting to compress a Sencha 5 project using Sencha CMD, but I keep experiencing failures. sencha generate app -ext demoApp ./demoApp Then, in an effort to compress the application, I entered the following command: sencha app build ...

Using Single Quotes as Parameters in JavaScript

I'm currently facing an issue with a function that is designed to populate a field in the parent window when clicked. Specifically, it is meant to fill in a text field with a name. The challenge I am encountering arises when the field contains a sing ...

Finding documents in MongoDB where the size of an array exceeds 1

Looking to retrieve documents with an array size greater than 1 in my MongoDB collection Here is a snapshot of my collection: { "_id" : ObjectId("5eaaeedd00101108e1123452"), "type" : ["admin","teacher" ...

Upon clicking a table row, generate a div underneath containing mapped data

My dynamic table is currently being filled with rows based on an array, but I want to display more data in an expanded view when a button in a row is clicked. However, I'm facing challenges as it seems I can't have two table rows within the same ...

Tips for streamlining the array filtering process

Is there a way to simplify the code to avoid repetitive use of lowercase and includes condition for each property? items() { return this.table.filter.keyword ? this.dataArray.filter( item => item.nombre.toLowerCase().includes(t ...

Tips for achieving vertically centered text wrapping around a floating image

Describing it in words is proving to be difficult, so let me just illustrate it for you. In the following images, the horizontal lines represent the "text", the small box symbolizes the image, and the larger box encompasses the entire webpage. My goal is ...

The gaps separating rows

I'm struggling with getting my divs to look like a table, especially when it comes to highlighting a selected row. I've tried adjusting padding and margins without success. Does anyone have any suggestions on how I can achieve this effect? .ta ...

Connecting Vue.JS page to my existing HTML page: A step-by-step guide

While developing my website, I faced a challenge with the structure. The home page was built using traditional HTML/CSS, while the other pages were created in Vue.js. Is there a method to connect these two different types of files? For instance, can I inc ...

Guide to continuously play the animation, Version 2

I have been struggling with an animation that I need to loop indefinitely. The problem arises when trying to use animation-iteration-count: infinite. It seems like no matter where I place it in the code, whether within the keyframes or normal CSS rules, it ...

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

Automatically scraping Facebook API data with PHP

I'm completely new to php and I am looking for a way to automatically scrape metadata. I came across a solution, but I am unsure how to implement it in php. POST /?id={object-instance-id or object-url}&scrape=true Can anyone provide a sample php ...

Techniques for implementing a PHP base_url() function in a JavaScript file

I need to pass base_url from the Book Controller to the book.js file This is the function within book.js function loadPage(page, pageElement) { // Create an image element var img = $('<img />'); img.mousedown(function(e) { ...

Is there a way in javascript, jquery, and plupload to dynamically pass a parameter to the URL without needing to reload the page or object?

I've recently taken over a project that utilizes plupload. I am encountering an issue where I need to change the URL of the object after it has been loaded. However, I'm unsure if this is possible and what steps I would need to take to achieve th ...

The issue of basic authentication failing to function on Internet Explorer and Chrome, yet operating successfully on Firefox

Here is how my authentication code looks: public class BasicAuthenticationMessageHandler : DelegatingHandler { private const string BasicAuthResponseHeader = "WWW-Authenticate"; private const string BasicAuthResponseHeaderValue = "Basi ...

Listening for events to wait for all XMLHttpRequest requests within an iframe

I have a basic HTML page that includes an iframe element <html> <head> $('#page-wrapper').ajaxStop(function() { console.log("Page Fully Loaded." ); }); </head> <body> <h3>Demo Page<h3> <iframe id= ...

Simultaneously activate the 'onClick' and 'onClientClick' events on an ASP button using JavaScript

I have encountered an ASP button while working on existing code that has both onClick and onClientClick events attached to it. My goal is to trigger both events by generating a click event from an external Javascript file. The line of code I am using for ...

Click on each item within the v-for loop to gather relevant information, and subsequently iterate through the collected data

Within a v-for loop, I have implemented a button that, when clicked, retrieves specific data. The objective is to display this data below or in place of the clicked button. <div v-for="(item, index) in items" :key="index"> <button @click="fetch ...

What could be causing SVG to not render in a NEXTJS project upon deployment on Vercel?

Recently, I created a standout single-page nextJS application that was beautifully styled with Tailwind CSS. One interesting feature I added was incorporating the background of a component called SectionWrapper as an svg file. To achieve this, I crafted a ...

Troubleshooting Block-scoped errors on Heroku using Node.js and Express

Currently, I am working with node.js and express on the Heroku platform. While working on the route file, I encountered an issue when using the let keyword. The error message displayed was: SyntaxError: Block-scoped declarations (let, const, function, cla ...

What methods can be utilized to accurately determine a user's online status without continuously sending AJAX requests to the server through setInterval?

Seeking effective methods to determine a user's online status I am currently employing an inefficient technique to address this issue: I continuously send AJAX requests to the server at set intervals using setInterval, allowing the server to gauge th ...