July 6, 2007

Special effects for Peekaboo posts!

Yesterday, I thought my most popular hack, Peekaboo posts, needs a makeover. A while back, I received a comment that the post expands too quickly when you click "Read more" link. I thought this could be something to improve upon. How about some special effect like Fade In/Fade Out? You got it! I have integrated the popular javascript effects library script.aculo.us with our peekaboo posts. You can see it in action in my test blog. If you click on "Read more", the full post appears gradually from nowhere and it fades in nicely if you click "Summary only".

You gotta have it in your blog, right? You can have it with very few changes to your template. I spent a few hours on this and surpassed some limitations of script.aculo.us and (bugridden) IE to get this working in Firefox, IE and Opera. Just follow these steps if you have already installed peekaboo posts in your blog.

Step 1: Add these lines before the /head tag.

<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/prototype.js'/>
<script type='text/javascript' src=
'http://anniyalogam.com/scriptaculous/src/scriptaculous.js?load=effects'/>
<script type='text/javascript'>
var fade = true;
var peekaboo_bgcolor = '#ffffff';
</script>

If your blog's background color is anything other than white, you need to change the peekaboo_bgcolor appropriately for it to work properly in IE. Since most blogs have white background, it should work as it is.

Step 2: Find this portion of code and remove the line shown in red.
   <div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
That's it! Go ahead and impress your readers. Scriptaculous has many more effects like slide down/up, drap/drop etc which I will try to make use of in the future. If you liked this, help me spread the word about bvibes.com (which has 170+ registered users now) by adding the bvibes button to your sidebar as described here.

46 comments:

Kevin said...

Hey Ramani,

That's nice!

What about making it so that you don't have to click "read more", but rather it activates by hovering the mouse pointer over "read more" for a fraction of a second? I tried messing around with this at one point using onmouseover, but I could not get it to delay for a fraction of a second.

What do you think?

StickyKeys Says: said...

This is very cute and works nicely for me. I'm still having trouble with adding text after the cut, I would use it mainly for posting pictures. There are ways around it, but I think it would be a nice addition.

Otherwise it's great!

Ramani said...

Kevin,

I am not a big fan of mouseover causing stuff to popup, because it could popup even if the visitor was just moving the mouse across the page. I would like peekaboo posts to expand only when "Read more" is explicitly clicked. That said, you can try it out for your blog. You could write a function that is called upon mouseover. It should first delay and then call my showFull() function.

Ramani said...

Stickykeys,

You are talking about lj cuts, right? So, do you have the multiple "read more"s in the template? If so, there's no way they can appear in the middle of the post. You have to include one of the "read more" links as part of the post itself. This is because there's no inherent support for cuts in Blogger, unlike LJ.

iEn said...

Ramani! it's working!! so nice and smooth.. trying to translate to my friends too. thanks a lot Ramani :D

Efendi said...

ramani,

i always recommend mootools to everyone as opposed to script.aculo.us :)

the different in size is almost 1/3 ;)

you should try to peek on it ;)

i'm sure you'll like it :D

Ramani said...

Efendi,

Thanks for the info. I didn't know about mootools. I checked their demos but I don't seem to find any feature to fade in/fade out. Can you tell me if they have such a feature?

I kept the javascript load time of scriptaculous in mind and that's why I added the load=effects parameter to load the effects.js only. If it is still slow, please let me know.

Ramani said...

iEn,

Thanks for the translation. I will add a link to your post.

iEn said...

Ramani, do u have any idea how to put smiley/icon everytime we post the entry? Text only maybe we cant atrract the visitors. :/

David Hunter said...

Hi Ramani

I tried this hack and liked it but it broke the other pop up boxes I have on my blog: http://philosophyandbioethics.blogspot.com/index.html

It seemed that step two did the damage although I couldn't figure out why, any ideas?

Cheers
David

arephyz said...

Hi Ramani..

The same effect for peekaboo view in label/archieve page..

I change this code

<a href='javascript:void(0)' title='Expand/collapse this post' style='text-decoration:none' expr:onclick='"javascript:toggleIt(\"" + data:post.id + "\");"'>[+/-]</a>

to this code,

<a expr:onclick='"Effect.toggle(\"" + data:post.id + "\");"' href='javascript:void(0)' style='text-decoration:none' title='Expand/collapse this post'>[+/-]</a>

and the result here (my test blog)

AmeyJah said...

hey ramani,
can you modify it a bit to apply this hack only for label post.
here is what I mean to say?

