Anyway to select/focus current div/element using serialscroll for further scripting?

Question

I'm building a horizontally scrolling website and using jquery serialscroll to navigate. I've bound the keyboard arrow keys (left and right) and buttons on the page to scroll to the next element using div tags. The effect works quiet well but I was wondering if there is a way to select/call the current element/div for another script?

Basically, I'd like to bind the up/down arrows, on first press to expand the div down, and then subsequent presses (probably using serialscroll again) to scroll up and down this div.

I'd really appreciate if anyone could help me out with this. Maybe serialscroll or scrollto are the best plugins to use and I'd welcome any alternatives.

As I'm working on my first site, I'll probably be asking a lot of questions so please bear with me. My knowledge of jscript is basic, but I'm learning very quickly. Thanks in advance.

Code sample:

$('#maincontent').serialScroll({
    items:'#slide',
    prev:'.leftArrow',
    next:'.rightArrow',
    offset:-220,
    start:0,
    duration:500,
    force:false,
    stop:true,
    constant:false,
    lock:false,
    cycle:false,
    easing:'easeOutQuart', 
    jump: true 

});

Just an update that I was able to answer my question`by altering the code:

var $nav = $('#slideshow li');


$('#maincontent').serialScroll({
    items:'li',
    prev:'.leftArrow, div.logo#logo',
    next:'.rightArrow',
    offset:-220, //when scrolling to photo, stop 230 before reaching it (from the left)
    start:0, //as we are centering it, start at the 2nd
    duration:500,
    force:false,
    stop:true,
    constant:false,
    lock:false,
    cycle:false, //don't pull back once you reach the end
    easing:'easeOutQuart', //use this easing equation for a funny effect
    jump: true, //click on the images to scroll to them
    navigation:$nav,
    onBefore:function(e,el,$p,$i,pos){
    $nav.removeClass('newclass');
    $nav.eq(pos).addClass('newclass')},

});

This allows be to add a new class to the current element and I can use jscript to alter it accordingly.

Answer 1

I added an update to my comments above that helped add a class and select the current element for manipulation.

Answer 2

Can't say for sure since I can't see the code. I haven't tried serialscroll before, but the way you described it, I would just set some global variable to contain the current div. Then, get the height of the object via outerHeight to see if it's been expanded or not.

Add a fiddle and maybe I can help some more.

Answer 3

    onBefore: function (e, elem, $pane, $items, pos) {
     $('.item').removeClass('active');
     $('.item').eq(pos).addClass('active');
     },