Hey there, I'm facing an issue with aligning an alert horizontally when a user clicks a button. I've been trying different methods but can't seem to get it right. The goal is to keep the alert within #main. You can check out this fiddle for reference.
Thanks in advance!
Ensure that the #main element has a CSS property of position set to something other than static. Then, apply these rules to the alert:
position: absolute;
left: 50%;
top: 50%;
margin-left: -width;
margin-top: -height;
Remember to substitute width and height with their correct values.
After @Darkwater suggested a CSS solution, I developed a jQuery plugin that still utilizes CSS for quick reuse on multiple objects.
To create a new method in jQuery called center:
$.fn.center = function() {
this.css("position","absolute").css("z-index","5000")
.css("top","50%").css("left","50%")
.css("margin",(-(this.height()/2))+"px 0 0 "+(-(this.width()/2))+"px");
return this;
};
Simply bind it to your object (such as your alert div#message) right after the .show() method:
$("#message").show().center();
This will center the div both vertically and horizontally.
NOTE: Remember to call the center() method immediately after the show() or any similar method that displays the element on the DOM, as jQuery may not handle hidden elements properly.
Your code structure and CSS positioning need some adjustments. Instead of using position: fixed;, consider using position: relative; for #main and position: absolute; for #message. Also, make sure to shift your message div within #main div.
When centering a div, remember to calculate the value for top: value (-)minus height of the div to achieve vertical center alignment.
#message{
visibility: hidden;
position: absolute;
top: 50%;
text-align: center;
}
I recently completed a website using both materializecss and bootstrap platforms. While I know this may not be the best practice, it worked for my needs. However, I am facing an issue with the mobile view. When I reduce the viewport size, a margin appear ...
I am in the process of developing a material dialog to collect user location information using AGM (angular google maps). I have successfully implemented a map on my main page, but when the dialog is opened, it only shows a blank space instead of the map. ...
Is it possible to pass a parameter from PHP into a JavaScript function within HTML? I am currently facing an issue where my code crashes when it reaches a certain condition. This is the code snippet causing the problem: $str="<input type='submit&a ...
I'm working on a simple HTML/CSS code featuring a container with two adjustable slots, controlled by a handler in the middle to modify the space each slot occupies. The first slot contains a table with fixed columns, automatic columns, and limited col ...
I am new to CSS animation and I am trying to create a circle that moves from one end to the other on hover. However, I am facing an issue where the circle goes off-screen when the browser size is changed. How can I make it stop at a certain point within th ...
My header on my website is all messed up with the links appearing incorrectly. I suspect it's an issue with style.css, so I attempted to modify the style.css file but had no luck. I have very limited experience with .css and cannot seem to figure out ...
I've created HTML pages with tables that have multiple columns, but I'm experiencing an issue. The columns are not resizable until I refresh the page. Could someone assist me in fixing this problem and explaining why it's happening? ...
Can someone help me with using the class tag on paragraph tags? I am trying to style a specific paragraph from an external CSS file without affecting all other paragraphs. I've searched online and learned that by adding <p class="somename" >, I ...
I'm currently utilizing a form builder from jqueryform.com to construct a registration form. My goal is to have each registered user assigned with a unique account number, which will be a randomly generated 6-digit number. Additionally, I want the pro ...
I apologize for asking the same question again, but I'm really struggling with this seemingly easy (or difficult?) code problem. Despite trying out Rory McCrossan's solution from here, it still doesn't seem to work for me. Can someone please ...
I'm attempting to create an empty grid using angularJS, but I've only been working with it for 2 days so I'm not very experienced. This is what I have come up with so far: <!doctype html> <html ng-app> <head> < ...
I am trying to implement the following CSS: .sky:focus {border-radius: 25px; border: #000 solid 1px; outline: none} And my HTML looks like this: <a class='sky' href='#'><img src='cloud.jpg'></a> I want a 25 ...
Our current challenge involves accessing dynamically generated HTML elements using JavaScript, particularly when trying to extract image URLs from these elements. When the HTML elements are generated solely through JavaScript, extracting the URL is straigh ...
My code snippet is as follows: import bs4 as bs from urllib.request import urlopen page = urlopen("https://www.netimoveis.com/locacao/minas-gerais/belo-horizonte/bairros/santo-antonio/apartamento/#1/").read() soup = bs.BeautifulSoup(page, "lxml") div_l ...
Having trouble with CSS. I would like to make this form symmetrical. Buttons should be in one column, textfields in another, and the question mark should also have its own column. Apologies if the ticket structure is not perfect, this is only my second on ...
How can I highlight the active tabs and shift it when clicking on another link? $(function() { $('.nav ul li').on('click', function() { $(this).parent().find('li.active').removeClass('active'); $(this).a ...
<table class="table table-striped table-bordered bootstrap-datatable datatable"> <thead> <tr> <th></th> <th>Business Name</th> <th>Commencement Da ...
I am encountering an issue with ion-nav-view. Whenever I try to use it, the emulator displays a black screen, but it works perfectly fine in ionic serve. I suspect it may be a syntax error causing this problem. Interestingly, when I create a blank projec ...
It seems like most of my Angular questions are just me overlooking something really silly, so let's hope that's the case here too. Currently, I am working on a directive to manage the scrolling of a wide list of thumbnails. While it was working ...
Can Assemble.io be used to compile json files into HTML using templates? If so, how can I configure my gruntfile to accomplish this? Overview of My Folder Structure: Data productlist1.json productlist2.json productlist3.json productdetail1.json product ...