Sliding horizontally with a responsive touch

Question

Sliding horizontally with a responsive touch

I am looking to implement a horizontal responsive page navigation, similar to the illustration shown below:

This is my current progress: DEMO

$(document).ready(function () {
    var slideNum = $('.page').length,
        wrapperWidth = 100 * slideNum,
        slideWidth = 100/slideNum;
    $('.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, 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;
}


.simulate{
    height:2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="wrapper">
    <nav>
        <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>
    </nav>
    <div id="page-1" class="page"> 
         <h3>page 1</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-2" class="page">  
         <h3>page 2</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
    <div id="page-3" class="page"> 
        <h3>page 3</h3>
        <div class="simulate">Simulated content heigher than 100%</div>
    </div>
</div>

Despite making good progress, I have encountered some challenges. While the navigation is responsive to a certain extent, it needs to stay within its designated page when scaled without revealing others.

In addition, when the pages are lengthy, a scroll bar appears which is desired, but there is an extra gap as wide as the scroll bar on the last slide.

My specific requirements include:

Must be fully responsive
Pages should be able to accommodate long (800px) content and remain scrollable without any gap on the final page
Compatibility with Internet Explorer 9 (minimum requirement)

javascript jquery html css responsive-design

Answer 1

Answer №1

A Creative Way to Slide Pages Horizontally

Featuring a left-margin animation effect

This nifty jQuery code snippet :

Dynamically calculates the number of slides and adjusts the width of the wrapper accordingly.
Animates the left-margin of the wrapper based on the clicked link, smoothly transitioning to the corresponding slide.
Applies a class toggle to highlight the active link when clicked.

Key highlights of this solution include:

Efficiently uses only one menu occurrence to reduce markup and prevent redundant content.
Relies solely on the jQuery library for functionality.
Works seamlessly with a changing number of slides.

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.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,
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;
}

.simulate {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <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>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div>

Answer 2

A Creative Way to Slide Pages Horizontally

Featuring a left-margin animation effect

This nifty jQuery code snippet :

Dynamically calculates the number of slides and adjusts the width of the wrapper accordingly.
Animates the left-margin of the wrapper based on the clicked link, smoothly transitioning to the corresponding slide.
Applies a class toggle to highlight the active link when clicked.

Key highlights of this solution include:

Efficiently uses only one menu occurrence to reduce markup and prevent redundant content.
Relies solely on the jQuery library for functionality.
Works seamlessly with a changing number of slides.

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.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,
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;
}

.simulate {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <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>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div>

Answer 3

Answer №2

"it is essential for scalability that the element remains fixed on its respective page"

To ensure this, maintain a reference to the current page element and immediately scroll to this element when the window size changes:

var currentPage; //keep track of the current page
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; //set the reference to the current page
    return false;
});

//immediately scroll to current page when window resizes
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

This approach enhances responsiveness.

the pages must be lengthy (800px) with smooth scrolling, eliminating any gap on the last page.

To eliminate the gap, extend all page elements slightly beyond their required length. The scrolling functionality remains unaffected as the pages are aligned using left:0;. It's likely that other pages had similar gaps covered by the scroll bar.

.page {
    width: 110%;
}

compatibility required with at least IE9 browser.

Unfortunately, I can't assist with this requirement as I only have IE11. However, it performs well on IE11.

Demo link

Answer 4

"it is essential for scalability that the element remains fixed on its respective page"

To ensure this, maintain a reference to the current page element and immediately scroll to this element when the window size changes:

var currentPage; //keep track of the current page
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; //set the reference to the current page
    return false;
});

//immediately scroll to current page when window resizes
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

This approach enhances responsiveness.

the pages must be lengthy (800px) with smooth scrolling, eliminating any gap on the last page.

To eliminate the gap, extend all page elements slightly beyond their required length. The scrolling functionality remains unaffected as the pages are aligned using left:0;. It's likely that other pages had similar gaps covered by the scroll bar.

.page {
    width: 110%;
}

compatibility required with at least IE9 browser.

Unfortunately, I can't assist with this requirement as I only have IE11. However, it performs well on IE11.

Demo link

Sliding horizontally with a responsive touch

Answer №1

A Creative Way to Slide Pages Horizontally

Answer №2

Similar questions

What are the best methods for efficiently extracting web page content that is nested within HTML pages under the `<body>` tag?

Failure to trigger AJAX Success or Error Events

Is there a way to avoid overlapping in CSS3 transforms?

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

What is the best way to ensure that all of my images are the same size?

Interactive map with AngularJS featuring dynamic markers and real-time updating of marker position

Issue: [ng:areq] The parameter 'PieController' is not properly defined, it is currently undefined

Positioning oversized images in a React Native application

Is it a wise decision to provide the client with a new token just one minute before the expiration of the old one?

Strange sequence of results coming from Vue.js

Executing a Select Change in a React Application using CasperJS

"Enhancing Hangman by updating the object-oriented array of values

Tips for applying a custom design to your MUI V5 styled component

retrieving data from a node and embedding it into an HTML file

Error: Attempting to subscribe to a post request returned a null result

Encountering AJAX Error 0 with jQueryUI Autocomplete upon pressing enter key

Achieving a consistent border-radius effect during hover transitions

What is the best way to link this information to access the data attribute?

I'm still trying to figure out the property position. Why won't my page scroll? (My first time using HTML)

Nested JavaScript function expression