UI Modification to jQuery scrollTo: Fade Prev/Next controls when nothing left to scroll.

Question

http://cambridgeuplighting.com/portfolio

I am trying to create a function that will fade the Next and Prev controls for a scrollTo function when the slideshow has reached either end. I have a good start but it doesn't work how I want it to. I need the controls to fade out the click BEFORE it reaches the end. Right now it reaches the end, then the next click (which will not scroll because it's at the end) will fade the control.

Here's my code, thanks alot in advance!

jQuery (please see the above link to the site for HTML and CSS)

 jQuery(function( $ ){
    var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    //set the width of the container depending on how many post items are there
    $('#postContainer').css({'width': containerWidth })
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference)
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        $('.newerEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('.olderEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('+=960', 700 );
        }   
    });

    $('.newerEvents').click(function () {
        $('.olderEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
            //relative position of 0 means the slideshow is at the other end
        if (slidePos.left==0) {
            $('.newerEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('-=960', 700 );
        }
    });
});

Answer 1

I would argue that the desired functionality is unintuitive to the user. Rather than disable a control the user is already using; forcing them to recognize and initiate the use of another control, I would reason that it is more useful to remap this control to a function that is intuitive to the user.

In this case, that would be to allow the user to use this control to navigate through the list in a reverse order. Approach this as trying to provide the user the most useful tool for navigating through your content.

Think of it this way: What is a better way to use/view/sort through a stack of books? Line them up in a row and ask the user to move the row back and forth, or arrange the books on a lazy-susan and allow the user to rotate it?

The metaphor here is more about allowing the user to view the content as an unbroken chain as opposed to a string with ends, and less about visually representing a circle or a row.

An appropriate example of this methodology is represented here: http://www.ndoherty.biz/demos/coda-slider/2.0/

Answer 2

@ greg-J: I agree with your comments on the efficacy of disabling controls. Here is my code that scrolls back to the first element once you've reached the end of the list. View the example @ http://cambridgeuplighting.com/portfolio

jQuery(function( $ ){
        var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    $('#postContainer').css({'width': containerWidth })
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('#slideScreen').scrollTo('-='+containerWidth, 1000 );
        } else {
            $('#slideScreen').scrollTo('+=480', 500 );
        }   
    });

    $('.newerEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left==0) {
            $('#slideScreen').scrollTo('+='+containerWidth, 1000);
        } else {
            $('#slideScreen').scrollTo('-=480', 500 );
        }
    });
});