Did you like the Super-Peek-A-Boo post? Then I am sure you will like this improvement as well! After collapsing a post, it auto-scrolls back to the top of the post. That's nice, isn't it? You can see it at work now if you expand and collapse the post you are reading now.
One of the comments I received on the Super Peek-A-Boo post is, that after collapsing a post you end up reading another post, that 'moves up' into view because you collapse the post.
So I sleft a few nights on it, and came up with a very simple solution to this (cosmetic) problem. You need to make 2 slight adjustments.
One is to the 'post'-includable. If you followed my instructions on peek-a-boo posts, you gave the post-body <div> an id. You have to move this id to the top of the includable like this:
<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id' >
We will use this id to scroll back to, so by placing it at the top we assure that we scroll back to the top of the post (and not to the top of the body, which would leave out the post title).
Secondly, we need to adapt the javascript hideFull() function, by adding a tiny line of code at the end:
post.scrollIntoView(true);
Thats all to make it work!
In order to adhere to common standards I asked Ramani to update his Hackosphere.js-file to include the new line of code. So be patient until Ramani releases the new file.
Posts
4 New Gadgets from Blogger Buster
3 days ago
This is what people say:
Hans,
I was wondering if scrollbar etc will fit in a blog, but your solution is neat! I have updated hideFull() function. For those who haven't moved expr:id up as you have suggested, the summary will be scrolled into view, which itself is good. If they move expr:id, it's even better.
I will write about this hack today.
okay, that's good!
Can you improve this hack to a non-beta too?
Hans,
Thanks for your persistence in following through with this hack to make it complete and very useful. Now I can tailor my posts to show the readers exactly what I want them to see. You and Ramani make a great team!
Cheers,
@hoctro: thanks!
@raquel: read the update on the non-beta hack there.
Hello Hans. This is a very good hack. I had noticed the problem and sometime got lost in my own blog but now, no more. I also checked out your three column template. It very cool!
vivek, thanks!
Hi Hans. I've just applied your Super Peek-A-Boo on my Blogger without the improvement of this post. I found that it can autoscrollback, but leave out the post title. What should I do? By the way, it's very cool.
Ada, you have to put the code expr:id='"post-"+data:post.id' inside the <div class="post uncustomized-post-template"> and not inside the <div class="post-body">
Carefully read the instructions on my post. You just have to move up the expr:id part several lines
Hans,
It is so strange that I can't find div class='post uncustomized-post-template' in my template. There is only div class='post' under b:includable id='post' var='post'. Is ther something wrong? Thanks for your help.
Hi Frank, it might have to do with the template you are using. But what you have to do is this.
First, find the <b:includable id="post" var="post">. Directly below it you will find a <div>-element, with a class that indicates that it is a post. I suppose that your classname differs from the classname in the template I use.
This first <div>-tag is above the bloggercode that displays the posttitle (you will see lines with data:post.title in it.
Anyway, at the end of this first <div>-tag you have to append the expr:id='"post-"+data:post.id' statement. That should make it work.
Tech stuff, if you are interested in the 'why': your post is between two <div>-tags. The id-thing gives a unique number to your post, something like "post-54209812". This unique number is used by our hack to 'know' which post it has to expand or collapse. And after collapsing your browser-window uses the unique number to scroll the beginning of the post to the top of the window. That is why the id has to be put at the top of the post. (yawn) :)
Hope you can get it fixed now.
Thanks for the hacks, Hans!
@trevor: you are welcome!
First, I would like to thank you for sharing this hacking tip. It is awesome!
However, I have noticed that when I click on the "Older Posts" (from the bottom) on your main page to view previous postings, the "Read More..." link still shows up on some of the shorter posts which are not supposed to have post summary at all.
Is there a way to work around it?
Your help is greatly appreciated.
@Cici: Thanks, I did not notice this. I will look into it. The 'readmore' and 'collapse' links are hidden by a js-function called checkFull. It seems this function is not called properly when we are on a next page. The same happens with the social bookmarks bar, where the text before the buttons is set to a value by a javascript-function, in stead of the dummy-text 'Loading...'.
Thx So Much!!! =)
Hi, Hans. Do you use Google Analytics? This "ReadMore" works fine in my blog, but how to modify the hack for Analytics tracking function?
For example, I add " urchinTracker("/OnClick/ReadMore/" + id); " in the showFull() function in hackosphere.js so that google analytics can track every readmore click event.
But the question is that : How to modify the hack to get the header of the post which has to expand not just id?
I want "/OnClick/ReadMore/Improved Super Peek-A-Boo Post" not "/OnClick/ReadMore/post-54209812"
Thanks~
@seankuo: the id we use in this hack is constructed of a string ("post-") and the blogger post id, that is stored in the data:post.id-field. You could construct your own id using only the data:post.title field. I did not try this out, but I guess it will work.
Hans, I have applied your hack and it works great. However, I still can't apply the Improved Super Post element.
Thanks to an example it's fairly easy to find the right spot to place the [expr:id='"post-" + data:post.id'] element.
I'm a javascript newbe and I can't figure out where to place the [post.scrollIntoView(true);] code.
It would be very helpful to all the javascript illiterates, as myself, if you cold help us with an example--the existing code in black and the add-on in read.
Everytime you do it, I can apply hacks without understanding the ins and outs of the code.
Thank you for writing the hacks and improving the code.
@killgorsky: you don't have to add the javascript. That's already done by Ramani in the hackosphere.js-file.
Hi Hans--
First of all, thanks so much for this hack. I really love it.
My only quibble is that it doesn't seem to want to play nice with block-level elements such as lists. I tried altering the page template to use 'div id="fullpost"' instead of 'span id="fullpost"', but then the "Read More..." link didn't show up anymore.
Any suggestions?
Hans,
Is there Peek-A-Boo code for Beta?
@Keith: post a post with a list that doesn't look okay, give me a link to it, and I will look into it.
@hathor: look here
Well, now that I'm actually trying to, I can't reproduce it! I swear I've seen it happen on a number of occasions. The closest I can get is this post:
http://schooleyfiles.blogspot.com/2006/06/why-i-am-not-calvinist-with-apologies.html
when viewed as part of a list - for example, as the bottom post on this link:
http://schooleyfiles.blogspot.com/search/label/Calvinism
Unfortunately, the post is far too long and complicated to easily isolate the cause. The interesting thing, though, is that (at least in this case) the problem occurs in Firefox, although not in Explorer.
If it reappears again, I'll let you know.
@Keith: okay, good luck, and let me know if I can help.
Okay Hans--
I had to pursue this, just to make sure I wasn't going crazy. I managed to duplicate the problem in three separate situations, which you'll be able to see here: http://keithstestingblog.blogspot.com/
Essentially, if the "fullpost" tag is placed within a block-level element, then only the rest of that" element is hidden, even though the "/span" tag is at the end. (It seems in some cases, Blogger wants to actually move the "/span" tag when publishing, but I seem to avoid this if I publish from the "Edit HTML" screen, instead of from the "Compose" screen."
It appears that I'll simply have to avoid placing the tag in these types of locations, which is not really a problem in most cases.
Once again, thanks for the hack. I really do enjoy it.
Share your thoughts!
Feel free to post your questions, remarks and comments here. Moderation is set for this blog, so your comments will appear in due time.
Look who's linking here!
0 Backlinks point here