Question

I would like to somehow “paginate” my scroll function so that I can choose from a list of “tabs/buttons” and it will automatically scroll to that “div/tab”… Here is what I have, this is going through a while statement to generate songs in my database w/each “tab” being its own song…

///PHP///
$x=count($array);
$song .= '
<div class="tab">
   <div id="full">
    <div id="container" style="color:#00234A;"><h1>' . $title . '</h1></div>
    <hr style="margin-bottom:10px;" />
    <div class="transpose" style="background-color:#F3F3F3; border: 1px solid #D1D1D1; font-size:13px; padding:3px 10px; color:#225c7e; margin-bottom:10px;">
//////////HERE IS WHERE I WOULD LIKE THE BUTTONS//////////////////////
    transpose:&nbsp; 
      <a class="transposeUp" id="transposeUp'.$vID.'" title="transpose up" 
        onclick="return false" 
        onmousedown="transposeUp(\''.$vID.'\');">
      <span>&and;</span></a>&nbsp;
      <a class="transposeDown" id="transposeDown'.$vID.'" title="transpose down" 
        onclick="return false" 
        onmousedown="transposeDown(\''.$vID.'\');">
      <span>&or;</span></a>
    </div><br /><br />';
   </div>
</div>

Then my css…

.window{overflow:hidden; width:900px; font-size:14px;}
.space{width:<?php echo $i; ?>px; overflow:hidden;}
.tabs{float:left;}
.tab{float:left; width:900px; display:inline;}

My JS…

$('.scrollable a.left').click(function(e){
  var sz = $('.window');
  sz.animate({scrollLeft: "-=900"}, 300, 'linear');
}, function(e){
  $(sz).stop();
});

$('.scrollable a.right').click(function(e){
  var sz = $('.window'); 
  sz.animate({scrollLeft : "+=900"}, 300, 'linear');
}, function(e){
  $(sz).stop();
});

And HTML…

<div class="mainBodyTable">
    <div style="background-color:white; padding:10px 15px;">                    
        <div class="scrollable">
            <div class="window">
                <div class="space">
                    <div class="tabs">
                        <?php echo $song; ?>
                    </div>
                </div>
            </div>
            <a href="#" class="left">&larr;</a>
            <a href="#" class="right">&rarr;</a>
        </div>
    </div>
</div>

The idea is that there will be boxes as defined by $x and each box will have it’s respective number in it. When its clicked it will scroll to its respective div.
Can someone help at least with direction? Thanks in advance…

Answer 1

To use this solution, you’ll need write your php such that your tabs have class attributes of yourClassSelector and incrementing id attributes that match their associated song.

Something like:

<?php 
    $i = 1;
    $count_of_tabs = // count() or my_sql_num_rows();

    while $i < $count_of_tabs:
       name_tab("your_tabs", $your_tab_array, $i);
       $i++;
    endwhile;

    function name_tab($tab_id_string, $tab_array, $b) {
       foreach($tab_array as $cur_tab) {
           $output = // insert html;
           $output .= $tab_id_string . $b;
           $output .= // insert more html;
           echo $output;
       }
    }
?>

<script type="text/javascript">

// I adapted this from another post on stackoverflow. I didn't write getOffset.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery('.yourClickSelector').click(function(e) {
  e.preventDefault(); 

  var tabId = jQuery(this).attr("id");

  var songId = jQuery(tabId + '-song');

  var x = getOffset( document.getElementById(songId) ).left;
  var y = getOffset( document.getElementById(songId) ).top;
  window.scrollTo(x,y)
});

</script>

I did not proofread that after I wrote it, so don’t just copy and paste it and plug it in before reading it, please.