Singpolyma

Technical Blog

Peek-a-boo and Scrolling

Posted on

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;
</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;
</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)

19 Responses

Anonymous

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….

cikal61

this hack is useful for my blogroll…..
thanks man!

Anonymous

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

Singpolyma

@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…)

Anonymous

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!

Anonymous

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.

Anonymous

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.

Anonymous

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.

Alain

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).

cikal61

hi stephen….

i have been using some of ur hacks with my blogs,

recently i change my blog template and try to use ur peekaboo linklist & html, but i got some problem….

in my blog it’s not peekaboo, its just displayed like usual….

do u know where’s the problem is?

Anonymous

Hi Stephen, I think there’s a bug. After implementing peek-a-boo (linklist, labels), they seem to take their style direction as links instead of h2 in Firefox. They’re fine in IE, Safari and Chrome. Love them in all other ways. Thanks.

Sunny

Hi Stephen,

I think there’s a bug. After implementing these, in Firefox they seem to take their style direction from links rather than h2. They look fine in IE, Safari and Chrome.

I’m also having difficulty implementing these when I “add element” at Blogger on the layout page. I haven’t been able to get them to work for video bars and slideshows. Any suggestions on what I’m doing wrong? Or do they only work on List, Label, HTML types and not on Video, Bloglist, etc.? Or, are Video, Bloglist, etc. types to be done with the HTML?

I love them, by the way.

Thanks,

Sunny

Anonymous

thank you thank you !!!! I spend many times to find that, i know it was called peek a boo in english…

JoongSeob Vito Kim

Hello, singpolyma,

I appreciate your greasemonkey script.

‘Blogger del.icio.us publishing and post categorizing helper (with trackback) for the new Blogger’

It’s very convenient script!!

I tried to use it.

It’s work well on old post editor.

But unfortunally it’s not work on new post editor.

Then I modified your script for working on new post editor.

Now it’s working well.

Could I distribute it?

Best regards,

JoongSeob Vito Kim

Stephen Paul Weber

Yes, definitely! I don’t recall what license that script specifically is under, but IIRC it’s nominally CC-BY-SA. Feel free to license your modifications under any Free Software license and release them. Please let me know when you do so I can link to you!

Leave a Response