Viewport centring on large website

Question

Im trying to build a horizontal website which is at 16000px at the moment, using this template

http://tympanus.net/Tutorials/WebsiteScrolling/

the website has four sections 4000px wide each, I am trying to achieve a div that will be centred in the browsers viewport at each section.

Vertically, 50% works, but horizontally 50% would be 2000px into the page.

does anyone know anything that would work?

I have found a script for centring my #verycentre Div on the first page, it isnt 50% of 4000px, its of the browser window and looks great.

The problem I am having now is that I need a centred window div at each section anchor.

as the page scrolls across and hits each section, im trying to achieve a resizeable #verycentre Div for each section.

The code I am using at the moment is posted below and works perfectly for the first centred div in section 1.

I think the problem might be that the function call is made document.ready

and at that time there is only one #verycentred div in the window, but am not 100% sure.

how can I make all of the #verycentred Div's at each anchor point be centred/resieable?

thanks

why didn't you go for a jquery control instead of working with this horizontal? — Krish, Feb 22 '12 at 05:35

score 0 · Answer 1 · edited May 23 '17 at 12:27

0

It would be a problem to center it via CSS since your width offsets window area so what you could use is a JQuery function that will help you center that div based on window position

Take a look on this post, where they explain how to center a object based on window area display.

Using jQuery to center a DIV on the screen

edited May 23 '17 at 12:27

Community

1
1

answered Feb 22 '12 at 05:36

Paradise

470
2
11

I found a code for it, but am having problems in making one centred div in each 'section', only the first page works. I have posted the code below – joverbye Feb 23 '12 at 03:38
could you provide your code to us then only it will help us to found the exact issue. – Krish Feb 23 '12 at 04:56
your code is working you just need to add a relative position on your section class so each div with verycentre respects his parent which would be the container (section) `.section{ margin:0px; bottom:0px; width:4000px; float:left; height:100%; background-color:#96F; position:relative; }` – Paradise Feb 24 '12 at 23:10

score 0 · Answer 2 · answered Feb 22 '12 at 11:02

0

You can use negative left margin with set position:relative;

div{
 position:relative;
 left: 50%;
 margin-left: -2000px;
}

answered Feb 22 '12 at 11:02

Shawn Taylor

3,974
4
17
23

score 0 · Answer 3 · answered Feb 23 '12 at 03:58

<script type="text/javascript">
$(document).ready(function() {
function move_div() {
    window_width = $(window).width() ;
    window_height = $(window).height() ;    

    obj_width = $('#verycentre') .width() ;
    obj_height = $('#verycentre') .height() ;

    $('#verycentre').css('top', (window_height / 2) - (obj_height / 2)) .css('left',       (window_width /2) - obj_width / 2);
    }

    move_div() ;

$(window) .resize(function() {
move_div() ;

});

}) ;
</script>

Viewport centring on large website

3 Answers3