programmatically scrolling a set of divs inside a parent div

Question

I have a parent div that is filled with multiple child divs (see here for what I'm talking about http://garyoak.com/images/MgMenu.png ). I'd like to be able to navigate it with keyboard only, so I was looking for a way to scroll the child divs up or down when the user pushes past the visible elements. I can figure out when the user has done that without a problem, but I'm not sure how to actually scroll the inner divs up/down. I have jquery available and can add extensions to it without a problem. I know of jquery plugins such as scrollable and carousels, however I'm hoping there is a much simpler way to do this.

the html ends up looking like this:

    <div id="MaigcPanels" class="MagicPanels">
        <div id="MagicPanel0" class="MagicPanelSelected"><div class="Ice"><div class="MagicName">Blizzara</div><div class="MPCost">36</div></div></div>
        <div id="MagicPanel1" class="MagicPanel"><div class="Fire"><div class="MagicName">Fire</div><div class="MPCost">15</div></div></div>
        .... (rest of panel divs)
    </div>

the first div has MagicPanelSelected as its class as it's the currently selected div. I can guarantee that whatever the active/important div that I need to be displaying will always have this class.

In terms of usage scenario, I'm using this to design menus for a C++ game (so several pre-defined variables are being pushed into the page which is then rendered them via awesomium). This is why I'm looking to do this without the use of the mouse. Awesomium is based off a fairly recent build of Chrome, so the solution does NOT need to be cross-browser compatible, as long as it works on Chrome.

I can guarantee fixed length for the size of the parent div and child divs (once I decide on the appropriate length), however the number of MagicPanel divs may be loaded into the parent MagicPanels div at any one time range from 0 to 120+. I have variables available to tell me how many divs total and how many divs per row there are.

When the user scrolls past the set of divs, I'd like to be able to loop back to the start (either by quickly scrolling back to the top, or by loop the top divs again at the bottom)

If it's important, this is the css for those elements

.MagicPanels
{
    width: 580px;
    height: 160px;
    left: 4px;
    position: relative;
    display: inline-block;
    -webkit-border-radius: 10px;
    border-radius: 10px;

    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
    border-width: 16px 16px 16px 16px; 
    -moz-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -webkit-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    -o-border-image: url(MagicBorder.png) 33 32 33 34 round; 
    border-image: url(MagicBorder.png) 33 32 33 34 round;
    z-index: 1;
    overflow: hidden;
}

.MagicPanel
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    opacity: 0.5;
    display: inline-block;
    position: relative;
}
.MagicPanelUnusable
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    opacity: 0.3;
    display: inline-block;
    position: relative;
}

.MagicPanelSelected
{
    width: 150px;
    height: 30px;
    margin: 0 10px 7px;
    background-opacity: 1.0;
    display: inline-block;
    position: relative;
}

The other CSS classes (i.e. Fire, Ice etc.) just define the gradients/font for the text and have no effect on the layout of the divs.

If anyone knows how to do this, or can give me a good starting point I'd appreciate it.

Thanks

Answer 1

You can set the scrollTop of any dom element like this. I hope this might help you to apply logic in your code.

var valueToScroll = 100;
$("selector").scrollTop(valueToScroll);

//With animation

$("selector").animate({ scrollTop: valueToScroll }, { duration: 200 } );