Singpolyma - Technical Blog: Peek-a-boo and Scrolling

2006-12-23

body

With some more inspiration from this man, and some help from this post I have created alternate versions of my peek-a-boo links lists and peek-a-boo HTML widgets. These ones, when expanded, are a 200-pixel-high box with a scrollbar. For those extra-long lists ;)

Link List (Click Title to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.


<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/a>');
//]]>
</script>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;height:200px;overflow:auto;">');
//]]>
</script>
        <ul>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
        </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
        <b:include name='quickedit'/>
      </div>
  </b:includable>
</b:widget>

Link List (Click [+/-] to Expand)
Note about installation : if you put this code into your template more than once at a time (for multiple lists) you must change the id='ALIST' (bold in the code) to id='BLIST' on the second list, etc. This code should go inside the section for your sidebar. Then, after saving, go to 'Page Elements' to customise its contents.


<b:widget id='ALIST' locked='false' title='List Title' type='LinkList'>
<b:includable id='main'>
<script type='text/javascript'>
//<![CDATA[
if(typeof(rnd) == 'undefined') var rnd = '';
rnd = Math.floor(Math.random()*1000);
rnd = 'id-' + rnd;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:left;margin-right:5px;">[+/-]<\/a>');
//]]>
</script>
      <b:if cond='data:title'><h2><data:title/></h2></b:if>
      <div class='widget-content'>
<script type='text/javascript'>
//<![CDATA[
document.write('<div id="' + rnd + '" style="display:none;overflow:auto;height:200px;">');
//]]>
</script>
        <ul>
            <b:loop values='data:links' var='link'>
              <li><a expr:href='data:link.target'><data:link.name/></a></li>
            </b:loop>
        </ul>
<script type='text/javascript'>
//<![CDATA[
document.write('<\/div>');
//]]>
</script>
        <b:include name='quickedit'/>
      </div>
  </b:includable>
</b:widget>

HTML (Click Title to Expand)

HTML (Click [+/-] to Expand)

Tags:

Singpolyma at Saturday, December 23, 2006 | 11 | 0 Backlinks | permalink

There is an RSS Feed for comments on this post.

Comment at 23 December, 2006 11:31 by Anonymous

body

Excellent!

I knew you'd be able to turn around something like this... and fast!

Hey, they don't call you the "Technical Blog" for nothing! :)

Your hack is like finding another gift in my stocking...

Merry Christmas, my friend,

Alex

P.S. By the way, have you ever done a post on how you set up your ingenious comments system? I like the fact that you have Blogger security along with Haloscan capabilities, in addition to the very cool, "see as you type feature" on the main page....
Comment at 23 December, 2006 12:26 by Singpolyma

body

The closes thing to this comment system that you'll find for Blogger BETA is http://singpolyma-tech.blogspot.com/2006/12/comment-forms-and-blogger-beta.html
Comment at 02 January, 2007 14:27 by cikal61

body

this hack is useful for my blogroll.....
thanks man!
Comment at 02 January, 2007 17:01 by Anonymous

body

Peek-a-Boo Link and Scrolling in PopUp Windows

Hi,

Thank you for your hacks and the information for the “Confused”.

I have recently implemented your “Peek-a-Boo Link List” and “Peek-a-Boo and Scrolling” hacks on my New Blogger blog. It works perfectly well. These hacks are so useful and neat. Thank you!

I wonder if it is possible to also have the “Peek-a-Boo” and “Scrolling Box” features with the Link Page Element instead of only the List Link Page Element of New Blogger. With the Link Page Element, the listed links open in PopUp Windows. The possibility to open my listed links in PopUp Windows is very useful to me.

Can you help me?

Alain
Comment at 02 January, 2007 19:05 by Singpolyma

body

@Alain -- not sure I understand. You want to have each link open in a new window? Yes, I can do that... mmm... yet another version of this hack. Do you want with or without scrolling on that one? (Perhaps I should just make a wizard for it...)
Comment at 03 January, 2007 07:38 by Anonymous

body

Peek-a-boo links lists versions with each link opening in a new window

Hi Singpolyma,

Thank you for taking into consideration my needs.

Yes, I want to have each link open in a new window. (Like with the "Link" Page Element of New Blogger). Is this clearer?

If you give me the choice between 1) with scrolling or 2) without scrolling, I would prefer the scrolling option. But, I certainly could make use of both options: with and without scrolling.

Wizard? Not sure of what you are planning! The codes, installation notes and references for the "Confused" provided on your technical blog have worked just fine for me so far. The KISS principle is what will work best for me.

Happy New Year 2007!
Comment at 10 January, 2007 10:19 by Anonymous

body

Hi Singpolyma,

I have implementes your "Peek-a-boo and Scrolling Link List Hack" in my blog with nice results, but I have some questions:

Can I choose beetwen "with scrolling" and "without scrolling"?

How can I use the same hack for other sidebar widgets like "HTML/Javascript", "Feeds", "Labels", "Archive", etc...?

Thanks.
Comment at 10 January, 2007 10:24 by Anonymous

body

Hi Singpolyma,

I have implementes your "Peek-a-boo and Scrolling Link List Hack" in my blog with nice results, but I have some questions:

Can I choose beetwen "with scrolling" and "without scrolling"?

How can I use the same hack for other sidebar widgets like "HTML/Javascript", "Feeds", "Labels", "Archive", etc...?

Thanks.
Comment at 10 January, 2007 10:25 by Anonymous

body

Hi Singpolyma,

I have implementes your "Peek-a-boo and Scrolling Link List Hack" in my blog with nice results, but I have some questions:

Can I choose beetwen "with scrolling" and "without scrolling"?

How can I use the same hack for other sidebar widgets like "HTML/Javascript", "Feeds", "Labels", "Archive", etc...?

Thanks.
Comment at 10 January, 2007 11:32 by Singpolyma

body

@Diario -- Please see this page for answers to your questions :)
Comment at 21 January, 2007 11:01 by Alain

body

Peek-a-boo links lists with each link opening in a new window-Wow!:Thanks for your response to my request. I have missed your postPeek-a-Boo Widgets related to this particular variation of Peek-a-boo links lists. I was mainly watching for potential developments from the comments’ thread in this post. I really enjoy the two variations (standard and scrolling) of this specific widget and the automatic installation «in just a few clicks» feature. These two widgets work perfectly well on my blog so far. Ooooh Yes, that’s the way I like it.! Thanks Stephen for the extras (the standard widget + the installation wizard).

2006-12-23

Trackbacks:

0 Backlinks

Syndication

FreshTags

Recent Comments

Archives