"Experience the Dynamic Animation of Bootstrap4 with jQuery in a

Question

"Experience the Dynamic Animation of Bootstrap4 with jQuery in a

I had implemented a code for horizontal page left to right animation which was working perfectly fine. However, it suddenly stopped functioning without any recent changes being made.

Now, the Page--3 link is no longer functional and clicking on either the Page--4 or Page--5 links redirects to Page--1 or Page--2.

The Page--1 link from the navbar works properly, as does the Page--2 link.

Though the Page--3 link from the navbar doesn't seem to open anything at all.

Clicking on the Page--4 link opens either page--3 or Page--2, while the behavior of the Page--5 link seems unpredictable as it sometimes works and other times leads to Page--1.

jquery html css bootstrap-4 horizontal-scrolling

Answer 1

Answer №1

It seems that setting overflow to hidden eliminates the horizontal scrollbar and consequently any reliable value for scrollLeft.

My recommendation is to consider animating the margin of the parent container instead.

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


  <!-- Bootstrap  CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <style type="text/css">
    html,
    body {
      height: 100%;
      /* background: linear-gradient(to left, #283048, #859398);*/
      overflow: hidden;
    }
    
    .main {
      margin-top: 5%;
      margin-bottom: 0;
      margin-right: 0;
      mar`enter code here`gin-left: 0;
      width: 500%;
      height: 90%;
      /* Mandatory for horizontal scroll */
      overflow: hidden;
      display: inline-flex;
      white-space: nowrap;
      /* Mandatory for horizontal scroll */
    }
    
    .main .card {
      display: inline-block;
      background: transparent;
      height: 100%;
      width: 100%;
    }
    
    .c-toggler {
      border-color: white;
    }
    
    .navbar-dark .ham-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)'  stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
  </style>

</head>


<body>
  <div class="container container-navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">NavBar</a>
      <!--Brand icon here -->
      <button class="navbar-toggler c-toggler" type="button" data-toggle="collapse" data-target="#navbar-div" aria-controls="navbar-div" aria-expanded="false" aria-label="Toggle navigation">
            <span  class="navbar-toggler-icon ham-icon"></span>
          </button>

      <div class="collapse navbar-collapse navbar-div" id="navbar-div">
        <ul class="navbar-nav mr-3">
          <li class="nav-item active">
            <a class="nav-link" href="#page1" data-toggle="collapse" data-target=".navbar-collapse.show">Page--1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page2" data-toggle="collapse" data-target=".navbar-collapse.show">Page--2</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page3" data-toggle="collapse" data-target=".navbar-collapse.show">Page--3</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page4" data-toggle="collapse" data-target=".navbar-collapse.show">Page--4</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page5" data-toggle="collapse" data-target=".navbar-collapse.show">Page--5</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container-fluid main">
    <div class="card page1" id="page1">
      <h2>Page1</h2>
    </div>
    <div class="card page2" id="page2">
      <h2>Page2</h2>
    </div>
    <div class="card page3" id="page3">
      <h2>Page3</h2>
    </div>
    <div class="card page4" id="page4">
      <h2>Page4</h2>
    </div>
    <div class="card page5" id="page5">
      <h2>Page5</h2>
    </div>
  </div>

  <!-- Bootstrap  and jQuery Scripts-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script>
    $(document).ready(function() {
      $("body").css("overflow", "hidden");
      $('a[href^="#page"]').on('click', function() {
        event.preventDefault();
        // Horizontal Scroll
        let currentMargin = $('.main').css('margin-left').replace('px', '');
        let targetOffset = $($(this).attr('href')).offset().left;
        $('.main').animate({
          marginLeft: currentMargin - targetOffset
        }, 1000);
      });
    });
  </script>
</body>

</html>

Answer 2

It seems that setting overflow to hidden eliminates the horizontal scrollbar and consequently any reliable value for scrollLeft.

My recommendation is to consider animating the margin of the parent container instead.

