[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Div centered vertically and horizontally

Posted on 2011-04-30
4
Medium Priority
?
172 Views
Last Modified: 2012-06-27
I need a way to centre a Div on a page both vertically and horizontally but also to reposition on resize or page scroll.

I found an example in JQuery which does what I need, however Id like to keep everything under the same language, so instead of changing all my Javascript t JQuery, Id prefer to find this in Javascript.

$(window).resize(function(){

	$('.className').css({
		position:'absolute',
		left: ($(window).width() - $('.className').outerWidth())/2,
		top: ($(window).height() - $('.className').outerHeight())/2
	});

});

// To initially run the function:
$(window).resize();

Open in new window


http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/


Any ideas, or suggestions for a Javascript version?
0
Comment
Question by:tonelm54
  • 2
  • 2
4 Comments
 
LVL 20

Expert Comment

by:Proculopsis
ID: 35496990

CSS should do it for you:

<style>
#centered { position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; width: 100px; height: 100px; border: 1px dashed red; }
</style>

<div id="centered"></div>
0
 

Author Comment

by:tonelm54
ID: 35496999
The problem is that wont reposition when the screen is resized.

Ive tried to make my own code, but doesnt seem to work, hopefully its easy to understand.

<html>
    <head">
        <title></title>

        <script language="Javascript">
            document.body.onresize = onWindResize();

            function onWindResize() {
                document.getElementById('rePostitionDiv').offsetLeft = screen.width - document.getElementById('rePostitionDiv').style("width") / 2;
                document.getElementById('rePostitionDiv').offsetTop = screen.height - document.getElementById('rePostitionDiv').style("height") / 2;
            }

            //Call it now
            onWindResize();
        </script>
    </head>
    <body>
        <div id="rePostitionDiv" style="width:200px; height:200px; background-color:Aqua;">
        </div>
    </body>
</html>

Open in new window

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 2000 total points
ID: 35497145

//Try this:

window.onload = onWindowResize;
window.onresize = onWindowResize;

function onWindowResize() {
  var element = document.getElementById('rePostitionDiv');
  element.style.position = "absolute";
  element.style.left = ( screen.availWidth - element.clientWidth ) / 2;
  element.style.top = ( screen.availHeight - element.clientHeight ) / 2;
}

0
 

Author Comment

by:tonelm54
ID: 35497538
It doesnt re-position when the window is resized :-(
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

834 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question