Interactive horizontal web design with center alignment and dynamic scrolling feature

We have designed a unique web layout that is centered horizontally and includes an animated scrolling effect. There are 5 menu options that use simple anchor links to navigate between different pages. Our layout features static content with only the body section sliding when navigating. The desired effect is a smooth transition from one page to another, where clicking on each menu item triggers a sliding motion to the corresponding content. However, we have encountered some issues with the functionality.

We incorporated code snippets from other websites for certain CSS and jQuery elements. Unfortunately, sometimes when clicking on a menu item, the action does not execute properly. It either fails to display the correct slide or slides in the opposite direction, leaving us puzzled and searching for a solution.

HTML

<body>
    <div id="menu">
        <ul>
            <li><a href="#menu1">Page 1</a></li>
            <li><a href="#menu2">Page 2</a></li>
            <li><a href="#menu3">Page 3</a></li>
            <li><a href="#menu4">Page 4</a></li>
            <li><a href="#menu5">Page 5</a></li>
        </ul>
     </div>


    <div align="center" id="body">
      <div id="body_wrapper">
        <div class="body_content_content" id="menu1">menu1 page content</div>
        <div class="body_content_content" id="menu2">menu2 page content</div>
        <div class="body_content_content" id="menu3">menu3 page content</div>
        <div class="body_content_content" id="menu4">menu4 page content</div>
        <div class="body_content_content" id="menu5">menu5 page content</div>
      </div>
    </div>

</body>

CSS

#menu ul li {
 display:inline;   
}

#body {
  width:100%;
  height:200px;
  margin:auto;
  position:relative;
  border: 0px solid red;
  overflow:hidden;
  top:100px;
}

#body_wrapper {
  float:left;
  width:500%;
  padding:0;
  margin:0;
  height: 200px;
}

.body_content_content {
  float:left;
  width:20%;
  height:200px;
  #margin:10px 0;
  position:relative;
}

.body_content_content div:first {
  width:900px;
  padding:20px;
  margin:auto;
  float:none;   
}

JQUERY

$('a[href^="#"]').on('click',function(event){
      var $anchor = $(this);

      $('#body').stop().animate({
          scrollLeft: $($anchor.attr('href')).offset().left
      }, 1000);

      event.preventDefault();
  });

>> Visit the Web site

>> Check out the fiddle

In the fiddle, you can set CSS overflow:display; in the #body ID to see a normal div with 5 consecutive divs enclosed within it.

We appreciate any assistance you can provide. Thank you.

Answer №1

Discover a simple solution that works seamlessly with a handy jQuery plugin called Jquery.LocalScroll. Implementing it is a breeze.

Visit the plugin site here and check out the demo where you can scroll 'X', 'Y', or both simultaneously.

The CSS / HTML remains unchanged, just jazz up the JavaScript jQuery block like so:

$.localScroll.defaults.axis = 'xy';

// Scroll to the hash initially in the URL
$.localScroll.hash({
    target: '#content', // It can also be a selector or a jQuery object.
    queue: true,
    duration: 1500
});

$.localScroll({
    target: '#body', // It can also be a selector or a jQuery object.
    queue: true,
    duration: 1000,
    hash: true,
    onBefore: function(e, anchor, $target) {
        // 'this' refers to the settings object and can be customized
    },
    onAfter: function(anchor, settings) {
        // 'this' contains the scrolled element (#content)
    }
});

Don't forget to include jquery.scrollTo-min.js and jquery.localscroll-min.js from the demo.

Everything runs smoothly in my solution now.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is preventing Foundation 5 from initializing JavaScript components properly?

I am in the process of upgrading a website that is built with Foundation to version 5.2.0 in order to address some Orbit issues and other improvements. I typically initialize components using data attributes like data-orbit and have had success with using ...

Alignment issue with Bootstrap 4 form fields within inline form group

My experience with Bootstrap 4 on certain pages has been quite challenging, specifically when it comes to aligning fields with labels to the left and maintaining an aligned appearance for input fields. Here is the snippet of my code: <div class="wrap ...

Delaying the standard effect of jQuery on a specific class

