Get Page to Slide Right or Left Depending on Where the User Clicked

1
votes

The title of the question may not be the most descriptive, but basically what I'm trying to do is get a page to slide right if the user clicks a link that is to the right of their current active link, or slide left if the link clicked is to the left of their current active link.

For example, I have this part of a page:

<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>

And if I click a link in the header element to right of the element whose class is named 'yourehere', I would like the page to slide right or slide left if I click a link to the left of the class 'yourehere'.

I have this shortened down JavaScript code that loads content via AJAX and when it finishes loading I get the page to slide right:

$(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 two classes used to make the div slide in right:

.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 got any information or techniques on how to do what I'm trying to achieve that would be greatly appreciated. The Krimper website is a perfect example of what I'm trying to achieve. Cheers :)

1
javascriptjqueryhtmlcssajax
The site you referenced used their own script and used WayPoints. You can check out the following: imakewebthings.com/jquery-waypoints/#about github.com/kirkas/Ascensor.js github.com/alvarotrigo/fullPage.js#fullpagejs alvarotrigo.com/fullPage/#3rdPage – Christina
Thanks! Those sites you mentioned there have been a great help – Luke

1 Answers

1
votes

Like this?

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

    });
});