Organizational Research By

Surprising Reserch Topic

Experts Most Trusted Topic


responsive horizontal page sliding


responsive horizontal page sliding  using -'javascript,jquery,html,css,responsive-design'

I want to create horizontal responsive page navigation as illustrated by the below image :


This is what I have managed to do : DEMO

I have however hit a few brick walls, as mine is responsive to a certain degree, its just as you scale it needs to stick to the page its on and not reveal the others.

Also if the pages are long it shows a scroll bar which is perfect, but on the last slide there is a gap as wide as the scroll-bar.

I have the following Requirements:


Needs to be Responsive
pages need to be able to be long (800px) and still scrollable, without the gap on the last one.
needs to work on minimum ie9


And Finally here's the code for it:

CSS:

html, body {
            height: 100%;
            margin: 0;
        }
        .wrapper {
            width: 100%;
            height: 100%;
            margin: auto;
            overflow-x: hidden;
            position: relative;
            background: #263729;
        }

        .page {
            width: 100%;
            background: #992213;
            position: absolute;
            top:0;
            left: 0;
            height: 900px;
        }
        #page-1 {
            background: #0C717A;
        }
        #page-2 {
            background: #009900;
            left:100%;
        }
        #page-3 {
            background: #0000FF;
            left: 200%;
        }
a {
    color:#FFF;
}


JS:

function scrollSections() {
        jQuery('a.scrollitem').click(function () {
            jQuery('a.scrollitem').removeClass('selected');
            jQuery(this).addClass('selected');
            jQuery('.toggle').css({'display':'none'});
            jQuery('.wrapper').scrollTo(jQuery(this).attr('href'), 1200, function(){
                jQuery('.toggle').css({'display':'block'});
            });
            return false;
        });
    }
    scrollSections();


HTML:

<div class="wrapper">
    <div id="page-1" class="page">
        <a href="#page-1" class="scrollitem selected">page 1</a>
        <a href="#page-2" class="scrollitem">page 2</a>
        <a href="#page-3" class="scrollitem">page 3</a>

        <h3>page 1</h3>
    </div>
    <div id="page-2" class="page">
        <a href="#page-1" class="scrollitem selected">page 1</a>
        <a href="#page-2" class="scrollitem">page 2</a>
        <a href="#page-3" class="scrollitem">page 3</a>
        <h3>page 2</h3>
    </div>
    <div id="page-3" class="page">
        <a href="#page-1" class="scrollitem selected">page 1</a>
        <a href="#page-2" class="scrollitem">page 2</a>
        <a href="#page-3" class="scrollitem">page 3</a>
        <h3>page 3</h3>
    </div>
</div>


Any Help Would be Greatly Appreciated.
    

asked Sep 9, 2015 by MalkaLathropn
0 votes
39 views



Related Hot Questions



Government Jobs Opening


...