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).

Était-ce utile?

La 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/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top