How to implement waypoint horizontal navigation with jInvertScroll ?

[nag-uf]

I have created a single page horizontal website using jInvertScroll and it is working well with mouse scroll. But I am facing issues with menu navigation using waypoint. Could you please help me in creating navigation with waypoint. Please provide some example scripts.

[sakshamsaxena]

Yes, the waypoint navigation is an utter failure. Even I faced this issue recently when I was doing a small project(www.sakshamsaxena.in/demo_for_cansat) which extensively employed jInvertScroll. Since I was dealing with a deadline, I came up with quick work-around (I used ScrollTo for navigation scrolling) :

var dynamicWidth = window.screen.availWidth;
var trueWidth;
if(dynamicWidth>=1360&&dynamicWidth<=1370){
trueWidth = dynamicWidth+130}
else{trueWidth = dynamicWidth+101}
//and then
$("#l1").click(function(){$('body').scrollTo({top:trueWidth},800,{axis:'y'})});
//proceed similarly for other links

[pixxelfactory]

Hi guys, no, do not do it manually like sakshamasaxena, do it this way (i will upload this example and provide a link today when i'll have 5min):

jInvertScroll Example

<div class="menu">
    <a href="#" data-target="el1">El1</a>
    <a href="#" data-target="el2">El2</a>
    <a href="#" data-target="el3">El3</a>
    <a href="#" data-target="el4">El4</a>
</div>

<div class="horizon scroll">
    <img src="images/horizon.png" alt="" />
</div>
<div class="middle scroll">
    <img src="images/middle.png" alt="" />
</div>
<div class="front scroll">
    <img src="images/front.png" alt="" />
    <div class="elements">
        <div class="el el1"></div>
        <div class="el el2"></div>
        <div class="el el3"></div>
        <div class="el el4"></div>
    </div>
</div>

<script type="text/javascript" src="../libs/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/jquery.jInvertScroll.js"></script>
<script type="text/javascript">
(function($) {
    $.jInvertScroll(['.scroll'],        // an array containing the selector(s) for the elements you want to animate
        {
        height: 6000,                   // optional: define the height the user can scroll, otherwise the overall length will be taken as scrollable height
        onScroll: function(percent) {   //optional: callback function that will be called when the user scrolls down, useful for animating other things on the page
        }
    });

    $('.menu a').on('click', function(e) {
        e.preventDefault();
        var target = '.'+$(this).data('target');
        var left = $(target).position().left;
        var total = $('.front.scroll').width();
        var perc = left / (total - $(window).width()) * 100;

        var height = $('html').height();
        var final = ((height - $(window).height())/ 100 * perc);

        $('html, body').animate({scrollTop: final}, 500);
    });
}(jQuery));
</script>

[nag-uf]

@pixxelfactory It's not working for me. When I click on the menu link, it is not navigating to the target location. If I scroll the mouse to some location then I click on any of the menu links it is navigating to top of the page. All the menu links navigating to top of the page only, because always the var final = 0.

[pixxelfactory]

Hi, here's a working example: www.pixxelfactory.net/downloads/jInvertScrollX.zip

[nag-uf]

@sakshamsaxena Your example is working, but we need to define exact trueWidth for every section.

[nag-uf]

@pixxelfactory Thanks, your demo is very helpful for me.

[pixxelfactory]

@nag-uf No problem, please let me know if it worked for you, otherwise send me a link to your site, so i can check it out ;-)

[nag-uf]

Sure!

[sakshamsaxena]

@pixxelfactory Neat! I think you can close this issue now, if @nag-uf is satisfied with the solution.

[pixxelfactory]

Let's see if it works for him.. Anyway, when i'll finally have a few hours i will integrate the menu script into the plugin, so we can fix this problem one and for all =)

[nag-uf]

Yah, that's a cool script and it's working perfectly. Thanks @pixxelfactory

[mfr57]

Thank you! @pixxelfactory is there any way to make the elements or pages responsive? Everytime I set a height variable other than a fixed value it doesn't display the divs.

[daniantong]

Hello @pixxelfactory The demo you uploaded works great in chrome but I cannot get it to work at all in either Microsoft Edge or Internet Explorer? Any idea on which approach to take to fix it? Cheers!

[pixxelfactory]

Hi @daniantong I just tried the demo i uploaded in IE 11 on Win 8.1 and it works, can you send us a link of your project, so we can check it out? Best regards

[daniantong]

Hello @pixxelfactory Thanks for the reply! I managed to get it to work now. I am now trying to create previous and after arrows that you can click to go to the next section, any idea on where to start? Cheers