TrickBlogger: Table of Contents Autoscroll Gadget.

Here is another gadget for those who wish to display all their posts in as little space as possible. The Random Rotating Post Gadget shows only one post at a time. The Table of Contents Autoscroll gadget shows all posts in you blog scrolling automatically in a small place. You can see it in action above the posts in Tips for Bloggers. (Wait for page to load fully) See picture below :

The Table of Contents is from Beautifulbeta. To save space I have added autoscrolling function to it. Features of the gadget are : .....................

FEATURES

1. Shows all Posts in blog.
2. Scrolls the posts list upwards automatically.
3. Mouseover will pause the autoscrolling.
4. Saves space.

INSTALLATION

To install it in your blog follow these steps :

1. Login at Blogger.com.

2. Click Layouts link on Dashboard.

3. Click 'Add Gadget' link in sidebar on Layout>>Page Elements subtab.

4. In popup window scroll down and click Html Javascript gadget.

5. In Contents paste the following code :

<script type="text/javascript">
// <!--
var speed = 2;
function init(){
 var el = document.getElementById("marquee_replacement");
 el.style.overflow = 'hidden';
 scrollFromBottom();
}
var go = 0;
function scrollFromBottom(){
 var el = document.getElementById("marquee_replacement");
 if(el.scrollTop >= el.scrollHeight-150){
   el.scrollTop = 0;
 };
 el.scrollTop = el.scrollTop + speed;
 if(go == 0){
   setTimeout("scrollFromBottom()",50);
 };
}
function stop(){
 go = 1;
}
function startit(){
 go = 0;
 scrollFromBottom();
}
// -->
</script>
<script style="text/javascript" src="http://blogging-tips-gadget.googlecode.com/files/TableOfContentsJS.js"></script>
<script src="http://MYBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<script type="text/javascript">showToc();</script>
<style type="text/css">
#marquee_replacement{
border:1px solid #000;
width:100%;
height:250px;
overflow:auto;
background:#fff;
}
#marquee_replacement p.spacer{
height:150px;
}
</style>
<div id="marquee_replacement" onmouseover="stop();" onmouseout="startit();">
<div id="toc">
</div></div><div id="feedGadget">Gadget by <a href="http://www.blogdoctor.me" target="_blank">The Blog Doctor</a>.</div

>>