A script to show the full BB post on BBS


#1

Edit: Most recent code will be updated to this post. Credits to @bucaneer for refining the first bookmarklet to only select a link from the first post with titled"Permalink"

To preview BoingBoing posts inline with a bbs topic, create a new bookmark in your bookmark toolbar, and add the following code to the location field where you normally put a link. Go to a BoingBoing comment thread and click on the bookmark you just made. All this does is finds the first link in a thread and opens it up in an iframe inline with the page.

http://jsfiddle.net/gwwar/p8zohfcr/

So it should look a bit like this in action:


@noahdjango also requested a way to preview boing-boing posts before clicking on topics. This should only trigger a preview if a link is a boingboing link and you haven’t read it yet. Also, only apply the bookmarklet once on a full page load.

It might be a little sluggish since it’s doing 2 page loads (iframe to the thread, then a redirect to the main page). If you want to dismiss the preview, click anywhere else on the page or hover on a new boingboing link that is unread.

http://jsfiddle.net/gwwar/8raL204r/

Enjoy.


"The difference between boys and girls"
Coming soon -- "Show Full Post" on each Boing first post
Design suggestion box
I miss the old site with comments on the same page
TV Reviews
Love the new minimalist design!
Design suggestion box
Did you ever want to play questions?
#2

Truly you are a god among men. I’ve uploaded a Greasemonkey version of the script here, hope that’s alright? (Probably should have asked before acting, but there’s always hasty apologetic retraction to look forward to.)


#3

I have no problem with uploading it. I just wanted to make sure people knew it wasn’t malicious.


#4

Right. I also tweaked it a bit to only work on links within the first post called “Permalink”:

javascript:(function(){
    var iframe, link;
    link = document.querySelector("#post_1 .topic-body .cooked a");
    if (link.firstChild.textContent == "Permalink") {
        iframe = document.createElement('iframe');
        iframe.setAttribute("src", link.getAttribute("href"));
        iframe.setAttribute("frameBorder", 0);
        iframe.setAttribute("width", "100%");
        iframe.setAttribute("height", "600px");
        iframe.setAttribute("style", "border:1px solid #CCC;");
        document.querySelector(".topic-body .cooked").appendChild(iframe);
    }
}());```

#5

THIS IS AWESOME! :banana: :banana: :banana: :banana: :banana: :banana: :banana:

:banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana:

:banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana:

:banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana: :banana:

Oh, god, if you/ @bucaneer/someone could make a script like this so the links on bbs.boingboing.net would show up when you mouseover, I would probably never go to the main page ever again!


#6

You mean for all outbound links in a post? I can take a stab after work, though I think on click to toggle would be more useable.


#7

eh, maybe what I envision isn’t realistic. i hate seeing a headline in BBS, not being able to tell if I’m interested or not, clicking through to the forum, then clicking through to the permalink (or now, clicking your awesome bookmarklet) just to skim a sentence/see the pic and realize I’m not interested, and then back out to BBS again.

If I could mouseover or rightclick/cmd click from the BBS and see the permalink in an iframe (i don’t actually know that word, I’m just parroting what you called it earlier so I hope that’s right), that would be what @Donald_Petersen and I asked for here several months ago.

I get that the link on the BBS topics page only goes to the forum, not the post’s permalink; so unless you can “go two deep,” I understand it may be wishful thinking.

anyway, cheers for responding :^)


#8

Here you go. I whipped this up pretty quick, so let me know if there are bugs. This should only trigger a preview if a link is a boingboing link and you haven’t read it yet. Also, only apply the bookmarklet once on a full page load.

It might be a little sluggish since it’s doing 2 page loads (iframe to the thread, then a redirect to the main page). If you want to dismiss the preview, click anywhere else on the page or hover on a new boingboing link that is unread.

javascript:(function($){
    $(function(){
        var lastLink = null;
        $("body").on("mouseover", "#topic-list td.main-link a", function(event){
            var $link = $(this), $category, iframe, offset, linkVal = $link.attr("href");
            $category = $link.closest("tr").find("td.category");
            if($category.find("a").attr("href") === "/category/boing-boing" && (lastLink !== linkVal || $("iframe.hover-bb-preview").length===0)  && $link.closest("td.main-link").find("a i.icon-asterisk").length>0) {
                $("iframe.hover-bb-preview").remove();
                offset = $category.offset();
                iframe = $("<iframe/>", {src: $link.attr("href"), "class":"hover-bb-preview", frameBorder:0, width:"500px", height:"300px"});
                iframe.css({
                    border: "1px solid #CCC",
                    position: "absolute",
                    left: offset.left,
                    top: offset.top
                });
                iframe.load(function(){
                    var contents = iframe.contents();
                    contents.get(0).location.href = contents.find("#post_1 .cooked a").attr("href");
                });
                $("body").append(iframe);
                lastLink = linkVal;
            }
        }).on("click", function(){
            $("iframe.hover-bb-preview").remove();
        });
    });
}(jQuery));


#9

Whoa, dude! I’m dumfounded. I don’t know what to say other than an emphatic thank you! i’m seriously overwhelmed
m(._.)mアリガト

\(★´−`)人(´▽`★)/


#10

I’m actually a dudette, but we’re pretty rare in the tech industry anyway. Enjoy the bookmarklet!


#11

Holy crap, was that elegant! It’s exactly what we wanted!

Many, many thanks to you. If only more people could so thoroughly recognize an issue, understand how to address it, and so promptly and apparently effortlessly fix it, the world would be a significantly merrier place.

Not to take away from Jeff’s and Sam’s work hereabouts, mind, but this made me soooo happy!


#12

Oh, sorry. I do tend to absentmindedly apply “dude” to either gender IRL–which is offensive enough–but I admit I assumed :neckbeard: , durr.

No bugs that I can tell – it works great! The frame was a little small for me so I looked at the code and luckily that was the only bit that I could actually follow, so after trying some others I settled on 655x555 pixels. Figuring this out made me feel like

A small victory, but I’ll take it.


#13

A very nice touch! I followed your example, and it helps my aging eyes. Thanks to you both!


#14

Brilliant! Thank you!!


#15

Oh no worries I tend to do that too. Just watch out if you post on Jezebel. I got chewed out once for using the word “female”.

Glad to see you’re enjoying it.


#16

I dunno, “dude” has become a sort of all purpose interjection in this part of the world (LA,CA,USA). Like a soft version of “fuck.”

It does still confuse. The youngsters are way out ahead on this, obviously.


#17

Rob Schneider, on the many meanings of “Dude”:


#18

Now, “Dude” - that’s a name no one would self-apply where I come from.


#19

“What the fuck are you talking about?”


#20

Dude was used as a universal word, where I grew up.