Everybody's favorite Peekaboo posts has been improved once again by our beloved Hans! The only thing that I was not comfortable about peekaboo was that after collapsing back an expanded post, the page showed totally different posts which was a bit confusing. With Hans's improvement, the collapsed post's summary will be the one at the top of the page indicating where you were before clicking "Read more". I have incorporated this improvement in my hackosphere.js file.
Good news is that if you have applied Peekaboo hack already, your blog will exhibit this behaviour without you making any changes (the magic wand of Hackosphere will take care of this :)). Hans also has another suggestion if you would like the post title & summary to appear at the top of the page. If you prefer that way, check out his post.
23 comments:
I really like this improvment, props to you and everyone involved.
I am currently using some of your hacks and hacks I found through your blog on my blog at Kepeing it Real.
I was wondering if you could give me some pointers so I could use full text on the post on the main page and use the expandable post on the label pages.
I want to make my main page as easy to read for my regular readers and the label pages easier to find what someone is looking for. I don't gernarlly write on techinical stuff so my titles are not always clear enough to indicate the content of the post.
Thanks agian,
Real
wow, thats cool! thanx ramani! will be waitin for more...
hi ramani! i used your hacks in my blog. i just have a question though... can that Peekaboo hack be more like the LiveJournal-cut, where you can put it between entry paragraphs?
thanks!
Althea, I haven't tried LiveJournal. So, I am not sure what you are asking.
That's exactly what I wanted, Ramani. Looks, clean and professional. No more trying to navigate long posts for that one entry. I thank you and my readers really thank you. You're in my blogroll for life:)
Yay! Just what I needed! Much appreciated Ramani=D I don't know too much technical details unfortunately but I wanted to know if you could have more than 1 'read more' links per entry, and if said link is only printed at the bottom, by using this hack? Also, is it possible to have customized text for the 'read more' link for each entry rather than the generic 'read more'?
I suppose it might be something like althea meant about lj-cuts, where you put whatever text you want to hide behind a cut between the tags, then replace the 'link' text with your own text.
I'm very satisfied though, as it is. Can't thank you enough!=D
angelinnocent,
I will check with Hans if he wants to try those improvements. I am not getting much free time nowadays.
No rush=) Just something I wondered about. I'm already really grateful for all the work you and Hans have put in so far=D
Best of luck with the work front!
hi ramani! the lj-cut is something that hides/collapses paragraph texts between paragraph texts.
but thanks for this! :)
@angelinnocent: Hi Angel, glad you are satisfied with the hack! That's good for starters.
Now on your questions.
1. As it is now, the read-more link is just below the post-body. This is also the place of the collapse-link, because most likely you will want to collapse the post after reading it, so at the bottom. You could put the link at another place in the post, just by moving it to another location in the template.
2. You can't have two links to read-more. The link is inside a span with id="showlink", and html allows only 1 occurence of an id. If you use the id twice, only the first occurrence would be hidden, not the second one. You could work around this point by having 2 id's, such as "showlink1" and "showlink2". You would have to change Ramani's javascript-code as well to support this.
3. I do not see an easy way to change the 'Read more' text on a post-by-post base. I guess you could do the trick by making use of the layers technique, that I used in my Social Bookmarking-hack. You would need to add a span with id in your post with the text you like to display, and you will need some extra javascript code that reads this text and writes it into the link, and that also hides this text from displaying with the post itself. I guess the problem would be to give a unique id to this customized text, so that the javascript can find the appropriate occurence of the id.
I hope this helps you.
angelinnocent, althea,
Hans has described the general approach for achieving what you wanted. if you are comfortable with making those changes, go ahead. otherwise, wait for us to work on an lj-cut version.
Ahh...i see. Thanks for the explanation Hans=)One of these days I'll get around to tinkering with the template again and see what happens. In the meantime, I'll keep awaiting the genius hacks you all come up with!
Thanks again Hans and Ramani for this hack=)
hello,
thank you so much for that link. the site is just awsome.
i tried following the instructions step by step and this was the error message i got
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
".
but i was copy-pasting the code in the instructions, the one that said "must look exactly like this"
have you any clue what i could be doing wrong?
joanab - HUGE THANKS!
im sorry the previous comment didnt explain im the person you helped in a gougle group (my topic was something like How Can I avoid the Huge sroll?)
thank you
joanab, looks like i forgot to reply to you. You seem to be missing a matching /div tag. it might have been deleted while copying the new code. please check again.
oh. its working. cant tell you how happy i am. im maybe too picky about layout but i couldnt get myself to post while that awful scroll kept people from viweing the blog properly. I will finally dedicate myself to whats important now - the writing!
Thank you SO MUCH!
hi.. i have tried u r peek-a-boo hacks in both the classic template and beta...
http://beta-templatetesting.blogspot.com ...is usng beta template
http://horizonwitinus.blogspot.com ..is using classic template
The prob is.. the Read & collapse links are simply great with classic template.
But with the beta template.. when the post is collapsed.. the page kind of moves up:-(..very odd
Can you please help me figure out
thanks
Deeepa
Deepa, yes, the page will move up because we wanted to scroll the post into view. otherwise, with real longer posts, the page will contain totally different posts and the user will lose track of where he was. It's a feature not a bug :)
Hi Ramani, one of my readers reported a bug in our peekaboo post hack. When you go to 'Older Posts' the posts that have no summary will show a 'Read more' link. I looked into it and can confirm that this is what happens. The read-more and collapse links work like they should do, but it seems the checkFull-function is not executed. This is the only function in the hack that is called directly when displaying a post. The other 2 functions are called when clicking the link, and they work fine.
The same happens with my social bookmarking bar. The default text is 'Loading' and this is replace by a call to a js-function. On the Older Posts page this call doesn't work, but the calls that are triggered by a mouseover-event work fine.
Have you any idea what might be the cause, and how to tackle this one?
Thanks!
Thnks ramani
Thanks so much for this! This is the third one I've tried and the only one that's worked!
I, like Althea and Angelinnocent would be interested in a way to make the "read more" hidden portion in the middle of my entry rather than always at the end.
Great work! Thanks so much!
Ramani, I was wondering if you could take a minute and provide your own, step-by-step explanation with cplored examples--the way you've done before--on how to apply the Improved Super Peek-A-Boo script.
I don't know if it's only me, but not undertanding javascript, I can't seem to find the right spot to place the extra line to the script.
Thank you.
Ramani, disregard my earlier comment with a request. I had missed your earlier explanation of the problem.
Once again, kudos for clearity.
Post a Comment