Horizontal sliding layout with mousewheel functionality for responsive design

Question

Horizontal sliding layout with mousewheel functionality for responsive design

I am currently working on incorporating a sliding horizontal layout with a header banner.

Here is the HTML structure I am using:

<body>
  <div id="header">
    <div><a href="#one"> one </a></div>
    <div><a href="#two"> two </a></div>
    <div><a href="#thr"> thr </a></div>
  </div>

  <div id="one" class="panel"> </div>
  <div id="two" class="panel"> </div>
  <div id="thr" class="panel"> </div>
</body>

The header remains fixed, and the panels have been designed with a gradient background (the middle panel has a different color for debugging purposes). Here is the CSS styling being used:

    body {
      width: 6000px;
      overflow: hidden;
    }

    .panel {
      width: 33.3%;
      float: left;
      padding-left: 30px;
      padding-right: 1040px;
      margin-top: -75px;
      height: 960px;
      background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
    }

    #header {
      position: fixed;
      height: 75px;
      margin-top: 25px;
    }

    #two{
      background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
    }

Additionally, I have a function in place to handle the animation between panels:

$(document).ready(function() {
  $("#header a").bind("click", function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("html, body").stop().animate({
      scrollLeft: $(target).offset().left,
      scrollTop: $(target).offset().top
    }, 1200);
  });
});

However, I am encountering a few issues that need troubleshooting:

1) I have attempted to implement a jQuery function for a slide animation triggered by the mouse wheel, but my tests have not been successful...I am consistently encountering the same issue:

$(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
        var target // I am still unable to determine the appropriate target
        $("html, body").stop().animate({
            //should be moving towards the target >,<
       }
});

2) The layout appears to function correctly when my browser window is at 100% size, but adjusting the zoom causes everything to become disordered >,< I am aware that this can be resolved, and I found an example showcasing the solution: here is the link

jquery css layout

Answer 1

Answer №1

If you want to achieve your goals, one approach is to populate an array with elements that have the class of panel, and then utilize an index to navigate through these panels.

Additionally, in case you encounter issues with scrolling when the window is resized, you can listen for and handle the resize event to perform necessary actions.

For more information, refer to the documentation on MouseWheelEvent.

Give this example a try with your own code:

$(document).ready(function() {
  $("#header a").bind("click", function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("html, body").stop().animate({
      scrollLeft: $(target).offset().left,
      scrollTop: $(target).offset().top
    }, 1200);
  });
  
  var scroll_targets = $(".panel");
  var scroll_targets_index = 0;
  $(window).on('DOMMouseScroll mousewheel', function (e) {    
    if (e.originalEvent.wheelDelta < 0) {
      if(scroll_targets_index < scroll_targets.length-1){
        var where = ++scroll_targets_index;
        $("html, body").stop().animate({
          scrollLeft: $(scroll_targets[where]).offset().left,
          scrollTop: $(scroll_targets[where]).offset().top
        }, 1200);
      }
    } 
    else {
    var where;
    if(scroll_targets_index > 0){
       where = --scroll_targets_index;
      }
      else{
      where = 0;
      }
      $("html, body").stop().animate({
          scrollLeft: $(scroll_targets[where]).offset().left,
          scrollTop: $(scroll_targets[where]).offset().top
        }, 1200);
      
    }
  });
  
  $(window).resize(function () {
    $('html,body').scrollTop($(scroll_targets[where]).offset().top);
    $('html,body').scrollLeft($(scroll_targets[where]).offset().left);
  });
});

#body {
      width: 6000px;
      overflow: hidden;
    }

    .panel {
      width: 33.3%;
      float: left;
      padding-left: 30px;
      padding-right: 1040px;
      margin-top: -75px;
      height: 960px;
      background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
    }

    #header {
      position: fixed;
      height: 75px;
      margin-top: 25px;
    }

    #two{
      background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
  <div id="header">
    <div><a href="#one"> one </a></div>
    <div><a href="#two"> two </a></div>
    <div><a href="#thr"> thr </a></div>
  </div>

  <div id="one" class="panel"> </div>
  <div id="two" class="panel"> </div>
  <div id="thr" class="panel"> </div>
</div>

Answer 2

If you want to achieve your goals, one approach is to populate an array with elements that have the class of panel, and then utilize an index to navigate through these panels.

Additionally, in case you encounter issues with scrolling when the window is resized, you can listen for and handle the resize event to perform necessary actions.

For more information, refer to the documentation on MouseWheelEvent.

Give this example a try with your own code:

$(document).ready(function() {
  $("#header a").bind("click", function(event) {
    event.preventDefault();
    var target = $(this).attr("href");
    $("html, body").stop().animate({
      scrollLeft: $(target).offset().left,
      scrollTop: $(target).offset().top
    }, 1200);
  });
  
  var scroll_targets = $(".panel");
  var scroll_targets_index = 0;
  $(window).on('DOMMouseScroll mousewheel', function (e) {    
    if (e.originalEvent.wheelDelta < 0) {
      if(scroll_targets_index < scroll_targets.length-1){
        var where = ++scroll_targets_index;
        $("html, body").stop().animate({
          scrollLeft: $(scroll_targets[where]).offset().left,
          scrollTop: $(scroll_targets[where]).offset().top
        }, 1200);
      }
    } 
    else {
    var where;
    if(scroll_targets_index > 0){
       where = --scroll_targets_index;
      }
      else{
      where = 0;
      }
      $("html, body").stop().animate({
          scrollLeft: $(scroll_targets[where]).offset().left,
          scrollTop: $(scroll_targets[where]).offset().top
        }, 1200);
      
    }
  });
  
  $(window).resize(function () {
    $('html,body').scrollTop($(scroll_targets[where]).offset().top);
    $('html,body').scrollLeft($(scroll_targets[where]).offset().left);
  });
});

