Trouble aligning text in circles and fadeToggle not functioning correctly

Question

Trouble aligning text in circles and fadeToggle not functioning correctly

Hello StackOverflow community! This is my first time posting here, so please excuse any mistakes I may have made while asking my question. :)

[Issue 1]

I've been trying to center text inside circles by referring to the following posts:

Center text and container inside a circle
SVG center text in circle

Unfortunately, I haven't been able to find a solution. My goal is to position the text in the middle of the circle, both horizontally and vertically.

[Issue 2]

When I click on the "test" button, hidden circles appear. However, clicking the button again does not make the circles disappear.

I would really appreciate any advice or guidance on how to resolve these issues! :)

Problem Resolved!

This question isn't a duplicate. I was specifically looking to center text using translate() and got confused between "fadeToggle()" and ":hidden with fadeIn()".

$(document).ready(function() {
  $('#test').click(function() {
    $(".options:hidden").fadeToggle();
  });
});

// CSS code goes here...

// HTML structure and script includes...

javascript jquery html css

Answer 1

Answer №1

Include the following CSS code

top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);

within the .options span selector to centrally align the text, addressing issue 1.

Omit :hidden from the jQuery function statement to resolve problem 2.

$(document).ready(function() {
  $('#test').click(function() {
    $(".options").fadeToggle();
  });
});

body {
  font-family: 'Poor Story', sans-serif;
}

#test {
  cursor: pointer;
  display: block;
  text-align: center;
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.options {
  background: #f7f7f5;
  display: none;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  width: ... (Text too long for this example) …{
  </footer>

  </html>

Answer 2

Include the following CSS code

top: 50%; 
left: 50%; 
transform: translateX(-50%) translateY(-50%);

within the .options span selector to centrally align the text, addressing issue 1.

Omit :hidden from the jQuery function statement to resolve problem 2.

$(document).ready(function() {
  $('#test').click(function() {
    $(".options").fadeToggle();
  });
});

body {
  font-family: 'Poor Story', sans-serif;
}

#test {
  cursor: pointer;
  display: block;
  text-align: center;
  position: absolute;
  display: flex;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.options {
  background: #f7f7f5;
  display: none;
  text-align: center;
  vertical-align: middle;
  position: absolute;
  width: ... (Text too long for this example) …{
  </footer>

  </html>

Answer 3

Answer №2

$(document).ready(function() {
$('#test').click(function(){
$(".options").fadeToggle();
});
});

body{
  font-family: 'Poor Story', sans-serif;
}

#test{
   cursor: pointer;
   display: block;
   text-align: center;
   position: absolute;
   display: flex;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}
.options {
    background: #f7f7f5;
    display: table;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%; 
    border-radius: 50%;
    border-style: solid;
    border-color: #F3C78D;
    width: 60px;
    height: 60px;
    font-size: 12px;
}

.options span {
    display: table-cell;
    color: #000000;
    vertical-align: middle;   
}

#option1{
    transform: translate(-100%, -150%);
}

#option2{
    transform: translate(-160%, -40%);
}

#option3{
    transform: translate(-50%, 50%);
}

#option4{
    transform: translate(60%, -40%);
}

#option5{
    transform: translate(15%, -150%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 4.1.x -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">

</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" id="option1"><span>Hello<br>World</span></div>
    <div class="options" id="option2"><span>Goodbye</span></div>
    <div class="options" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" id="option4"><span>Fine</span></div>
    <div class="options" id="option5"><span>Okay</span></div>
  </div>
</body>
<footer>
  <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  <script type="text/javascript" src="index.js"></script>
</footer>
</html>

Answer 4

$(document).ready(function() {
$('#test').click(function(){
$(".options").fadeToggle();
});
});

body{
  font-family: 'Poor Story', sans-serif;
}

#test{
   cursor: pointer;
   display: block;
   text-align: center;
   position: absolute;
   display: flex;
   left: 50%;
   top: 50%; 
   transform: translate(-50%, -50%);
}
.options {
    background: #f7f7f5;
    display: table;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    width: 100%;
    left: 50%;
    top: 50%; 
    border-radius: 50%;
    border-style: solid;
    border-color: #F3C78D;
    width: 60px;
    height: 60px;
    font-size: 12px;
}

.options span {
    display: table-cell;
    color: #000000;
    vertical-align: middle;   
}

#option1{
    transform: translate(-100%, -150%);
}

#option2{
    transform: translate(-160%, -40%);
}

#option3{
    transform: translate(-50%, 50%);
}

#option4{
    transform: translate(60%, -40%);
}

#option5{
    transform: translate(15%, -150%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 4.1.x -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Poor+Story" rel="stylesheet">

</head>
<body>
  <div class="container">
    <button type="button" class="btn btn-outline-success" id="test">test</button>
    <div class="options" id="option1"><span>Hello<br>World</span></div>
    <div class="options" id="option2"><span>Goodbye</span></div>
    <div class="options" id="option3"><span>How<br>are<br>you?</span></div>
    <div class="options" id="option4"><span>Fine</span></div>
    <div class="options" id="option5"><span>Okay</span></div>
  </div>
</body>
<footer>
  <!-- Bootstrap 4.0 : jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
  <script type="text/javascript" src="index.js"></script>
</footer>
</html>

Trouble aligning text in circles and fadeToggle not functioning correctly

[Issue 1]

[Issue 2]

Problem Resolved!

Answer №1

Answer №2

Similar questions

Tips on updating content at a specific time without the need to refresh the page

Ways to customize CSS styles for a single page?

Prevent the event from bubbling up on active elements

MERN stack: HTML is currently processing while React is failing to compile

Trouble uploading an audio blob as a base64 string using Google Drive API with the drive.files.create method - File ID could not be located

Conceal a different CSS class if a certain CSS class is present on the page

What is the best way to access the text content of a nested HTML element for automation tasks with Selenium or Protractor?

Tips for maintaining consistent webpage layout across various screen sizes

What is the process for converting the color names from Vuetify's material design into hexadecimal values within a Vue component?

Utilizing AngularJS to invoke an ng-controller within a nested controller structure

What is the best way to retrieve the outcome of a node-sqlite3 query beyond the scope of db.get()?

Scaling SVG Graphics in Real-Time

No content appears on the multi-form component in React

What could be causing the text alignment issue in the flexbox next to this image?

Why does the select element display the first item when it is bound to a model?

What is the best way to achieve a stylish Bootstrap modal design with a blurred and transparent header, as well as a left sidebar that seamlessly blends into

The Carousel created using only CSS and npm packages does not function properly when implemented in a ReactJS environment

Showcase a variety of random images in the navigation bar using Javascript and HTML

The data returned by $.jquery ajax appears as 'undefined' when displayed in json format

The video persists even after the modal is closed