Whenever User clicks any label (get to the label page through search engine)
http://techmake.blogspot.com/search/label/blogging
he will see short summary of the post (say first100 words) and then read more link to the post pages (or this fade in/out feature) to eanable him to read rest of the post.

morinn said...

wow you're a genius! ;)

Brainiac said...

Ramani efendi is right.
Scriptaculous is, more, more, more size.
Mootools
those that knows mootools, leave scriptaculous, mootools is considered better.
Less size, can to unload by parts (single those that you need), more documentation.
DEMOS MOOTOOLS
Fish Eye Menu Mootools
Link list Mootools, interesting for neo template
cool menu with mootools
Effects (Fade, Appear, Puff, etc, etc) for Mootools, use this extension MOORD.IT
to see when blogger hackers you are decided to use these tools, like Mootools
(Sorry for my bad, bad, english)
My neo template test blog

Brainiac said...

Sorry, I have forgotten

"I checked their demos but I don't seem to find any feature to fade in/fade out. Can you tell me if they have such a feature?"

Use MOORD.IT extension for Effects, etc, etc!!

Effects 1
Effects 2
Effects 3
Effects 4

And more!
Sorry my bad english :(

StickyKeys Says: said...

Hello Ramani!

Yes, I was wanting the "Read More" function to act as an eljay cut. Not necessarily that there could be two in one post, but mostly so I could write around it.

More like a "click to see the answer":

"Here is some text. To see more text click below"

"Click Here"
(Here is the text you will see when you click, "click here")

Here is the rest of the text after the "click here" portion"


Now I get that, only instead of the "click here" text appearing in the middle of the block of text (where the block of text it's hiding is) it appears at the bottom of the post. When I click it the text appears in the correct place, but the link does not.

Is there anyway to fix the position of the "click here" dialogue so instead of appearing only at the bottom of the post it can appear where it's typed?

I hope this makes sense, I can make screencaps if you need, my test post is here though:

http://shadystix.blogspot.com/2007/07/test-post-delete-soon-disregard.html

Ramani said...

ien, do you want smilies within your posts? I had already written once about aditya's smilies hack.

David, Looks like you reverted back to the previous version. If you have a test blog, can you illustrate what's happening so that I can check?

Ramani said...

ameyjah,

have you tried my label page peekaboo hack described in this post?
http://hackosphere.blogspot.com/2006/09/peek-boo-view-of-posts-in-label-pages.html

It doesn't show post summary but hides the entire post showing only the title. And as you can see arephyz has described how to use fade in/fade out effect with that hack in one of the comments here....

Ramani said...

Brainiac,

Thanks for the detailed info! Yes, I will check out moo.rd and if it works better, I will switch over to that.

arephyz, that's fast! I will make sure it works in all browsers and then announce it here. I might also switch to mootools as it seems to be the preferred framework.

Aditya said...

Mootools is your friend my friend! :)

|ch|baN said...

Hey Ramani! can u help me out with the background color in my blog after clik read more. please read post titled Happy Birthday Ainun. i really appreciate it.

|ch|baN said...

can we make it transparent? it looks a little bit ridicolous. http://myazizy.blogspot.com

Deepak said...

I've encountered one problems in mootools. For slidein effects and the like, it doesn't do so in a single smooth motion. It frames about 80% of the time (in my office PC, which is kinda low on resources)
I've felt that scriptaculous scores in that matter. It is a matter of trade-off.

Ramani said...

Deepak,

Thanks for the info. Actually, I couldn't make this work with mootools. So, I am sticking with scriptaculous.

|ch|baN,

You don't have the fade effect anymore. Can you add the line to get back the effect as described in my latest post? I will check it again after that.

firulay.com said...

Hello, thanks for your hacks. is there a way to make it go the post link instead of expanding the post, the reason I asked is beacause I added adsense to my posts, but you won't see it unless you click on the post title.

hope you can help,
thanks again.

Budhie said...

it's work at my black template , thansk for good work ramani

http://budihlm.blogspot.com

David Hunter said...

Hey Ramani, sorry missed your reply my test blog is here: http://david-hunter.blogspot.com/

It is quite a mess. However if you look at the thing on the left side bar called the motherlode, when you click on it it should pop out, you can see it in action here: http://philosophyandbioethics.blogspot.com/index.html

However once I added your hack to the page all of my popup boxes in the side bar stopped working.

If you have any thoughts that would be great, thanks for the great peekaboo posts hack btw.

Cheers
David

Moneymonk said...

I followed the peek a boo instructions your alert did not go away

What am I doing wrong?

Budhie said...

hi ramani , why today my readmore and
my special efect peekaboo post cannot run again ? something wrong there ?

please review my blog at http:// budihlm.blogspot.com

thanks for your good work

Payeng said...

Ramani Bhai..

First let me say that... Your Hacks Rock..!!

The Special Effects worked quite well for a few days.. but today suddenly something went wrong with the "Peekaboo Posts".. the posts with Peekaboo effect just wouldn't work.

I removed the special effects hack and now the "Peekaboo" works just fine sans the "Special Effect" of course..

It's sad because I loved the "Special Effect Peekaboo Hack".. Can you do something..??

MelbCity said...

Hi I am interesting in applying the fade transition hack but I am not too keen on accessing code that is reliant on another server. Better that it is either hosted on blogger or built in to the template.

Can you publish the full script so we do not have to link to a remote site. it also provides us with a look at how you have implemented the hack and as such enables suggestions for improvement

Thanks again.

Ramani said...

Melbcity, You need to host scriptaculous somewhere for this hack to work. It's a lot of code.

David Hunter said...

How you are finding time for helping me while dealing with all the hassles at the moment, I have no idea, you are a good man :)

