By Pat · Leave a Comment · (Updated: August 17, 2016)

Foomark WordPress Widget

by

Foomark

Foomark is a bookmarking site, in the vein of Delicious & Magnolia. Up to now, there wasn’t a way to integrate your foomarks with your blog or website – somthing I wanted to do. Now there is.

This plugin lets you share your foomarks in a widget. It takes the JSON feed from Foomark & outputs the title of each foomark, linked to that bookmarked site. At the bottom of the widget is a link to your Foomark page.

You can download the plugin here.

Notes

  • The plugin reads Foomark’s JSON feed from api.foomark.com.
  • There is a 3-second timeout on the connection. If api.foomark.com isn’t able to respond, an error message appears, rather than holding up the rendering of your site.
  • The plugin is internationalized with Spanish (Mexican) and German translation files.

If you have any questions, please use the official support forums.

By Pat · 2 Comments · (Updated: August 17, 2016)

Using jQuery to mimic CSS3’s :nth-last-child

by

I came across the need for using CSS3’s :nth-last-child pseudo-selector recently. What does this do? Nth-last-child lets you select the nth (2nd, 3rd, 4th, etc) child of some element starting from the last one. For example:

li:nth-last-child(-n+4) //would select the last four list items in a list

To style the 2nd-to-last list item only, this example would work:

li:nth-last-child(-n+2)

The situation I had was there is a list of authors for a site. More than wp_list_authors, it was a custom-generated list of certain users. The list is styled to look like a box with two columns. There are dividers between each author both horizontally and vertically, with the bottom two authors having no bottom divider.

This list:






  • 


John Hancock

    • 

  • 


Lorem Ipsum

    • 

  • 


Jane Doe

    • 


    … needs to look like this:
    

    


    Removing the border on the last list item’s span is easy. Use the :last-child pseudo-selector and the border’s gone.
    

    #authors li.odd:last-child span {
border-bottom: none;
}
    

    Removing the border on the 2nd-to-last one should be this easy:
    

    #authors li:nth-last-child(-n+2) span {
border-bottom: none;
}
    

    But for now, that only works in Safari 4. (and maybe Opera?) so how to get that effect in Safari 3 and Firefox 3? (I have not gotten this to work in IE7 or 6. Those are coming.) Use jQuery and a three-line script.
    

    Here’s what I cobbled together from digging through the jQuery documentation:
    

    //removes bottom border from next-to-last span in the authors listings
var $curr = $('#authors li:last');
$curr = $curr.prev().children('span');
$curr.css('border-bottom','none');
    

    The script first locates the last list item. Then it looks for the previous element of that type, then drills down to the children elements that are spans. In this case, there’s only one. Lastly, the script applies a CSS rule of no border to the span.
    

    Is it perfect? Almost. I’ll need to figure out how to get IE7 and, unfortunately for this job, IE6 to render the next-to-last item correctly.