CODEWITHSUNDEEP
jquerycsslayoutwebhorizontal-scrolling
Feu follet
Feu follet

Reputation: 319

Centered horizontal web layout with animated scrolling effect

We built a centered horizontal web layout with animated scolling effect. We have 5 menu that use simple anchor to navigate between different pages. Since all the page is static except the body (content) zone, we simply target anchor within a specific DIV. So that ain't all the page that is sliding but only the content part. The researched effect is a fluid scrolling from one page to another. If we click on the first menu item and than the last one (5th) all the page slides one after another till the last one... and that's all fine up to now.

We took example code from other sites (some css parts) and the little jquery parts. But when we click on some menu, sometime it won't do anything, sometimes won't display the good slides and finally, won't slide on the good direction (will slide the opposite way) and we're stuck on this part.

HTML

<body>
    <div id="menu">
        <ul>
            <li><a href="#menu1">Page 1</a></li>
            <li><a href="#menu2">Page 2</a></li>
            <li><a href="#menu3">Page 3</a></li>
            <li><a href="#menu4">Page 4</a></li>
            <li><a href="#menu5">Page 5</a></li>
        </ul>
     </div>


    <div align="center" id="body">
      <div id="body_wrapper">
        <div class="body_content_content" id="menu1">menu1 page content</div>
        <div class="body_content_content" id="menu2">menu2 page content</div>
        <div class="body_content_content" id="menu3">menu3 page content</div>
        <div class="body_content_content" id="menu4">menu4 page content</div>
        <div class="body_content_content" id="menu5">menu5 page content</div>
      </div>
    </div>

</body>

CSS

#menu ul li {
 display:inline;   
}

#body {
  width:100%;
  height:200px;
  margin:auto;
  position:relative;
  border: 0px solid red;
  overflow:hidden;
  top:100px;
}

#body_wrapper {
  float:left;
  width:500%;
  padding:0;
  margin:0;
  height: 200px;
}

.body_content_content {
  float:left;
  width:20%;
  height:200px;
  #margin:10px 0;
  position:relative;
}

.body_content_content div:first {
  width:900px;
  padding:20px;
  margin:auto;
  float:none;   
}

JQUERY

$('a[href^="#"]').on('click',function(event){
      var $anchor = $(this);

      $('#body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1000);

      event.preventDefault();
  });

>> See the Web site

>> Here's a fiddle

In the fiddle, you may set CSS overflow:display; in the #body ID and run the fiddle again to see a normal div with 5 next one to one div in it.

Well, thanks for your help.

Upvotes: 2

Views: 1358

Answers (1)

Feu follet
Feu follet

Reputation: 319

Finally there's a way it works with a simple jquery plugin Jquery.LocalScroll and it is easy to implement

You can see the full detail here which is the author plugin site and demo where we can scroll 'X', 'Y' or even both at a time.

CSS / HTML haven't change simply the JavaScript JQuery bloc that look like this :

$.localScroll.defaults.axis = 'xy';

// Scroll initially if there's a hash (#something) in the url 
$.localScroll.hash({
    target: '#content', // Could be a selector or a jQuery object too.
    queue:true,
    duration:1500
});

$.localScroll({
    target: '#body', // could be a selector or a jQuery object too.
    queue:true,
    duration:1000,
    hash:true,
    onBefore:function( e, anchor, $target ){
        // The 'this' is the settings object, can be modified
    },
    onAfter:function( anchor, settings ){
        // The 'this' contains the scrolled element (#content)
    }
});

Also, you must Add the jquery.scrollTo-min.js and the jquery.localscroll-min.js included in the demo.

And it's all work fine by now in my solution

Upvotes: 1

Related Questions