How to Make Page Slide in Either Direction Based on User Click Location

Although the title of my question may not be very descriptive, I am essentially trying to implement a functionality where a page will slide right if a user clicks a link to the right of their current active link, and slide left if they click a link to the left.

Let's consider this snippet of a webpage:

<header>
    <nav>
        <ul>
            <li><a href="/page/about">About</a></li>
            <li><a href="/page/contact">Contact</a></li>
            <li><a href="/page/services" class="yourehere">Services</a></li>
            <li><a href="/page/other">Other</a></li>
        </ul>
    </nav>
</header>

<section id="content">
     Page content here
</section>

Essentially, when a user clicks a link in the header element to the right of an element with the class 'youarehere', I want the page to slide right. Conversely, clicking a link to the left of 'youarehere' should make the page slide left.

I have condensed this JavaScript code which enables content loading via AJAX and triggers the sliding effect after loading:

$(function() {

var History = window.History;
if ( !History.enabled ) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();
    $.get(State.url, function(response) {

        var ajax_div = '#content';

        $(ajax_div).html(response).addClass('animated slideInRight');

    });

});


$('body').on('click', '.ajax', function(event) {
    $('header nav ul li a').not(this).removeClass('yourehere');
    $(this).parent().addClass('yourehere');

    event.preventDefault();
    History.pushState(null, $(this).text(), $(this).attr('href'));
});

});

These are the CSS classes used for the sliding effect:

.animated {
-webkit-animation-duration: .4s;
animation-duration: .4s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

@keyframes fadeInRight {
0% {
opacity: 1;
-webkit-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
}

100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}

.fadeInRight {
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}

If anyone has any insights or techniques on achieving my desired slide effect, it would be much appreciated. The Krimper website serves as a perfect example of what I am aiming for. Cheers :)

Answer №1

Do you approve of this method?

$(document).ready(function(){
    $("a").click(function(){
        if($(this).offset().left>$(".yourehere").offset().left){
            alert("Move right");
        }else{
            alert("Move left");
        }

    });
});

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

Difficulty with deploying Next.js to Vercel due to restrictions on rate limits when utilizing getStaticProps()

In my Next.js project connected to Apollo, I have around 50 static URLs fetching data using getStaticProps(). The performance is great, and I enjoy how the pages load. However, a problem arises when Vercel builds the static versions of these pages during d ...

The HTTP GET request was successful, however, there is no data being displayed on the screen

I am currently facing an issue with fetching data from a web server. The data is retrieved successfully as I can see the object in the console log, but it does not render in the component template. export class CountrydetailsComponent implements OnInit { ...

Showing a PHP echo statement in an HTML div with the help of jQuery

I am looking for a way to showcase the echo text generated by PHP on a separate HTML page. I attempted to use jQuery for this purpose, but it proved unsuccessful. Please do not dismiss this question as I have gone through all the previous posts related to ...

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

Deleting a sentence from a text document

Is there a way to remove a row from a text file without leaving empty lines? See the Example and Example2. Consider this scenario: Hello Hello2 String After deletion, the file should look like this: Hello Hello2 I attempted the following code but it re ...

Having trouble displaying a dynamically created table using jQuery

I'm a newcomer to jQuery and I need help with querying 2 web services. The goal is to query the first service, use an attribute value to query the second one, and then populate a table with data from both services. Please take a look at my code on th ...

What is the method for applying the action (hide) to every table cell that doesn't include a specific string in its ID?

I have a table with cells containing unique IDs such as "2012-01-01_841241" that include a date and a number. My goal is to filter the table to only display three specific numbers by sending a request and receiving those numbers. Is there a more efficien ...

Having trouble with prettyphoto functionality

Seeking assistance as I am struggling to get this working Here is how I have set it up: <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen"/ ...

Changing the direction of the submenu to the left instead of the right

My Bootstrap 4 menu has a submenu that appears to the right of the main menu. However, since the menu is positioned on the far right of the screen, it gets cut off on the right side. I'm looking for a way to make the submenu appear on the left side o ...

List of COM ports accessible with Serialport npm

I am encountering an issue with a specific part of my program and although I have identified the problem, I am unable to find a solution on my own. Therefore, I am reaching out for your assistance. It seems like the problem does not lie within the serialp ...

Retrieving a single item from an array of objects with the help of body parser

I need assistance with sending an array of objects to a post route in my express app. Here is my form (written in ejs format): <form action="/archiveList/<%= list._id %>" method="POST"> <input type="hidden" name="list" value = <%= items ...

An efficient approach to populating a dropdown menu with array values using jquery

Here is an array that I am working with: var serviceArray= new Array("Living Room","Dining Room","Bedroom(s)","Family Room","Kitchen","Den","Hallway(s)","Ste(s)","Bathroom","Landing(s)"); I am looking to populate the options of a select tag with these v ...

Creating a square shape in Twitter Bootstrap to frame an item on a webpage

I've been working on creating a webpage that looks similar to the image provided. I've managed to get about 90% of it done, but there are a couple of issues I'm facing: How can I create a square with a triangle at the bottom as shown in th ...

Is it possible to add animated text using anime.js?

var elements = document.querySelectorAll('.content'); anime({ targets: elements, content: 100, }); <script src="https://raw.githubusercontent.com/juliangarnier/anime/master/lib/anime.min.js"></script> <span class="content"> ...

Manipulate the text() function within jQuery as the div is being created

The code $('#box').text("hello") will display "hello" as text. But how can I use it when creating a div in a loop? for(i=0; i<3; i++) { description += "<div id='box'>" + text[i] + "</div>"; } Is there a way to s ...

What is the best method for conducting comprehensive testing of all projects and libraries within NestJS (nx)?

Our NestJS project has been established with multiple libraries through Nx. We have successfully run tests on individual projects/libraries using the following command: npx nx test lib1 --coverage While this method works well, we are faced with numerous l ...

Can you help me figure out how to make a header that sticks to the top of the page as you scroll horizontally, and a sidebar that stays in place as you scroll vertically with

I am currently working on developing a layout that includes a sticky header and sidebar for my content list. My goal is to have the sidebar scroll down as I move through the page content, while also ensuring that the header scrolls horizontally along with ...

How to retrieve text from the <td> element with Selenium

Currently, I am trying to extract the value enclosed within the <td> tag containing 30.0000 from a table using Selenium. However, every time I attempt to retrieve it, I receive 0.0000 instead. The method I have used so far is findElementByXPath(".//* ...

The dropdown menu is being truncated

I am having an issue with a drop-down menu being cut off by its parent div. When I increase the height of the parent div, the drop-down menu becomes visible. Can someone please assist me? Below is my code snippet: MarkUp <div id="main-navigation" clas ...

Save the test outcomes in HTML format using cypress

Can Cypress test results be exported to an HTML or another format, similar to cucumber-report.html? ...