#body {
      width: 6000px;
      overflow: hidden;
    }

    .panel {
      width: 33.3%;
      float: left;
      padding-left: 30px;
      padding-right: 1040px;
      margin-top: -75px;
      height: 960px;
      background-image: linear-gradient(to bottom, #0B88FF, #95EEFF);
    }

    #header {
      position: fixed;
      height: 75px;
      margin-top: 25px;
    }

    #two{
      background-image: linear-gradient(to bottom, #0B8800, #9E5EFF);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="body">
  <div id="header">
    <div><a href="#one"> one </a></div>
    <div><a href="#two"> two </a></div>
    <div><a href="#thr"> thr </a></div>
  </div>

  <div id="one" class="panel"> </div>
  <div id="two" class="panel"> </div>
  <div id="thr" class="panel"> </div>
</div>

Answer 3

Answer №2

When it comes to Unravel, I believe the use of CSS and JavaScript, particularly transform3d and various CSS techniques, played a significant role. However, encountering issues with getting the scroll event while having overflow:hidden on the body can be problematic as it hides all scrolls. To address this issue, I resorted to utilizing the mousewheel event, which functions in the following manner:

$(window).on('wheel', function (event) {      
    console.log(event); // Detailed event properties and functions are visible in the console
});

The wheelDelta property is worth noting as it returns 120 for forward mousewheel movements and -120 for backward ones. By incorporating a counter, I could track the number of times the mousewheel event was triggered:

$(window).on('wheel', function (event) {      

    if (event.originalEvent.wheelDelta / 120 > 0 ) {
        count++;
        console.log(count);
        if(count > 30 ){

            $("html, body").stop().animate({
              scrollLeft: $('#two').offset().left,
              scrollTop: $('#two').offset().top
            }, 1200);   
        }
        if(count > 60 ){

            $("html, body").stop().animate({
              scrollLeft: $('#thr').offset().left,
              scrollTop: $('#thr').offset().top
            }, 1200);               
        }
        if(count > 90 ){

            $("html, body").stop().animate({
              scrollLeft: $('#two').offset().left,
              scrollTop: $('#two').offset().top
            }, 1200);   
            count = 0;          
        }


    }
});

These steps are designed to aid you in developing the logic for transitioning between panels based on mousewheel actions. Best of luck with your project!

Answer 4

When it comes to Unravel, I believe the use of CSS and JavaScript, particularly transform3d and various CSS techniques, played a significant role. However, encountering issues with getting the scroll event while having overflow:hidden on the body can be problematic as it hides all scrolls. To address this issue, I resorted to utilizing the mousewheel event, which functions in the following manner:

$(window).on('wheel', function (event) {      
    console.log(event); // Detailed event properties and functions are visible in the console
});

The wheelDelta property is worth noting as it returns 120 for forward mousewheel movements and -120 for backward ones. By incorporating a counter, I could track the number of times the mousewheel event was triggered:

$(window).on('wheel', function (event) {      

    if (event.originalEvent.wheelDelta / 120 > 0 ) {
        count++;
        console.log(count);
        if(count > 30 ){

            $("html, body").stop().animate({
              scrollLeft: $('#two').offset().left,
              scrollTop: $('#two').offset().top
            }, 1200);   
        }
        if(count > 60 ){

            $("html, body").stop().animate({
              scrollLeft: $('#thr').offset().left,
              scrollTop: $('#thr').offset().top
            }, 1200);               
        }
        if(count > 90 ){

            $("html, body").stop().animate({
              scrollLeft: $('#two').offset().left,
              scrollTop: $('#two').offset().top
            }, 1200);   
            count = 0;          
        }


    }
});

These steps are designed to aid you in developing the logic for transitioning between panels based on mousewheel actions. Best of luck with your project!

Horizontal sliding layout with mousewheel functionality for responsive design

Answer №1

Answer №2

Similar questions

Text hidden within the image, each line concealing a separate message

dilemma with jquery slideshow

Tips for ensuring long text wraps to the next line when it exceeds the width of the browser window

Creating a triangle shape using Bootstrap to style a div element, similar to the image provided

Adjust the alignment of two headers with varying sizes

Trouble with DOM loading due to external JavaScript file reference

The use of multiple Where clauses in a Firestore Firebase query is not functioning as expected when implemented in JavaScript code

Attempting to enlarge an image by hovering over it proves to be futile

What is the best way to position a rectangle on top of a div that has been rendered using

Trick for using :checked in CSS

Dynamic CSS overlay based on database field content without requiring user interaction

Exploring the world of CSS: accessing style attributes using JavaScript

Find the size of the grid using the data attribute

Disable the borders on HTML input fields

Sliding out the existing content and smoothly sliding in a fresh one upon clicking

The linking process in AngularJS is encountering difficulties when trying to interact with

When scrolling, the text or logo inside the navbar seems to dance with a slight wiggling or

HTML and CSS link conflict

Switching effortlessly between Fixed and Relative positioning

Resolving conflicts between Bootstrap and custom CSS transitions: A guide to identifying and fixing conflicting styles