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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Viewport Positioning to CSS

    Hello coding forums community. I'm very new to JavaScript and web development in general so please forgive the newbie question. I am attempting to position a div within a webpage relative to the viewport. Each time I try to set the margins with percentages (as I want the div to constantly be in the center of the page regardless of content) the div in css becomes relative to the width of the body on my screen which is larger than the height (as is the case in many screens). I tried to work around this in JavaScript but on quick resizing there is lag on element repositioning.

    To put it most concisely my ultimate goal is to make a div center vertically relative to the viewport visible to the user (meaning minus padding, margins any other junk). With this the div will then have a static width that will resize via media queries and will have margins horizontally on auto. I would like to do this all in CSS if possible or worst-case scenario be able to do this without lag in JavaScript.

    Here is my code: CodePen - Pen
    For some reason the script is not working in the above example but if you run it within your own browser it will show at the bottom of the screen as I calculated.
    Any advice, suggestions, or resources would be greatly appreciated. Thank you.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,623
    Thanks
    0
    Thanked 645 Times in 635 Posts
    You don't need JavaScript to position a block that is vertically centred.

    The following CSS will centre the content vertically if contained within <div id="tbl"><div id="cell"> and </div></div> without needing to set any vertical padding or margins.


    Code:
    body, html {height: 100%;}
    #tbl[id] {display: table; height: 100%;}
    #cell[id] {display: table-cell; vertical-align: middle;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Jun 2014
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for the response.
    Incredible how it centers vertically and I am able to control the table vertically relative to the screen but unfortunately this is still conflicting for me. The cell cannot have a background color of its own since it fills the table. This is important because inside this div I plan on having a header, navigation, and content div.
    Also I wrote the above incorrectly, I'm sorry, I meant to say I want to be able to position vertically the div relative to the visible viewport, something like 25%, then center it horizontally (I was thinking with automatic margins with a fixed size that will be changed with media queries). From here I wanted to set the width and height relative to the viewport. Once again sorry to basically rewrite a good chunk of my question here.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,300
    Thanks
    28
    Thanked 275 Times in 269 Posts
    Quote Originally Posted by typedeph View Post
    I want to be able to position vertically the div relative to the visible viewport, something like 25%, then center it horizontally (I was thinking with automatic margins with a fixed size that will be changed with media queries). From here I wanted to set the width and height relative to the viewport. Once again sorry to basically rewrite a good chunk of my question here.
    Well, here's one method:

    Code:
    <!doctype html>
    <html lang="en">
    	<head>
    		<meta charset="utf-8">
    		<title>HTML Demo</title>
    		<style>
    			* { margin: 0; }
    			section { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; height: 50%; min-height: 9rem /* estimated height of a single‐line paragraph (since there’s no line height unit) */; overflow: auto; margin: auto 1rem; border: 1rem double forestgreen; border-radius: 1rem; padding: 0 1rem; background-color: beige; color: black; }
    			p { margin: 1rem 0; line-height: 1; font-size: 5rem; }
    		</style>
    	</head>
    	<body>
    		<section>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    			<p>Hello, world!</p>
    		</section>
    	</body>
    </html>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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