Custom scroolbar for list of images from MySQL

[ayachuca]

Hello,

 

Right at the beginning, sorry if I chose wrong part of the forum, please move this topic if it's too bad.

 

I'm getting a lot of comments from visitors on my current scrollbar that really sux!

What's the problem?

 

 

I use custom scrollbar in table's cell (yup, it's an old page, I'm just redesigning it into DIVs) for listing works from MySQL.

 

Developer who made me website did it like this:

- one page, for example works.php is for all sections I'm showing there;

- only difference is: works.php=photos, works.php=3d, works.php=web...;

 

Problem is that, by default (defined font size in CSS), scroll list can only show, for example 30 names in it. When someone scrolls down the list and click on some work (outside that 30 names) and when visitor opens that work, scroll bar reset the position where visitor was when he/she clicked on the name of the work. So, it happens a lot of times that there are a more then 100 works/names in that scroll list and you can imagine how it looks checking work by work and always having to scroll again and again just for next work.

 

This is code that to all that (pls ignore table tags):

 

 

           <table width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top">
            <a href="#" onmouseover="scrollDivUp('display')" onmouseout="stopMe()"> <img src="pic/trougao_nadole.jpg" width="21" height="11" class="skrol" /></a></td>
          </tr>
	<tr>
	<td>
	<div id="display">
            <?php
            include("includes/database.php");
            if(isset($_GET["cat"])){
              $category = $_GET["cat"];
            $resultNazivi = mysql_query("SELECT ime,id FROM radovi WHERE kategorija='$category' ORDER BY id DESC ") or die(mysql_error());
            $resultPrviId = mysql_query("SELECT id FROM radovi WHERE kategorija='$category' ORDER BY id DESC ") or die(mysql_error());
            $redPrviId =  mysql_fetch_array($resultPrviId);
            if(isset($_GET["id"])){ $id=$_GET["id"]; }else{ $id= $redPrviId["id"] ;};
            $resultFile = mysql_query("SELECT * FROM radovi WHERE id='$id'") or die(mysql_error());
                $redFile = mysql_fetch_array($resultFile);
		while( $redNazivi = mysql_fetch_array($resultNazivi)){
            ?>
            <a href="display.php?cat=<?php echo $category; ?>&id=<?php echo $redNazivi["id"];?>"> <br />
            <?php echo $redNazivi["ime"]; ?> </a>
               <?php
            }
            }
            ?>
            </div>
            </td>
		</tr>
          <tr>
            <td valign="top"><a href="#" onmouseover="scrollDivDown('display')" onmouseout="stopMe()"> <br />
              <img src="pic/trougao_nagore.jpg" width="21" height="11" class="skrol" /></a><br /></td>
          </tr>
        </table>

 

 

Using this JS for scrollbar:

 

 

<script type="text/javascript">
scrollStep=3
timerUp=""
timerDown=""
function toTop(id){
document.getElementById(id).scrollTop=0
}
function scrollDivDown(id){
clearTimeout(timerDown) 
document.getElementById(id).scrollTop+=scrollStep
timerDown=setTimeout("scrollDivDown('"+id+"')",10)
}
function scrollDivUp(id){
clearTimeout(timerUp)
document.getElementById(id).scrollTop-=scrollStep
timerUp=setTimeout("scrollDivUp('"+id+"')",10)
}
function toBottom(id){
document.getElementById(id).scrollTop=document.getElementById(id).scrollHeight
}
function stopMe(){
clearTimeout(timerDown) 
clearTimeout(timerUp)
}
</script>

 

And this DIV and class style:

 

#display{
width:200px;
height:550px;
overflow:hidden;
text-align:left;
}
.skrol {
color: #FFF;
text-decoration: none;
border-top-color: #FFF;
border-right-color: #FFF;
border-bottom-color: #FFF;
border-left-color: #FFF;
}

 

 

 

Question is:

Can anyone help me to fix this, to make that scrollbar remembers position of last clicked work in the list?

Or to give me some samples, where to look, anything similar what I need - anything.

If you need something more from the code, just tell me, I will provide.

I'm a dummer for anything that's "above" HTML/CSS.

 

Thanks