Page Banner

<<"Manhattan Half Marathon" [Main Index] "EU Vote on Software Patents">>

Today's Links Feature-ette

05 August 2003

I've added a neat little feature to post interesting links that I've recently browsed onto my website with just a single click - See the bottom of the right hand sidebar.

Often while I'm surfing I'll come accross a page that is interesting and I want to share with friends. It's a bit of a hassle to write an email to them all, or to copy and paste it into a million IM windows. So I've developed a simpler way to share them. It also has the advantage that people can look at them at when they have the time, and allows multiple people to store their interesting links in one place.
So how is it done? Pretty simply really - Using a combination of javascript and PHP.
On the Web browser, I have a bookmarklet - a tiny piece of javascript rather than a regular URL - in my Links toolbar that looks like this:

javascript:window.open("http://caperdu.homelinux.net:8000/~djg/test.php?data=" + location.href+"&title="+document.title+"&password=apassword"); void 0

When I click on it, it opens a page on my website, with the current Web page's URL and title passed as parameters.
This page reads in the parameters, adds them to the end of a file, removes any previous occurances from the file, truncates the file to the 23 most recent entries and saves it again.

Lastly, there is some PHP code on my front page to read in the file and display it, complete with nifty fading out colours!

This php page to store the links looks like this:

.(omit the HTML - nothing clever just some usage info)
.
.
// Check password
$thePassword = "apassword";
if ($password == $thePassword){
// Read in the new URL
//
$filename = '/var/www/html/data/links.txt';
$links = file($filename);
$file = fopen( $filename, "w" );
//Number of entries in file
$numEntries = count($links);

foreach ($links as $aLink) {
if (substr($aLink, 0, strpos($aLink, "|")) != $data && $numEntries <= 23) {
fwrite($file, $aLink );
}
$numEntries--;
}
fwrite($file, $data."|".$title."\n" );
fclose($file);

// Write out the URLs for test purposes
//
$filename = '/var/www/html/data/links.txt';
$myLinks = file($filename);

// For nice color fading, uses hard coded values for link and background color
// Link colours
$linkcol = array(hexdec("2C"), hexdec("41"), hexdec("37"));

//Background colours
$backcol = array(hexdec("8D"), hexdec("A4"), hexdec("93"));

for ($i = count($myLinks); $i >= 0 || $i >= count($myLinks) - 20; $i--) {
$site = substr($myLinks[$i], 7, strpos($myLinks[$i], "|") - 7);
for ($j=0; $j<=3; $j++) {
$loopcol[$j] = floor($linkcol[$j] - ((20-$i)/20)*($linkcol[$j] - $backcol[$j]));
}
echo "A HREF=\"".substr($myLinks[$i], 0, strpos($myLinks[$i], "|"))."\">FONT COLOR=".dechex($loopcol[0]).dechex($loopcol[1]).dechex($loopcol[2]).">$site/FONT>/A>BR>";
}
echo "SCRIPT language=JavaScript TYPE=\"text/Javascript\">";
echo "window.close();";
echo "/SCRIPT>";
}
else {
echo "ERROR: Invalid password
";
}


The PHP code to print out the links looks like this:

recent links:


$filename = '/var/www/html/data/links.txt';
$myLinks = file($filename);

// For nice color fading, uses hard coded values for link and background color
// Link colours
$linkcol = array(hexdec("2C"), hexdec("41"), hexdec("37"));

//Background colours
$backcol = array(hexdec("8D"), hexdec("A4"), hexdec("93"));

for ($i = count($myLinks)-1; $i >= 0 && $i >= count($myLinks) - 20; $i--) {
//$site = substr($myLinks[$i], 7, strpos($myLinks[$i], "|") - 7);
$site = substr($myLinks[$i], 1 + strpos($myLinks[$i], "|"));
$theLink = substr($myLinks[$i], 0, strpos($myLinks[$i], "|"));
if (strlen($site) > 50) {
$site = substr($site, 0, 47)."...";
}
for ($j=0; $j<=3; $j++) {
$loopcol[$j] = floor($linkcol[$j] - ((20-$i)/20)*($linkcol[$j] - $backcol[$j]));
}
echo "A TARGET=\"_parent\" TITLE=\"$theLink\" HREF=\"$theLink\" STYLE=\"colour: #".dechex($loopcol[0]).dechex($loopcol[1]).dechex($loopcol[2])."\">- $site/A>BR>\n";
}



(NB: I had to munge a couple of the tags above to get them to print. Make sure you get the HTML right if you are copying from above! Stupid greymatter should handle escaped HTML better!)

The PHP code could do with a bit of a clean up and some more sanitizing of the input parameters. eg/ I could specify the colours as rgb(x, y, z) with CSS and that would avoid the decimal to hex conversion. If anyone writes any improvements post them here!

One of the hardest bits was getting the nice fading link effect. I had to learn a bit more about CSS and inheritance of styles. I needed to set the style in each Anchor (link) tag and use the !important CSS attribute in my style settings in the page HEAD to over ride this on mouse over, like this:

a:hover { color: #000000 !important; text-decoration: underline }

It appears that '!Important' only applies to the item it directly follows, not the whole line.

nav:
home
archives
photos

my other sites:
- New York Running
- ISOGA Heavy Metal Band!
- Vacations in France!

friends:
- simon's scene
- mark's musings

previously:
- More Like it
- Worst Webhost ever?
- Against Bottled Water
- Recovering Disk Space in Windows
- Sun Ray Deployment at IS195
- Running Route Database - Update
- Pics from Mike's Bike Trip
- Central Park Moonlight Cycle
- Kristin Plater's Next Show...
- Kristin Plater Plays the Alphabet Lounge
- Your Chance to Influence US Energy Policy!
- Practical NY Energy Tips - PCs
- Missing the Point
- Practical NY Energy Tips - Lighting
- Making the Switch to Firefox
- Belize to Gutemala and Back Again
- Diving in Cancun
- Today...
- Peru and Belize!
- PC Fix Up Tips

-- powered by Greymatter -- email --