Anyway you asked what happens if I use the normal peekaboo post well it works perfectly fine then, the expanding boxes expand normally you can see this here: www.philosophyandbioethics.blogspot.com

It doesn't matter too much though, I like the special effect, but it isn't needed. But I figured you might appreciate the puzzle, and it may have implications for others as well.

Cheers
David

Ramani said...

David,

Yeah, it's a puzzle. A tough one too because I don't know the scriptaculous code fully. I may not be able to get it working for you.

David Hunter said...

Well it is no worries if you no can do, thanks for taking a look at it, and thanks very much for the fantastic blogger hacks!

PS I've just switched my CV over to NEO! You can see it here (although it isn't finished yet): http://davidhuntercv.blogspot.com/

Cheers
David

Ramani said...

One more person fell for Neo :)

Human cause of global warming... said...

I just made a post to the blogger groups for how to create a navbar that leads to individual pages. In theory, your peek-a-boo posts will work well for what I was trying to accomplish.

If you know a hack for having a navbar with multiple tabs I'd be interested in that too.

Never-the-less, thanks for this awesome idea.

Guy

David Dixon said...

Thanks. The hack worked but the expandable part of my post was in a different font. www.charlotteaction.blogspot.com

Andrea Fellegara said...

Your Hack is very nice ! However, could you give me some idea in how to change the text "read more" and "summary" ?

thanks and ciao Andrea

taiko said...

why this code is not compactible fof neo templates?

-bad english-

Brainiac said...

Hello Ramani! i am trying to implement SlideOut and SlideIn (or Toggle) for effects loading LabelPosts div, but can not implement it in your code NeoTemplate should be just a couple of lines but does not work for me:

var mySlider = new Fx.Slide('LabelPosts', {duration: 500});
mySlider.toggle()

Example: http://andrewcavers.com/

tambay said...

Ramani,

I dunno how to thank you but i've been looking for this hack and now that i have copied it to my blog http://pinoymixtambayan.blogspot.com it really worked. You're my saviour!thank you so much and I hope there will be more people who can benefit from your hacks!

Dexter said...

Hi,

I tried doing the read more option you have mentioned, but somehow it is not working on my blog

Madeline Ashby said...

I would love to use this hack on my blog, but I cannot find the post id to eliminate the fullpost restriction. Here's what my post class looks like:

/* Posts
-----------------------------------------------
*/
h2.date-header {
margin:1.5em 0 .5em;
}

.post {
margin:.10px 0 0 0;
border-bottom:1px dashed $bordercolor;
padding-bottom:1.5em;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;
}

.post p {
margin:0 0 .75em;
line-height:1.6em;
}

.post div {
margin:0 0 .75em;
line-height:1.6em;
}

.post-footer {
margin: -.25em 0 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

.comment-link {
margin-left:.6em;
}
.post img {
padding:4px;
border:1px solid $bordercolor;
}
.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

I'm trying to adapt this template.

Thank you so much!

Cidão said...

Ramani

I've just included Peekaboo hack in my blog, but this special effect does not work.
When I click Read more(Leia mais) everything is clear. Nothing appears.

I removed this special effect and it worked well.

I noticed that "'" character in "var peekaboo_bgcolor" changed. Is it allright?

Cidão said...

Ramani, forget my previous comment... IT WORKS!!!!

Thank you!!!! :o)