Question

Basically I tried to make a horizontal sliding one-page layout.
I struggled for hours and still don’t know what I’m doing wrong.

JQuery and scrollTo are included before <?php wp_head(); ?> (in right order) and I checked twice for possible typos.

Gere’s my html markup:

<div class="nav">
<a class="menu" href="#main">main</a>
<a class="menu" href="#bio">bio</a>
<a class="menu" href="#film">film</a><br>
</div>

<div id="wrap">
<div id="mask">
    <div class="panel" id="main"> </div>
    <div class="panel" id="bio"> </div>
    <div class="panel" id="film"> </div>
</div>
</div>

and here’s the script:

<script type='text/javascript'>
$(document).ready(function() {
$('a.menu').click(function () {

    $('a.menu').removeClass('active');
    $(this).addClass('active');

    current = $(this);

    $('#wrap').scrollTo($(this).attr('href'), 800);     

    return false;
});

});

</script>   

I tried to place this script everywhere on the site, but I still can’t get it to work.

Answer 1

You have the basic idea down but I think the problem lies in how you have your scrollable panel and its container set up.

Using your above code as an example, I have implemented a basic ScrollTo sliding layout:

• Vertical Scroll – http://jsfiddle.net/ZqSSm/1/ – Note how the height of #mask would be 2400px (800px * 3), but only the first 500px are visible.

• Horizontal Scroll – http://jsfiddle.net/ZqSSm/2/ – Note how the width of #horizontalwrap is 2400px, but only the first 500px are visible.

If you need any more help, drop me a line and I’ll do my best! ScrollTo was a headache for me when first using it!

Note that there are also some problems loading the JS files on your website. I don’t know the cause but opening chrome’s developer console or firebug will let you see what’s going on.