Home/ Questions/Q 8072103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T13:54:37+00:00

I want to create a banner scrolling function for my homepage. I am not

  • 0

I want to create a banner scrolling function for my homepage. I am not too sure of which programming language to use here. I want to code something similar to: http://www.squidfaceandthemeddler.com/. But I want the footer to remain at the same position while the user scroll the table. Is it possible to get that result? I have create a simple tables and 2 images for the user to click on

here is my code for the tables:

<div id="banner" style="height:750px; width:600px; overflow:scroll;" > 
    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_1.php"><img src="banner1.png"/></a></td> 
    </tr> 
    </table> 

    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_2.php"><img src="banner2.png"/></a></td> 
    </tr> 
    </table> 

    <table width="750px" height="600px"> 
    <tr> 
    <td><a href="sale_3.php"><img src="banner3.png"/></a></td> 
    </tr> 
    </table> 
</div>

and this is the upwards and downwards button for the scrolling:

<table width="750px" height="30px"> 
<tr> 
<td align="right"><img src="images/up_arrow.png"/><img src="images/down_arrow.png"/></td> 
</tr> 
</table>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you put the contents inside two div tags you can use CSS to clip the
    outer div and “scroll” the inner div by scripting its CSS “top” value, thus:

    <html><head><style>
#contents{ 
 position: relative; top: 0; left: 0; width: 100px; height: auto;}
 #scrollable{ overflow: hidden; width: 100px; height: 100px; border: 1px
solid black;
 }
</style>
<script>
var t = 0;

function up()
{
 t += 10;

 with(document.getElementById("contents"))
 {
   if (t > 0)
    t = 0;

 if(style)
    style.top = t + "px";
 else
  setAttribute("style", "top: " + t + "px");
}
}

function down()
{
 t -= 10;

with(document.getElementById("contents"))
{
  if(t < -clientHeight)
      t = -clientHeight;

  if(style)
       style.top = t + "px";
  else
       setAttribute("style", "top: " + t + "px");
  }
 }
</script></head>
   <body><table><tr><td><a href="javascript:void(0)" onclick="up()">up</a></td>
   <td rowspan="2"><div id="scrollable">
     <div id="contents">scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
        scrolling content scrolling content scrolling content scrolling content
   </div></div> 
       </td></tr><tr><td>
     <a href="javascript:void(0)" onclick="down()">down</a></td></tr></table>
    </body></html>

    take the help of this edit your code

    • 0