Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Alert Box in CSS ... centered on screen

    What I'm doing is that when a form is submitted, if there are any errors or any instructions regarding a field, an alert box will pop up. Now this is very easy to do in Javascript but there you get a very ugly looking grey box.

    However, if we do a nicer looking box in CSS, the box shows up at a fixed position. We want it to show up in the middle of the "visible screen area" ... like the javascript alert does.

    I can't seem to find a way to have this pop up alert box appear in the middle of the screen that is visible. Any ideas?

    Or is there a way to integrate CSS and Javascript to get the grey alert box to look much better.

    All help is appreciated. Thanx!!!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    You can only center something in the center of the browser window, not on the users screen itself.
    To center an element horizontally you would use margin: auto; (specifically margin-left and margin-right must be auto) and to center vertically look here: http://www.student.oulu.fi/~laurirai/www/css/middle/

    I don't think there is a way to style the JavaScript popup because CSS can only style HTML and that is no HTML. Apart from that the popup is browser and operating system specific. In Opera it looks different than in IE and it's something completely different in Mac browsers because it emerges from the top of the browser window and stays attached to the top, not in the center.

  • #3
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    a way you can achieve this is through CSS and Javascript.

    Use javascript to get the available height and width of the page, then divide that by 2 which will get you the exact centre point of the screen.

    Once you got that its just a case of factoring in you DIV height and width to the formula.

    Here's an example of a script I use on most of my administration scripts found on http://www.paramiliar.com

    Code:
      		if( typeof( window.innerWidth ) == 'number' ) {
    			myWidth = window.innerWidth;
    			myHeight = window.innerHeight;
    		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    			myWidth = document.documentElement.clientWidth;
    			myHeight = document.documentElement.clientHeight;
    		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    			myWidth = document.body.clientWidth;
    			myHeight = document.body.clientHeight;
    		}
    		
    		divwidth = 250;
    		divheight = 300;
    
    		var x = (myWidth / 2) - (divwidth / 2);
    		var y = (myHeight / 2) - (divheight / 2);
    		
    		document.getElementById("alert_content_layer").style.left = parseInt(x)+'px';
    		document.getElementById("alert_content_layer").style.top = parseInt(y)+'px';
    This code works in Internet Explorer and Firefox, I beleive it works in all browsers but I never tested it.
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    VIPStephan .. Thanks! I'll check out the link.
    neomaximus2k - Thanks! I'll ask the programmer to look into the code you have given. Does it center in the center of the screen that is currently visible or the whole page (eg with 5 scrolls)?

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,639
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Quote Originally Posted by erum View Post
    Does it center in the center of the screen that is currently visible or the whole page (eg with 5 scrolls)?
    In the center of the current browser window.

  • #6
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    neomaximus2k: Thanks! Your technique worked. My programmer tweaked the code a bit and it works great in IE and Firefox. I will check it in Netscape as well though mostly Firefox and Netscape tend to behave similiarly. Opera, however, is a different story. But I'm sure with some tweaking, we will get that right, too.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •