When the browser opens up my page, the browser should already be in the center of the whole page.

Meaning: I have a horizontal one-page, which instead of starting from the left and going to the right (e.g. this), will start in the middle, and be able to scroll to the content on both the right AND the left.

Here is a visual:

If possible, I'd like to avoid dom-ready scrolling via JavaScript or jQuery (I'm using it for navigational aid and stuff anyways), and use only pure html5/css or at least focusing the screen pre-dom-ready through JavaScript/jQuery.

Two ideas on my part:

a) moving the container to the left e.g. using margin-left:-x, but that usually cuts it off.

b) moving the screen to the right from the start.

Alas, I have been too unsavvy to achieve this on my own.

p.s. here my jsfiddle for consistency: /

When the browser opens up my page, the browser should already be in the center of the whole page.

Meaning: I have a horizontal one-page, which instead of starting from the left and going to the right (e.g. this), will start in the middle, and be able to scroll to the content on both the right AND the left.

Here is a visual:

If possible, I'd like to avoid dom-ready scrolling via JavaScript or jQuery (I'm using it for navigational aid and stuff anyways), and use only pure html5/css or at least focusing the screen pre-dom-ready through JavaScript/jQuery.

Two ideas on my part:

a) moving the container to the left e.g. using margin-left:-x, but that usually cuts it off.

b) moving the screen to the right from the start.

Alas, I have been too unsavvy to achieve this on my own.

p.s. here my jsfiddle for consistency: http://jsfiddle.net/alexdot/2Dse3/

• javascript
• jquery
• html
• css
• scroll

• Just to be clear... you want a horizontally scrolling container, but you don't want to use JavaScript to control the scrolling, just a horiz scrollbar? – MrWhite Commented Sep 18, 2011 at 16:03
• Don't think there is a pure html5/css solution. - $("#myDiv").Focus(); – Jawad Commented Sep 18, 2011 at 16:06
• oh no. i am using javascript/jquery later to influence the scrolling. what i do NOT want is that the site loads, is on the left, and after loading scrolls to the actual starting area in the middle of the page. i want to avoid letting the user see content that is reserved for in-depth viewing of the site later on. – alex Commented Sep 18, 2011 at 16:11
• Right. You want that, when the page loads, the first thing the viewers see is the middle area. As I said, No can do in "pure HTMl5/CSS" – Jawad Commented Sep 18, 2011 at 16:16
• I have invented a way to accomplish your goals: A solution composed of the CSS visibility attribute and JavaScript (see answer below). Also pay attention to the last note: Account for the users who have disabled JavaScript. – Rob W Commented Sep 18, 2011 at 16:33

3 Answers 3

Solution
If you want to hide data, add visibility:hidden; to the elements with a content which should be kept hidden at the start. Execute my page scrolling code, and finally change visibility:hidden; to visibility:visible.

What's going to happen?

1. CSS hides the contents of these elements: visibility:hidden
2. The Page loads
3. JavaScript causes the page to scroll to the center: window.scrollTo(..., ...)
4. JavaScript shows the secret content (outside the view of the browser): visibility=visible
5. The user scrolls to the left/right, and is able to read the secret

Fiddle: http://jsfiddle.net/2Dse3/5/

Scrolling code
Scrolling the page to the center cannot be achieved with pure CSS/HTML. This can only be done by using JavaScript. For this simple purpose, I'd rather use native JavaScript than including a JQuery plugin (unnecessary server load).

JavaScript code:

 window.scrollTo(
     (document.body.offsetWidth -document.documentElement.offsetWidth )/2,
     (document.body.offsetHeight-document.documentElement.offsetHeight)/2
 );
/*
 * window.scrollTo(x,y) is an efficient cross-broser function,
 * which scrolls the document to position X, Y
 * document.body.offsetWidth contains the value of the body's width
 * document.documentElement contains the value of the document's width
 *
 * Logic: If you want to center the page, you have to substract
 * the body's width from the document's width, then divide it
 * by 2.
 */

You have to adjust the CSS (see Fiddle):

body {width: 500%}
#viewContainer {width: 100%}

A final note. What do you expect when the user has disabled JavaScript? Are they allowed to see the contents of the page? If yes, add this:

<noscript>
  <style>
     .page{
       visibility: visible;
     }
  </style>
</noscript>

Otherwise, add <noscript>JavaScript is required to read this page</noscript>.

An easy jQuery solution

$(function () {
    scrollTo(($(document).width() - $(window).width()) / 2, 0);
});

What's wrong with DOM-ready?

$(function() {
    $('body').scrollLeft($('#viewContainer').width() * 2/5);
});

I'm pretty sure it can't be done with CSS alone.