Horizontal scrolling layout LEFT/RIGHT: jQuery/CSS quiz

StackOverflow https://stackoverflow.com/questions/13683211

Question

It seems, that what I am trying to achieve is almost impossible.

I am trying to create a horizontal layout dependant on jQuery, but usable even with Javascript being turned off. I also want the cleanest code possible with its semantic value kept. So I guess I'm looking to the ultimate solution. :)

The most common horizontal layout on the web is this: http://www.queness.com/resources/html/scroll/horizontal.html - This would be perfect (it works even with JS being turned off). My problem is I need to make it work "both ways" (left and right with "starting" item in the middle).

The effect should be similar as this: http://steveandjacqs.com/ The website (and the coding backend) is great, but it is unusable without JS and the code is full of hacks.

My CSS: 

html,body { overflow: hidden; }
.wrapper { position: relative; width: 100%; height: 100%; } 
.wrapper-cont { position: relative; width: 500%; height: 100%; margin-left: -200%; }
#item-left { position: absolute: top: 0px; left: 0%; }
#item-home { position: absolute; top: 0px; left: 200%; }
#item-right{ position: absolute; top: 0px; left: 400%; }
#item-down { position: absolute; top: 200%; left: 0%; }

My HTML:

<body>
<nav><ul>
     <li><a href="#item-left">Left</a></li>
     <li><a href="#item-home">Home</a></li>
     <li><a href="#item-right">Right</a></li>
     <li><a href="#item-down">Down</a></li>
</ul></nav>
<div class="wrapper">
     <div class="wrapper-cont">
           <div id="item-left">Element outside viewport on the left side</div>
           <div id="item-home">Element on the center of viewport</div>
           <div id="item-right">Element outside viewport on the right side</div>
           <div id="item-down">Element on the center of viewport but down</div>
     </div>
</div>
</body>

My JAVASCRIPT will use some sort of smooth animation plugin (scrollTo maybe?) between the sections. Browser scrolling (at least vertical) should be disabled, the DIVs itselves should be scrollable.

///

Should I post screenshot of my website or is it understanble this way?

Thank you in advance!

PS: I am more or less jQuery copypasta, so go easy on me please. :)

UPDATE

What about modifying .htaccess to add internal link on entering the homepage: to rewrite "http://example.com" to "http://example.com#home"? Than I can code the layout "the common way" (such as in previous example from Queness).

Was it helpful?

Solution

You would need to follow the way the example site uses.

The problems in you current setup are

  • The menu is not inside the home element, so it does not scroll with it..
  • You have wrong dimensions/positions for each "page"

To auto-scroll to the #item-home on start, you could use 

<meta http-equiv="refresh" content="0;URL='#item-home'">

in the <head> section of your page

Demo including these corrections/additions at http://jsfiddle.net/gaby/QsQDK/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top