Organizational Research By

Surprising Reserch 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
40 views



Related Hot Questions

2 Answers

0 votes

Horizontal slides with left-margin animation

This jQuery snippet :

  1. Calculates the number of slides and set the width of the wrapper accordingly.
  2. According to which link is clicked, left-margin is animated on the wrapper to show the corresponding slide with a smooth transition
  3. Toggles the class of the clicked link for active link highlighting

Note that this solution:

  1. Uses only one menu occurence to minimize markup and prevent content repetition.
  2. Requires only the jQuery library

for a dynamic number of slides

DEMO

jQuery :

$(document).ready(function () {
    var sildeNum = $('.page').length,
        wrapperWidth = 100 * sildeNum,
        slideWidth = 100/sildeNum;
    $('.wrapper').width(wrapperWidth + '%'); 
    $('.page').width(slideWidth + '%');
    $('a.scrollitem').click(function(){
        $('a.scrollitem').removeClass('selected');
        $(this).addClass('selected');
        var slideNumber = $($(this).attr('href')).index('.page'),
            margin = slideNumber * -100 + '%';
        $('.wrapper').animate({marginLeft: margin},1000);
        return false;
    });
});

HTML :

page 1

Simulated content heigher than 100%

page 2

Simulated content heigher than 100%

page 3

Simulated content heigher than 100%

CSS :

html, body {
    height: 100%;
    margin: 0;
    overflow-x:hidden;
    position:relative;
}
nav{
    position:absolute;
    top:0; left:0;
    height:30px;
}
.wrapper {
    height: 100%;
    background: #263729;
}
.page {
    float:left;
    background: #992213;
    min-height: 100%;
    padding-top: 30px;
}
#page-1 {
    background: #0C717A;
}
#page-2 {
    background: #009900;
}
#page-3 {
    background: #0000FF;
}
a {
    color:#FFF;
}
a.selected{
    color: red;
}

Original answer: DEMO

answered Sep 9, 2015 by MerleWGTSoae
0 votes

"as you scale it needs to stick to the page its on and not reveal the others"

To achieve this, keep a reference to the current page element and then do a no-delay scrollTo this element when the window is resized:

var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
    var targetPage = $(jQuery(this).attr('href'));
    jQuery('a.scrollitem').removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery('.toggle').css({'display':'none'});
    jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
        jQuery('.toggle').css({'display':'block'});
    });
    currentPage = targetPage; //here is where we set the reference
    return false;
});

//and here we do a no-delay scrollTo
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

This makes it pretty responsive, in my opinion.

pages need to be able to be long (800px) and still scrollable, without the gap on the last one.

To get rid of that gap, I just make all pages a little longer than they need to be. The scrolling is not affected by this since the pages are left-justified with left:0;. I suspect that the other pages had the same gap and and that the gaps on those pages were covered by the scroll bar.

.page {
    width: 110%;
}

needs to work on minimum ie9

I'm afraid I can't help in this regard; I have only IE11 installed. But hey, it works great in IE11.

Working fiddle

answered Sep 9, 2015 by MonroeHUNTgx

...