Greetings! I am initiating myself with my debut post on stackoverflow... 1) My goal is to create a twinkling effect by pausing opacity at 1 when hovering over a star. However, I only want the specific element being hovered on to be affected, not the entir ...

Issue with file upload process in php

I'm currently facing an issue with my file upload function. I've been referring to a website guide for creating the upload form, but made some modifications to it. Here is the code snippet: upload_form.php : //the jquery script is still the sam ...

generate a flexible div that adjusts its height based on the size of the browser window

Is it possible to create a div layout structured like this: <div_wrapper> <div_header> </div_header> <div_content> </div_content> </div_wrapper> Upon page load, the div_header o ...

Mysterious area located within a flexbox set to display items in a column arrangement

There is a mysterious gap within a flexbox that has a column direction. In the header-left div, I have set up a flexbox with a column direction. It consists of three nested divs: left_text_heading, hero-img, and hero-text. Strangely, there is an unknown s ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

Display 3 images with the carousel feature on the middle image

Currently, I am utilizing the jquery.jcarousellite plugin and attempting to make the second image active. Below is the code snippet I have tried: <div id="jcl-demo"> <div class="custom-container auto moreItems "> <a href="#" c ...

code snippet in ckeditor submission eliminating the use of specific color combinations

Currently, I am integrating a blog writing feature into my website. To achieve this, I have utilized ckeditor along with the ckeditor code snippet plugin for proper formatting of the code snippets. Everything seems to be functioning correctly while I' ...

How can one retrieve elements from a loaded webpage?

I've been using the jQuery function .load() to load a page and I'm trying to find a way to access HTML elements within the loaded page from the source page once it's finished loading. The only method I've come across so far is to add pa ...

Length of borders at the bottom of `td` elements in tables

I have been searching everywhere for a solution and just can't seem to figure it out. I am trying to adjust the length of the bottom border for td elements within a table. I have attached two screenshots for reference. Any assistance would be greatly ...

Looking for matching index in rotated array

Currently, I am working on a design with a reference rectangle (colored in red). Within a rotated container div (#map), I am trying to create a duplicate rectangle (in yellow) that matches the size and position of the original "base" rectangle, regardless ...

Nested array in jQuery

Can someone verify the correctness of this array within an array declaration? If it is correct, can someone suggest how I can display or at least alert all the contents in chkArray? var chkArray = { tv_type[],screen_size[],connectivity[],features[]}; va ...

When the down key is pressed in a textarea, choose the list item

I have HTML similar to the following <div class="row"> <textarea id="txtArea" ng-model="input" ng-change="handleOnChange(input);getSearchField(input);" ng-click="search(input)" ng-focus="search(input);" ...

Interactive webpages with dynamic HTML content, similar to the design of popular platforms such

Explore the source code of Dropbox's homepage or any Soundcloud page. They utilize various scripts and minimal pure HTML content (article, main, p, div). This method of generating pages is referred to as dynamic content/HTML. The main function seems ...

Is it possible to use velocity js to add a gradient color effect to text content?

Can I use velocity js to apply gradient color to text? I've looked at https://css-tricks.com/snippets/css/gradient-text/ My specific need is to dynamically add a changing gradient using js. Thank you in advance. ...

The function window.open when using the target '_blank' will launch a fresh browser window

I'm attempting to open a link in a new browser tab (not a new window). When I place a link on the page like this: <a href="#" onclick="window.open('http://www.google.com', '_blank');"> Click Here</a> when a user clic ...

What is the best way to stop Quasar dropdown list from moving along with the page scroll?

I am facing an issue with my code while using Quasar (Vue 3.0). The code snippet in question is: <q-select filled v-model="model" :options="options" label="Filled" /> When the drop-down menu is open and I scroll the pag ...

By utilizing the body element as the container instead of a div, the content shifts to the left by eight pixels

When the body is used as the wrapper instead of a div, the content shifts eight pixels to the left (on a 1920×1080 display) when it extends below the fold. The examples below illustrate this difference in code snippets. Please note that the variance is on ...

Resizing images in different web browsers: Chrome, IE, and Safari

I'm currently in the process of building a website that utilizes the jquery tabs api. Each tab on the site contains an image that I would like to resize dynamically as the browser window size changes. Here is an example of one of the tabs: <li st ...