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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts

    scroll to center of div

    Hello how can I make the page scroll to the horizontal center of div on page load? here's the code that I'm trying to work with. I need the * to be at center of browser window (regardless of browser/screen size)..

    ---------------
    -------*-------
    ---------------

    css:

    #test
    {
    position: absolute;
    width: 10000px;
    height: 500px;
    left: 0px;
    margin-left: 0px;
    top: 50%;
    margin-top: -250px;
    background: #000000
    no-repeat center center;
    }

    js:

    window.onload = function() {

    $('html, body').animate({scrollLeft: $("#test").offset().left}, 1000, "linear");

    }

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    This question is answered every other month. Learn to use the search function at the top of the page. I did.
    "vertical centering on page" brought up About 586 results (0.24 seconds)

    Here's one:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    
    <style type="text/css">
    #test {
    	width: 400px;
    	position: absolute;
    	left: 50%;
    	top: 50%;
    	margin-left: -200px; // THIS OFFSETS THE WIDTH
    	border: 2px solid #000;
    	padding: 10px;
    	border: 1px solid black;
    }
    </style>
    </head>
    
    <body>
    <div id="test">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent blandit venenatis purus.
    Integer massa libero, vehicula id, consequat sed, tincidunt nec, purus. Class aptent taciti
    sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti.
    Nunc vulputate magna non magna. Aenean lorem eros, adipiscing quis, semper non, dictum a,
     nunc.</p>
     <p>Curabitur ut sem. Pellentesque a est id neque hendrerit ultrices. Donec vulputate tincidunt
    turpis. Curabitur dignissim vestibulum nunc. Aliquam felis lorem, ultrices sit amet, convallis a,
    accumsan vel, ante. Proin aliquam turpis sed augue. In pellentesque, magna a pulvinar adipiscing,
    est orci adipiscing felis, sed laoreet urna magna quis neque. Proin facilisis aliquet urna.</p>
    </div>
    
    
    <script type="text/javascript">
    onload = function() {
    	var divh = document.getElementById('test').offsetHeight;
    	var divhalf = "-"+ divh/2;
    	document.getElementById('test').style.marginTop= divhalf + "px";
    }
    </script>
    </body>
    </html>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Hi unfortunately this is not centering the screen at the center of #test. This results in the center of #test being at the far left side of browser window. Just to clarify, I have a 3000px x 3000px div, and on load I need to automatically scroll, to where the center of the div (at point 1500px x 1500px) is exactly at center of browser window, regardless of window/screen size. Any other suggestion?

  • #4
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Quote Originally Posted by resin View Post
    Hi unfortunately this is not centering the screen at the center of #test. This results in the center of #test being at the far left side of browser window.
    What browsers are you using to view this and their ver numbers.
    FF, Chrome, IE have no problem with this.

    My question: why a 1500px x 1500px div? Are you making a game and this is the background image?

    Anyway, try this in CSS:
    Code:
    HTML{ 
    	width:100%; 
    	height:100%;
    	background: url('images/GreenDragon.jpg') center center no-repeat;
    	background-attachment: fixed;
    	background-size:100% auto;
    }
    Last edited by sunfighter; 01-05-2014 at 04:43 PM.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #5
    Regular Coder
    Join Date
    Nov 2011
    Posts
    154
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Ok I setup a sample page to show you what I'm working with. The way it is now, you'll notice the page scrolls to where the center of #test2 aligns at far left side of browser window. I need the page to scroll instead so that the point where the two red lines intersect is exactly at the center of browser window (regardless of browser window size). How do I do this?

    http://resin.webs.com/test.htm

    And yes this should behave somewhat like the old side scroller games, in that the main bg image is meant to be larger than the viewport, and is meant to be scrolled along (left to right & right to left). Any ideas?

  • #6
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    Sorry, I can't do it. I did it for html background image, but not for a div.

    Why do you want this, maybe there is an easier way to achieve what you want?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #7
    New Coder
    Join Date
    Nov 2013
    Location
    UK
    Posts
    42
    Thanks
    6
    Thanked 1 Time in 1 Post
    Hi
    I played a little with your code, and came up with a thingy....it seems to work for me, maybe it will give you an idea....

    try to put in your function:
    Code:
    window.onload = function() {
    hg=window.innerWidth/2;
    $('html, body').animate({scrollLeft: $("#test2").offset().left-hg}, 3000, "easeOutBounce")
    }
    Let me know if I'm talking nonsense.


    www.windows-addict.com
    Last edited by oceansoul1976; 01-07-2014 at 02:52 PM.

  • #8
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,297
    Thanks
    23
    Thanked 612 Times in 611 Posts
    post 4
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #9
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there resin,

    here is my take on your problem...
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>go to the very center</title>
    
    <style>
    body{
        margin:0; 
     }
    #test1 {
        width:6000px;
        height:1500px;
        background-image:url(http://resin.webs.com/test.png);
     }
    </style>
    
    <script>
    (function() {
       'use strict';
        var obj,h,w;
    
    function init(){
        obj=document.getElementById('test1');
        h=obj.offsetHeight;
        w=obj.offsetWidth;
        goToCenter();
     }
    
    window.onresize=function() {
        goToCenter();
     }
    
    window.onscroll=function() {
       obj.style.margin='auto';
     }
    
    function goToCenter() {
       obj.style.marginTop=(window.innerHeight-h)/2+'px';
       obj.style.marginLeft=(window.innerWidth-w)/2+'px';
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <div id="test1"></div>
    
    </body>
    </html>
    
    coothead
    Last edited by coothead; 01-07-2014 at 08:54 PM.

  • #10
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there resin,

    try this slightly modified version....
    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>go to the very center</title>
    
    <style>
    body{
        margin:0; 
     }
    #test1 {
        width:6000px;
        height:1500px;
        background-image:url(http://resin.webs.com/test.png);
     }
    
    </style>
    
    <script>
    (function() {
       'use strict';
        var obj,h,w;
    
    function init(){
        obj=document.getElementById('test1');
        h=obj.offsetHeight;
        w=obj.offsetWidth;
        window.scrollTo(0,0);
        goToCenter();
     }
    
    window.onresize=function() {
        window.scrollTo(0,0);
        goToCenter();
     }
    
    function goToCenter() {
        obj.style.marginTop=(window.innerHeight-h)/2+'px';
        obj.style.marginLeft=(window.innerWidth-w)/2+'px';
     }
        window.addEventListener?
        window.addEventListener('load',init,false):
        window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <div id="test1"></div>
    
    </body>
    </html>
    
    ...which, hopefully, cures the problem.
    coothead
    Last edited by coothead; 01-07-2014 at 10:44 PM. Reason: added window.scrollTo(0,0); to init()

  • #11
    New Coder
    Join Date
    Nov 2013
    Location
    UK
    Posts
    42
    Thanks
    6
    Thanked 1 Time in 1 Post
    Hi
    Glad it helped Again, I'm not even close to be not even a mediocre coder, but I am an analyst, so what I'm doing is analizing the problems and finding a way to do it; it comes a little harder to put it in a "beautiful" code.

    As for your problem, there's a solution I used when I was centering and resizing an image in the middle of the page (see my thread, if you'd like !), and, in your case, could be something like:

    Code:
    <script>
    function resizing() {
    hg=window.innerWidth/2;
    vg=window.innerHeight/2    // resizing means page height changes as well
    $('html, body').scrollLeft($("#test2").offset().left-hg,("#test2").offset().top-vg) 
    }
    window.onresize="resizing()"
    <script>
    Like this it will recalculate every time you're resizing, and it will move it fast, without animation.


    And yes, is exactly what coothead said
    All the best,
    Dorin



    www.windows-addict.com
    Last edited by oceansoul1976; 01-08-2014 at 01:58 AM.

  • #12
    New Coder
    Join Date
    Nov 2013
    Location
    UK
    Posts
    42
    Thanks
    6
    Thanked 1 Time in 1 Post
    You're welcome.


  •  

    Posting Permissions

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