Question

I have written a simple jquery script for a content slider. My problem is that the screen always jumps to the top position of the parent div when sliding the content. I’ve tried return false and preventDefault to cope with this effect, but the two just make the script not work anymore, nothing happens when I click the links..

So here is the jquery code:

$(document).ready(function (){

var itemCount = $('.container div').size();
var itemWidth = $('.container div').width();


$('.container').wrap('<div id="AboutSlider"></div>');

$('#AboutSlider').css({'width':'640px', 'overflow':'hidden', 'position':'relative', 'height':'400px'});

$('#AboutSlider .container').css({'width':itemCount*itemWidth+'px', 'position':'absolute', 'height':'400px'});

$('.container .aboutContent').css({'padding-left':'0px'});

$('#AboutSlider .aboutContent').css({'width':'640px', 'float':'left', 'min-height':'400px'});


$('#AboutNav a').click(function(){

        var integer = $(this).attr('rel');

        $('#AboutSlider .container').animate({left:-640*(parseInt(integer)-1)})  

        $('#AboutNav a').each(function(){
        $(this).removeClass('active');
            if($(this).hasClass('button'+integer)){
                $(this).addClass('active')}
        });

    }); 

});

And here the respective html bit:

<div id="Dienstleistungen">
                        <div class="left_column">
                        <h2>Meine Dienstleistungen</h2>
                        <h3>KOMPETENZEN</h3>
                        <ul id="AboutNav">
                            <li><h1><a href="#Kompetenzen" class="button1 active" rel="1" title="Frontend Entwicklung | Sebastian B&ouml;hme">&Uuml;berblick</a></h1></li>
                            <li><h1><a href="#Frontend" class="button2" rel="2" title="Frontend Entwicklung | Sebastian B&ouml;hme">Frontend Entwicklung</a></h1></li>
                            <li><h1><a href="#CMS" class="button3" rel="3" title="Content Management Systeme &amp; Online Shops | Sebastian B&ouml;hme">Content Management Systeme &amp; Online Shops</a></h1></li>
                            <li><h1><a href="#SEO" class="button4" rel="4" title="Suchmaschinenoptimierung (SEO) | Sebastian B&ouml;hme">Suchmaschinenoptimierung (SEO)</a></h1></li>
                            <li><h1><a href="#ScreenDesign" class="button5" rel="5" title="Screen Design | Sebastian B&ouml;hme">Screen Design</a></h1></li>
                            <li><h1><a href="#Hand" class="button6" rel="6" title="Alles aus einer Hand | Sebastian B&ouml;hme">Alles aus einer Hand</a></h1></li>
                        </ul>
                        </div>

                        <div class="container">

                        <div id="Kompetenzen" class="aboutContent right_columns">
                            <h1>&Uuml;berblick</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="Frontend" class="aboutContent right_column ">
                            <h1>Frontend Entwicklung</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />  
                        <div id="CMS" class="aboutContent right_column ">
                            <h1>Content Management Systeme &amp; Online Shops</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="SEO" class="aboutContent right_column ">
                            <h1>Suchmaschinenoptimierung (SEO)</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="ScreenDesign" class="aboutContent right_column ">
                            <h1>Screen Design</h1>
                            <p>Phasellus in massa. Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                    <hr />
                        <div id="Hand" class="aboutContent right_column">
                            <h1>Alles aus einer Hand</h1>
                            <p>Curabitur dolor eros, gravida et, hendrerit ac, cursus non, massa. Aliquam lorem. In hac habitasse platea dictumst. Cras eu mauris. Quisque lacus. Donec ipsum. Nullam vitae sem at nunc pharetra ultricies. Vivamus elit eros, ullamcorper a, adipiscing sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                            <p>Teng sit amet, porttitor ut, nibh. Maecenas adipiscing mollis massa. Nunc ut dui eget nulla venenatis aliquet. Sed luctus posuere justo. Cras vehicula varius turpis. Vivamus eros metus, tristique sit amet, molestie dignissim, malesuada et, urna.
                            </p>
                        </div>
                        </div><!-- AboutSlider -->
                    </div><!-- Dienstleistungen -->

somebody got any idea? Thanks a lot in advance!!

Answer 1

Looks like it works fine to me with preventDefault:

$('#AboutNav a').click(function(event) {
    event.preventDefault();

    var integer = $(this).attr("rel");

    $('#AboutSlider .container').animate({
        left: -640 * (parseInt(integer) - 1)
    })

    $('#AboutNav a').each(function() {
        $(this).removeClass('active');
        if ($(this).hasClass('button' + integer)) {
            $(this).addClass('active')
        }
    });

});

Working here: http://jsfiddle.net/79Rzh/

Other notes:

You can replace this code:

$('#AboutNav a').each(function(){
    $(this).removeClass('active');
    if($(this).hasClass('button'+integer)) {
        $(this).addClass('active')
    }
});

With this:

$("#AboutNav a").removeClass("active");
$(this).addClass('active');

• Also consider caching selectors you use over and over (var $this = $(this);).
• Additionally, make sure and pass a radix parameter to parseInt() (parseInt(integer, 10)