<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>


  <!-- Bootstrap  CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <style type="text/css">
    html,
    body {
      height: 100%;
      /* background: linear-gradient(to left, #283048, #859398);*/
      overflow: hidden;
    }
    
    .main {
      margin-top: 5%;
      margin-bottom: 0;
      margin-right: 0;
      mar`enter code here`gin-left: 0;
      width: 500%;
      height: 90%;
      /* Mandatory for horizontal scroll */
      overflow: hidden;
      display: inline-flex;
      white-space: nowrap;
      /* Mandatory for horizontal scroll */
    }
    
    .main .card {
      display: inline-block;
      background: transparent;
      height: 100%;
      width: 100%;
    }
    
    .c-toggler {
      border-color: white;
    }
    
    .navbar-dark .ham-icon {
      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)'  stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
  </style>

</head>


<body>
  <div class="container container-navbar">
    <nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark">
      <a class="navbar-brand" href="#">NavBar</a>
      <!--Brand icon here -->
      <button class="navbar-toggler c-toggler" type="button" data-toggle="collapse" data-target="#navbar-div" aria-controls="navbar-div" aria-expanded="false" aria-label="Toggle navigation">
            <span  class="navbar-toggler-icon ham-icon"></span>
          </button>

      <div class="collapse navbar-collapse navbar-div" id="navbar-div">
        <ul class="navbar-nav mr-3">
          <li class="nav-item active">
            <a class="nav-link" href="#page1" data-toggle="collapse" data-target=".navbar-collapse.show">Page--1 <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page2" data-toggle="collapse" data-target=".navbar-collapse.show">Page--2</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page3" data-toggle="collapse" data-target=".navbar-collapse.show">Page--3</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page4" data-toggle="collapse" data-target=".navbar-collapse.show">Page--4</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="#page5" data-toggle="collapse" data-target=".navbar-collapse.show">Page--5</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>

  <div class="container-fluid main">
    <div class="card page1" id="page1">
      <h2>Page1</h2>
    </div>
    <div class="card page2" id="page2">
      <h2>Page2</h2>
    </div>
    <div class="card page3" id="page3">
      <h2>Page3</h2>
    </div>
    <div class="card page4" id="page4">
      <h2>Page4</h2>
    </div>
    <div class="card page5" id="page5">
      <h2>Page5</h2>
    </div>
  </div>

  <!-- Bootstrap  and jQuery Scripts-->
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <script>
    $(document).ready(function() {
      $("body").css("overflow", "hidden");
      $('a[href^="#page"]').on('click', function() {
        event.preventDefault();
        // Horizontal Scroll
        let currentMargin = $('.main').css('margin-left').replace('px', '');
        let targetOffset = $($(this).attr('href')).offset().left;
        $('.main').animate({
          marginLeft: currentMargin - targetOffset
        }, 1000);
      });
    });
  </script>
</body>

</html>

"Experience the Dynamic Animation of Bootstrap4 with jQuery in a

Answer №1

Similar questions

Click to load comments dynamically using Ajax

Is it viable to modify the appearance of the elements in a webview?

Customize Highcharts axis properties after adding additional series to the plot

Incorporating JQuery UI sortable functionality with the CSS grid display property to create a

The `getScript` function in jQuery is not working as expected, even though the path is accurate and the script was successfully downloaded

The JSON response may be missing, but the URL is still echoing the correct information

Select2 eliminates every tag except the first one

What is the best way to arrange map items using justify-content-around for optimal display?

What is the best way to layer a background image with a CSS gradient?

Tips for integrating CSS keyframes in MUI v5 (using emotion)

Troubleshooting Issue: Google Map not resizing correctly when window size changes

Flexbox parent div experiencing overflow due to horizontal margins protruding beyond the boundaries

Add a close event to a list item in JQuery before

MaterialUI AppBar is missing a crucial element

Looking to change the input field names by increasing or decreasing when clicking on a div using jQuery?

Is there a more streamlined approach to coding in PHP and jQuery?

"Troubleshooting an issue with mod_rewrite affecting the functionality of an ajax

Switch out the ajax data in the input field

Click on a Marker to automatically zoom to its location using Leaflet mapping technology

Disabling comments is creating problems with the appearance of Wordpress pages