What is the best way to increase the size of this circle so that it completely fills the screen

Question

What is the best way to increase the size of this circle so that it completely fills the screen

Currently working on a project involving HTML and CSS, I am faced with the challenge of expanding a circle to fill the entire screen. The unique structure of the design requires the circle to be positioned in a specific location as it is an integral part of the logo.

Here is what I envision for the final result:

http://jsfiddle.net/frapporti/85qfu/

Code

However, this is the current state of the project:

https://jsfiddle.net/IaZoro/ou9vwovr/

Code

The objective is to have the red dot expand to cover the entire screen, overlayed with a CSS slideshow, with an "x" button at the top right corner to close or hide everything.

If possible, I would prefer to achieve this effect using only CSS, but I am open to incorporating Javascript/jQuery if necessary. Any assistance provided would be greatly appreciated. Thank you!

EDIT: I discovered that the issue with my JavaScript code was due to using jQuery instead of Zepto.js as utilized in the referenced demo above.

Although still encountering difficulties, I thought it was important to mention this development.

javascript jquery html css

Answer 1

Answer №1

It seems like I have grasped your request correctly. Allow me to present a clear solution for you:

Here is the HTML structure:

<body>
    <div id="main-wrapper">
        <div id="inner-wrapper">
            <div id="close-box"></div>
            <div id="slideshow-wrapper">
                <img class="shown" src="http://i.imgur.com/XeBydh2.png" />        
                <img src="http://i.imgur.com/xy1Aqbn.jpg" />       
                <img src="http://i.imgur.com/i7elQhu.jpg" />
            </div>
        </div>
    </div>
</body>

And here is the CSS styling:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

/* Additional CSS classes and styles are applied below */
#main-wrapper {
  background: red;
  border-radius: 50%;
  overflow: hidden;
  height: 100px;
  width: 100px;
  transition: all .5s;
  position: absolute;
  top: 50%;
  left: 50%;
}

#inner-wrapper {
  margin: 30px;
  border: 1px solid;
  position: relative;
  display: none;
}

#close-box {
  background-color: black;
  border: 2px solid white;
  position: absolute;
  top: -10px;
  right: -10px;
  height: 30px;
  width: 30px;
}

#slideshow-wrapper img {
  display: none;
}

#slideshow-wrapper img.shown {
  display: block;
}

#main-wrapper.shown {
  top: 0;
  left: 0;
  width: 100%; 
  /* Adjusted styles applied accordingly */
}

#main-wrapper.shown #inner-wrapper {
  display: block;
}

Lastly, we include some JavaScript functionality:

$(function() {
    $('#main-wrapper').click(function() {
        $(this).toggleClass( 'shown' ); 
    });
    
    $('#close-box').click(function(){
        $('#main-wrapper').removeClass('shown');
    });

    $('#inner-wrapper').click(function(e){
        e.stopPropagation(); 
    });

    $('#slideshow-wrapper').click(function(){
        var current = $(this).children('.shown');
        current.removeClass('shown'); 

        var next = current.next();
        if(next.length < 1) 
            next = $(this).children().eq(0);
        next.addClass('shown'); 
    });
});

Remember to ensure jQuery is properly loaded in your project!

Answer 2

It seems like I have grasped your request correctly. Allow me to present a clear solution for you:

Here is the HTML structure:

<body>
    <div id="main-wrapper">
        <div id="inner-wrapper">
            <div id="close-box"></div>
            <div id="slideshow-wrapper">
                <img class="shown" src="http://i.imgur.com/XeBydh2.png" />        
                <img src="http://i.imgur.com/xy1Aqbn.jpg" />       
                <img src="http://i.imgur.com/i7elQhu.jpg" />
            </div>
        </div>
    </div>
</body>

And here is the CSS styling:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img {
  max-width: 100%;
}

/* Additional CSS classes and styles are applied below */
#main-wrapper {
  background: red;
  border-radius: 50%;
  overflow: hidden;
  height: 100px;
  width: 100px;
  transition: all .5s;
  position: absolute;
  top: 50%;
  left: 50%;
}

#inner-wrapper {
  margin: 30px;
  border: 1px solid;
  position: relative;
  display: none;
}

#close-box {
  background-color: black;
  border: 2px solid white;
  position: absolute;
  top: -10px;
  right: -10px;
  height: 30px;
  width: 30px;
}

#slideshow-wrapper img {
  display: none;
}

#slideshow-wrapper img.shown {
  display: block;
}

#main-wrapper.shown {
  top: 0;
  left: 0;
  width: 100%; 
  /* Adjusted styles applied accordingly */
}

#main-wrapper.shown #inner-wrapper {
  display: block;
}

Lastly, we include some JavaScript functionality:

$(function() {
    $('#main-wrapper').click(function() {
        $(this).toggleClass( 'shown' ); 
    });
    
    $('#close-box').click(function(){
        $('#main-wrapper').removeClass('shown');
    });

    $('#inner-wrapper').click(function(e){
        e.stopPropagation(); 
    });

    $('#slideshow-wrapper').click(function(){
        var current = $(this).children('.shown');
        current.removeClass('shown'); 

        var next = current.next();
        if(next.length < 1) 
            next = $(this).children().eq(0);
        next.addClass('shown'); 
    });
});

Remember to ensure jQuery is properly loaded in your project!

What is the best way to increase the size of this circle so that it completely fills the screen

Answer №1

Similar questions

What is the process for sending a post request in the inline editor of Dialogflow?

The consistent index is shared among all dynamically generated elements

Jumping over loop iteration following a JavaScript catch block

Is it possible to authenticate a user in Firebase using Node.js without utilizing the client side?

jQuery causing issues with CORS configurations

What is the proper way to send parameters to the controller using $routeProvider?

What is the best way to insert shapes in between pictures?

Is there a way to retrieve the `this.$route` data while using vue-apollo?

Troubleshooting HTML image visibility issues

Attaching an event handler to $(document) within an Angular directive

Issue: This error occurs when attempting to double click on the diagram or a node but the show function for c is not recognized

What is the best way to implement an onclick method on a div in order to toggle the display of information

Generate a PDF file using a byte array and save it for download

"Using an empty array before each statement in jQuery Ajax to handle JSON data

Gravity Forms Dropdown Selections Aren't Visible

Dealing with ETIMEDOUT error in Express.js

Struggling to retrieve integer values from a JSON object array

What is the best way to select or deselect all asp.net checkboxes with just one checkbox event?

"Exploring the wonders of a jQuery plugin within the

Unlock the potential of localstorage in dropdown toggle menus with jQuery and HTML