Table of Contents Autoscroll Gadget. ~ The Blog Doctor.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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>

In above code change "MYBLOG" to the url (subdomain) of your blogspot and save.

Enjoy!

13 comments:

tomat said...: Hi, Vin. It's a very interesting post, as usually.

I have a modified versión of the Toc gadget from Beautiful Beta so I'd like to know which is the code you have added in order to make the new autoscroll.

Another doubt I have is if is it possible to maintain static the header of the Toc in order to use the sort/filter capabilities it has that are lost (hidden at the top) with the autoscroll.

And the last one: is it posible to begin again the autoscroll cycle after reaching the end of the posts having a continuous scrolling?; January 22, 2009 1:05 AM
Vin said...: Tomat,

You can get the scrolling code here.

The rest will have to be investigated.; January 22, 2009 8:15 AM
Ginger said...: I've done everything you requested to put it on my blog, but all I'm getting is an empty white box. =(
Any idea what's wrong?; January 22, 2009 9:06 PM
Vin said...: Ginger,

You do not appear to have any posts on your blog! Login at Blogger.com and click New Post button on Dashboard to create posts.; January 23, 2009 7:18 AM
kostasg said...: it remains blank Vin
I tried the rorating totle gadget too.
The same thing....pure white
Help!; January 23, 2009 3:23 PM
Vin said...: kostasg,

Where is it exactly in the blog? I do not see it?; January 23, 2009 6:33 PM
kostasg said...: Sorry .I removed it cause the gap as too big for me to bear it :)
I'll put it back on for you to check it out.; January 23, 2009 8:27 PM
Devasish said...: hi,

Do u've any similar style wth javascript?; January 26, 2009 5:12 PM
Vin said...: Devasish,

It is already in Javascript!! Look at the code in above post.; January 26, 2009 5:54 PM
overload said...: Hi!
I too got a white screen.Is it because of the feeds? Im using RSS. Please help.; January 30, 2009 10:38 PM
Vin said...: overload ,

Try it again. Also check out this Google Gadget which lists ALL posts in blog.; January 31, 2009 7:16 AM
Evergreen Songs said...: Used this on my blog and works great; April 18, 2009 4:47 AM
Noname said...: onmouseout="startit();"

Hi, i would like to ask. Wasn't the onmouseout supposed to be ="start();" ?; December 12, 2011 1:18 PM