July 13, 2003

Check me out in mozilla or Netscape

How to make a simple CSS dropdown menu : evolt.org, Code. I remembered some time ago, I had surfed to a page that had pop-up boxes containing extra information for data in a list. Actually, I believe it was a MT blog site that had links to other blogs and if I hovered over the blog's link, a box popped up that contained links to the latest entries of that blog. I was quite envious. I needed to do this with my blog and my blogroll, in particular. So if you're running mozilla or Netscape (or a browser with CSS2 capabilities that aren't messed up, i.e. IE will NOT work for you), go ahead and hover over the links in my blogroll on the left (under the heading "Fellow Bloggers") and you will see what I mean.

It was not difficult to implement at all. I used magpieRSS to fetch the titles of the blog's latest entries and followed the CSS trick outlined in the link above to evolt.org. Did a few hacks here and there of course -- such as CSS tricks to create a popup box layered over the current text in the page rather than pushing the text aside (hint: position: absolute), added a border to the box, and changed the margin and width. Rather than taking the time to show you exactly how I did it, you're welcome to peek in my page source and my CSS source to figure out what I did and below I'll post my PHP script that handles RSS feeds on my site (i.e. the links on the left panel of the main page of my site).

The magpierss hack was taken from an entry at linuxathome.

The nice thing about my hack is that I'm using the free service at blogrolling.com to maintain my blog links AND the URL of the RSS feed for each blog. Hint: instead of typing in a blog description, I pasted the URL to the RSS file of the site. My PHP code was a little buggy, so I had to make sure that at least something was typed in the description at blogroll, even for those blogs that did not have an RSS feed. I don't have the time to make this entry any clearer in terms of how to implement this in your site, but I welcome comments and will try to answer them for those of you stuck in trying to get this done on your site. Again, the nice thing about this setup is that as I add new blogs to my blogroll, I can instantly add the blog's RSS feed (by putting the URL of the RSS file in the description field at blogrolling.com) to show its latest entries on my blog's frontpage.

Here is my PHP script that handles the feeds: require_once 'rss_fetch.inc'; error_reporting(E_ERROR); define('MAGPIE_CACHE_ON', 1); define('MAGPIE_CACHE_DIR', '/dir/to/magpieRSS/cache/'); define('MAGPIE_CONDITIONAL_GET_ON', 1); define('MAGPIE_CACHE_AGE', 10800); // Set the number of headlines per site $total = 20; // Initialize our sites $url[0] = 'http://www.newsisfree.com/HPE/xml/feeds/87/2087.xml'; $url[1] = 'http://www.medscape.com/cx/rssfeeds/Hiv-Aids.xml'; $url[2] = 'http://nodalpoint.org/module.php?mod=node&op=feed'; $url[3] = 'http://snowdeal.org/syndication/informatics.rdf'; $url[4] = 'http://rpc.blogrolling.com/rss.php?r=21ed2660ff64bad6c7d9ddbb8a9704a6'; $url[5] = 'http://www.blogshares.com/rss.php?feed=portfolio&user=6562'; // Fetch the XML for each one $count = 0; foreach($url as $thisURL) { if ($rss[$count] = fetch_rss($thisURL)) { $count++; }// else { // echo "<div class=\"side\">An error occured while accessing " . $thisURL . "</div>"; // } } // Print out the data for each one foreach ($rss as $thisRSS) { // Display the site's name echo "<div class=\"sidetitle\">" . $thisRSS->channel['title'] . "</div>\n<div class=\"side\">\n<ul id=\"nav\">\n"; // Limit to $total entries $items = array_slice($thisRSS->items, 0, $total); foreach ($items as $item ) { $title = str_replace('&','&amp;',$item[title]); $linkURL = str_replace('&','&amp;',$item[link]); $date = $item[pubDate]; $description = $item[description]; $descrss = substr($item[description], 0, 5); // If we have no title, use the first 30 characters of the description if ($title == "") { $title = substr(strip_tags($description), 0, 30) . "..."; } // If we have no link, use the site's link if ($linkURL == "") { $linkURL = $thisRSS->channel['link']; } // Add this headline to our variable echo "<li><a href=\"$linkURL\">$title</a><br />"; if ($descrss == "http:") { $subrss = fetch_rss($description); echo "\n <ul>\n"; foreach ($subrss->items as $rssitem) { $subrsshref = $rssitem['link']; if ($rssitem['title'] == "") { $subrsstitle = substr(strip_tags($rssitem['description']), 0, 20) . "..."; } else { $subrsstitle = $rssitem['title']; } echo " <li><a href=$subrsshref>$subrsstitle</a></li>\n"; } echo " </ul>\n</li>\n"; $descrss = ""; //if the next description is blank, this variable will not reset } else { echo "</li>\n"; } } echo "</ul>\n</div>\n\n"; } Posted by johnvu at July 13, 2003 05:07 PM
Comments

Works in Opera 7.11 for Linux too. Major coolness.

Posted by: Chris on July 17, 2003 11:13 PM

That's major coolness. Could you replace my site description with my crude hack RSS feed at http://www.wcc.vccs.edu/services/rssify/rssify.php?url=http%3A%2F%2Fcoffeeblog.blogspot.com%2F so I can look cool too?

Posted by: Grady on July 21, 2003 11:58 PM

Grady, I got you edited for your coffeeblog. Now I can quick scan your headings, thanks for the RSS feed!

Posted by: John on July 22, 2003 01:18 AM
Post a comment