Another snippet I had to write during the great Slider rebuild.

I needed to be able to take an NSImage supplied by the user and tile it within an NSBezierPath defined by more user-set values.

The below example uses a rounded rectangle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
//bgImage can be any NSImage
NSColor *c = [NSColor colorWithPatternImage:bgImage];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[path fill];
 
[NSGraphicsContext restoreGraphicsState];

Tags: NSBezierPath, NSImage, Objective C, Slider, Snippet - 小片, Tutorial - 教程

While continuing to rebuild Slider’s background image features, I was forced to rewrite the code that scales an image up/down to Slider’s portal size, ignoring the image’s original proportions. The image also had to be painted within a path, as Slider may have differently shaped corners compared to the image to be scaled.

The below code accomplishes the scaling and painting of the image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//theImage = the resulting image, that will have a scaled (proportions ignored) version of "bgImage" painted onto it
NSBitmapImageRep *theImage = [[NSBitmapImageRep alloc] initWithBitmapDataPlanes:NULL pixelsWide:imageSize.width pixelsHigh:imageSize.height
 bitsPerSample:8 samplesPerPixel:4 hasAlpha:YES isPlanar:NO
 colorSpaceName:NSDeviceRGBColorSpace bytesPerRow:0 bitsPerPixel:0];
 
[NSGraphicsContext saveGraphicsState];
[NSGraphicsContext setCurrentContext:[NSGraphicsContext graphicsContextWithBitmapImageRep:theImage]];
 
NSImage bg = [[NSImage alloc] initWithSize: imageSize];
 
//bgImage can be any NSImage
NSSize originalSize = [bgImage size];
[bg lockFocus];
[bgImage drawInRect: NSMakeRect(0, 0, imageSize.width, imageSize.height) 
fromRect: NSMakeRect(0, 0, originalSize.width, originalSize.height) 
operation: NSCompositeSourceOver fraction: 1.0];
 
[bg unlockFocus];
 
NSColor *c = [NSColor colorWithPatternImage:bg];
[c set];
[path appendBezierPathWithRoundedRect:NSMakeRect(0, 0, imageSize.width, imageSize.height) xRadius:10.0 yRadius:10.0];
[aPath fill];
 
[NSGraphicsContext restoreGraphicsState];

“path” could be any NSBezierPath.

Tags: Cocoa, NSBezierPath, NSImage, Objective C, Slider, Snippet - 小片, Tutorial - 教程

After updating 100+ pages manually, I realized that I had neglected to add “index.php” to the end of certain links. Usually this would be fine, but the links in question are opened in Shadowbox, which will fail on pretty, “index.php”-less links.

I was able to fix this on the server in 5 seconds with find+perl:

find . -name 'FILE_NAME.EXTENSION' | xargs perl -pi -e 's/FIND/REPLACE/g'

Where FILE_NAME is the name of the files to be searched in (can be ‘*’) and EXTENSION is the filetype (can be ‘*’). FIND is the text to be searched, and REPLACE is a replacement string.

Phew!

Tags: Bash, Linux, Perl, Tutorial - 教程

See the cute little pictures on the left? The ones below the site menu? Go ahead and run the mouse over them a few times – a faded circle behind the animals changes colour each time, doesn’t it? Yep.

The idea for this came from Artemy Lebedev’s Mandership. Go there and hover the cursor over the bar-code in the top right, notice that it changes colour as you do so.

I really like this effect, and wanted to implement on this site, as I needed something to distract me from important work.

The effect is accomplished with jQuery, a colour generation function and a transparent PNG.

I thought I’d share this effect, and variations, with the world with this tutorial.

Below are four variations, each adding an additional function/plugin to achieve the different effects:

Vanilla

First, the library:

You’ll need to include jQuery in your page. First download the jQuery library, then upload it to your server. To include the library in your page, you need to modify then paste this code somewhere in your page’s header (the bit between the … tags):

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>

Change src to reflect the location of the jQuery file you uploaded to your server.

Second, the functions:

This code needs to be pasted just below the jQuery library link, also in the header.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<script type="text/javascript">/* generate random colour http://www.therustybarrel.com/david/experiments/randhex.html */
function genHex(){
	colors = new Array(14);
	colors[0]="0";
	colors[1]="1";
	colors[2]="2";
	colors[3]="3";
	colors[4]="4";
	colors[5]="5";
	colors[5]="6";
	colors[6]="7";
	colors[7]="8";
	colors[8]="9";
	colors[9]="a";
	colors[10]="b";
	colors[11]="c";
	colors[12]="d";
	colors[13]="e";
	colors[14]="f";
 
	digit = new Array(5);
	color="";
	for (i=0;i<6;i++){
		digit[i]=colors[Math.round(Math.random()*14)];
		color = color+digit[i];
	}
	return "#"+color;
}
 
jQuery(document).ready(function(){
jQuery(".colour-change").hover(function(){
jQuery(this).parent().css("background-color", genHex());
});
});
</script>

The genHex() function is from The Rusty Barrel, but the site seems to be down. It strings together some random hex values, returning them in a string suitable for use in CSS.

jQuery code that is to be triggered by some event needs to be placed between jQuery(document).ready(function(){…}); In this case we have some code that will be executed when when the visitor hovers the cursor over any element with the class ‘colour-change’. The next line selects the anchor, then gets its parent. It then asks genHex() for a random colour, uses this to change the parent’s background colour. Simple! jQuery makes Javascript much simpler, fun even. It also alleviates many issues related to browser incompatibility.

Note that this code must be pasted below the line calling the jQuery library. Why? Because the colourChange() function needs jQuery to run, and javascript code only knows about libraries included above themselves.

Third, the HTML:

1
2
3
4
5

<div style="width:600px; height: 188px; background-color: #333333; margin: 0px auto;">
<a href="http://pagesofinterest.net/blog/2009/06/using-png-transparency-the-jquery-colour-change-plugin" class="colour-change"
<img src="http://pagesofinterest.net/images/post/dizi.png" alt="Disciples are not necessarily inferior to teachers, teachers are not necessarily superior to disciples."/>
</a>
</div>

The HTML required for this effect consists of three elements: an outer div, an anchor and an image. The styling for the div is very important. It must be given width and height values equal to the width and height of the image it is wrapping, and it must be given a background colour.

The anchor is given the class “colour-change”, which is required for jQuery to handle the cursor hover event.

The image should be whatever image you want to use – with at least a little transparency!

You can use this effect as many times as you want on any page – as long as whatever page you’re using it on has 1) the jQuery library link in the header, 2) the functions below the jQuery link in the header, and 3) the anchors must be given the class ‘colour-change’.

Colour Animation

Follow the vanilla section of this tutorial first.

Any of the variations can be combined with the excellent colour animation plugin for jQuery. This results in a smooth transition between colours, which is desirable in some cases. Here is our example + colour animations:

To integrate the colour animation plugin with this example:

Download the colour animation plugin, upload it to your sever.

Link to it in the header of your page, between the jQuery link and the functions code, e.g:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.colouranimations.js"></script>
<script type="text/javascript">
function genHex(){
[...]
}
jQuery(document).ready(function(){
[...]
});
</script>

Swap the line “jQuery(this).parent().css(“background-color”, genHex());” with:

jQuery(this).parent().animate({backgroundColor: genHex()},500);

the ‘500′ value tells the function how long you want the transition to take, in milliseconds. Change this to whatever you like!

Hover-Intent

Any of the effect variations can be combined with hover-intent. If you plan on applying this colour-change effect to multiple items on a page, you should seriously consider this plugin. If will prevent the crazy “piano key” behaviour that can occur when a visitor hovers over multiple items in quick succession.

Follow the vanilla section of this tutorial first.

Download the hover-intent jQuery plugin, upload it to your server.

Link to it in the header of your page, between the jQuery link and the functions code, e.g:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.hoverintent.js"></script>
<script type="text/javascript">
function genHex(){
[...]
}
jQuery(document).ready(function(){
[...]
});
</script>

Replace the jQuery code with:

1
2
3
4
5

jQuery(document).ready(function(){
jQuery(".colour-change").hoverIntent(function(){
jQuery(this).parent().animate({backgroundColor: genHex()},500);
}, function(){});
});

You’ll notice that I’ve combined the hover intent plugin with the colour animation plugin in the code above. If you’d like to do this, make sure you include both plugins! Your jQuery, hover-intent and colour animation links should look like:

<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.color.animation.js"></script>
<script type="text/javascript" src="http://pagesofinterest.net/js/jquery.hover.intent.js"></script>

Remember that the jQuery link must be first! In this case the order of the following two doesn’t matter. The rule is this: if javascript X requires functions within javascript Y, then javascript Y must be included before javascript X.

Brightness/Darkness Manipulation

Any of the effects can be combined with this to produce a random colour change of a consistently darker/lighter brightness level. This can be good in situations where you want the randomized colour change to be more subtle.

Follow the vanilla section of this tutorial first.

I include this section in case you want to use only light/dark colours. Maybe the full range is too garish for you?

You’ll need to include the following two functions. Copy them just above the genHex() function. The functions are modified from code found in this post this post on the Experts Exchange.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function LightenColor(h, d) {
 
	var r, g, b, txt;
 
	h = (h.charAt(0) == "#") ? h.substring(1,7) : h;
 
	r = parseInt(h.substring(0,2),16);
	g = parseInt(h.substring(2,4),16);
	b = parseInt(h.substring(4,6),16);
 
	r = (r+d > 255) ? 255 : (r+d < 0) ? 0 : r+d;
	g = (g+d > 255) ? 255 : (g+d < 0) ? 0 : g+d;
	b = (b+d > 255) ? 255 : (b+d < 0) ? 0 : b+d;
 
	txt = b.toString(16);        if (txt.length< 2) txt = "0"+ txt;
	txt = g.toString(16) + txt;  if (txt.length< 4) txt = "0"+ txt;
	txt = r.toString(16) + txt;  if (txt.length< 6) txt = "0"+ txt;
 
	return "#"+ txt;
}
function DarkenColor(h, d) {
	return LightenColor(h, d* -1);
}

To get a random light colour, swap the jQuery(this).parent().css(“background-color”, genHex()); for:

jQuery(this).parent().css("background-color", LightenColor(genHex(),100));

To darken:

jQuery(this).parent().css("background-color", DarkenColor(genHex(),100));

There you go! I hope you found this tutorial helpful – please let me know if you spot any errors :)

Tags: jQuery, Programming - 编程, Tutorial - 教程

Somehow I broke my JDownloader installation, I think by meddling with the network settings. Nothing would download, and the auto-update was borked. I decided to delete it and reinstall it, but I had quite a lot of download packages queued, and wanted to rescue them. I managed to do this successfully, here’s how:

Locate the “backup” folder, in JDownloader’s root directory. For me, as I used this method to install JDownloader, the folder was in “/opt/JDownloader/”. Find the most recent “backup.zip” file. Note that there may be some numbers between “backup” and “.zip”. In Ubuntu’s default file manager, Nautilus, one can select “List View” and then click “Date Modified” to easily find the most recent file.

Copy this file and paste it to your desktop.

Create a new folder on your Desktop, call it “BACKUP”. Copy all files in JDownloader’s root directory into this folder.

Follow these instructions to install JDownloader. You can skip the “sudo mkdir /opt/JDownloader” step if you installed JDownloader with this method.

When JDownloader is installed, extract the “backup.zip” file you copied to your Desktop and modify then execute the following in a terminal:

sudo mv ~/Desktop/database.script /opt/JDownloader/config/database.script
sudo mv ~/Desktop/database.properties /opt/JDownloader/config/database.properties

Open JDownloader.

Your packages should have been restored. If you’re happy with the new installation, you can go ahead and delete the “BACKUP” folder.

Tags: Fix, JDownloader, Tutorial - 教程

I’m in the middle of a project involving Wikipedia and ResearchCyc, and I needed to get the data contained in DBpedia’s Infobox RDF Triple file into a MySQL database so I could use it in conjunction with the database created by the excellent Wikipedia Miner.

This script parses out the Wikipedia page, DBpedia Infobox Predicate and Infobox subject, and inserts them into a MySQL table. I thought I’d share it with The Internet in case someone else wanted to work with DBpedia infobox data in the same way.

One ends up with a table filled with entries like:

+----------+-----------------+---------------+------------------------------------------+
| id       | predicate       | subject       | page                                     |
+----------+-----------------+---------------+------------------------------------------+
| 22378459 | foundationDate  | 1918-10-18    | Fortaleza_Esporte_Clube                  | 
| 21460098 | areaCode        | 07404         | Bösingen,_Baden-Württemberg              | 
| 21536062 | demonym         | Caronelli     | Carona_(BG)                              | 
| 23913919 | draftyear       | 1991          | Mike_Pritchard                           | 
| 22278400 | producer        | Bow_Wow       | Face_Off_(Bow_Wow_&_Omarion_album)       | 
| 22320735 | bodyStyle       | Coup          | Fiat_1200                                | 
| 22245790 | classis         | Magnoliopsida | Euphorbia_atropurpurea                   | 
| 23710420 | order           | Sapindales    | Malleastrum_leroyi                       | 
| 25463380 | starring        | Lena_Headey   | The_Contractor                           | 
| 26021756 | latitudeMinutes | 27            | Walnut_Township,_Atchison_County,_Kansas | 
+----------+-----------------+---------------+------------------------------------------+

And a table containing the frequencies of each predicate:

+-------------------------+-----------+
| predicate               | frequency |
+-------------------------+-----------+
| background              |     30863 | 
| homeTown                |     49083 | 
| genre                   |    245669 | 
| label                   |    132028 | 
| associatedBand          |     35371 | 
| associatedMusicalArtist |     35371 | 
| artist                  |     98762 | 
| producer                |     96997 | 
| reviews                 |     35207 | 
| recordDate              |     24784 | 
+-------------------------+-----------+

I used the DBpedia infobox data from this post: “DBpedia – Rethinking Wikipedia infobox extraction“, kindly provided by Georgi Kobilarov. The data linked to in that post is much more suitable for my requirements than previously available DBpedia infobox data – instead of multiple predicates for birth date – birthDate, dateBirth, dateOfBirth, birth…, they’ve been mapped to dbpedia:Person#birthdate. Wonderful!

To handle the occasional /uXXXX, I used Unicode::String and Unicode::Escape, by Gisle Aas and Hitoshi Amano respectively.

The script could be improved: though the Wikipedia Pages and DBpedia Infobox Predicates are fine, some of the subjects are rather … interesting. As I’m currently only interested in the 200 most frequently occuring predicates, I haven’t put more time into smoothing out some of the more interesting subject data. If anyone makes changes to the script, please let me know and I’ll update this post.

Here it is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176

#!/usr/bin/perl
 
###################################################################################
#
#	Parse out the Wikipedia page title, the DBpedia Infobox Relation and the subject from the infobox.nt file.
#
#	Inserts data into a MySQL database tables with the structures:
#	
#	infoboxes
#
#	+-----------+--------------+------+-----+---------+----------------+
#	| Field     | Type         | Null | Key | Default | Extra          |
#	+-----------+--------------+------+-----+---------+----------------+
#	| id        | int(11)      | NO   | PRI | NULL    | auto_increment | 
#	| predicate | varchar(255) | YES  |     | NULL    |                | 
#	| subject   | varchar(255) | YES  |     | NULL    |                | 
#	| page      | varchar(255) | YES  |     | NULL    |                | 
#	| type      | int(1)       | YES  |     | NULL    |                | 
#	+-----------+--------------+------+-----+---------+----------------+
#
#	predicateFrequency
#
#	+-----------+--------------+------+-----+---------+-------+
#	| Field     | Type         | Null | Key | Default | Extra |
#	+-----------+--------------+------+-----+---------+-------+
#	| predicate | varchar(255) | NO   | PRI |         |       | 
#	| frequency | int(6)       | YES  |     | NULL    |       | 
#	+-----------+--------------+------+-----+---------+-------+
#
#	
#	To output to a CSV file, uncomment lines beginning with "#@#"
#	
#	DBpedia infobox.nt downloaded from: http://blog.georgikobilarov.com/2008/10/dbpedia-rethinking-wikipedia-infobox-extraction/
#
#	Script written by Michael Robinson - faceleg - http://pagesofinterest.net/
#
#	Contact: mike@pagesofinterest.net
#
####################################################################################
 
use strict;
use warnings;
use DBI;
use DBD::mysql;
 
####################################################################################
#
#	Unicode: 		http://search.cpan.org/~gaas/Unicode-String-2.09/String.pm
#	Unicode::Escape:	http://search.cpan.org/~itwarrior/Unicode-Escape-0.0.2/lib/Unicode/Escape.pm
#
####################################################################################
use Unicode::Escape qw(escape unescape);
 
#Database details
my $username = '';
my $pass = '';
my $db = 'wikipedia';
my $querystring;
 
#connect to database
my $dbh = DBI->connect( "dbi:mysql:$db", $username, $pass, { 'PrintError' => 1, 'RaiseError' => 1 } );
 
my $lost = 0;	# amount of entries that are "lost" due to crazy formatting.
 
#File & directory declarations
my $dir = "/path/to/":
my $DBpedia = "infobox.nt";
#@#my $CSV = "cleanedRDF.csv";
 
###################################################################################
#
#	Decode URL encodings	
#
#	thanks to: http://glennf.com/writing/hexadecimal.url.encoding.html
#
###################################################################################
sub URLDecode {
	my $theURL = $_[0];
	$theURL =~ tr/+/ /;
	$theURL =~ s/%([a-fA-F0-9]{2,2})/chr(hex($1))/eg;
	$theURL =~ s/<!–(.|\n)*–>//g;
	return $theURL;
}
 
###################################################################################
#
#	If a string begins with 0 or more white spaces and ", and ends with " and 0 or more white spaces, remove the white spaces and ".	
#
###################################################################################
sub deQuote {
	my $deQuoted = $_[0];
	if($deQuoted =~ /^\s*".*"\s*$/){
		$deQuoted =~ /\s*"(.*)"\s*$/;
		return $1;
	}
	else{ return $deQuoted; }
}
###################################################################################
#
#	Inserts data into MySQL table
#
###################################################################################
sub doInsert {
	if($3 && $3 !~ /^\s*$/ && $3 ne ""){	#make sure the subject isn't empty... in theory - doesn't seem to work for radio station: frequency...?!
		#insert triple into infoboxes table
		$querystring = "insert into infoboxes (page,predicate,subject) values(";
		$querystring.= $dbh->quote(URLDecode($1)).",".$dbh->quote(deQuote(URLDecode($2))).",".$dbh->quote(deQuote(unescape(URLDecode($3)))).")";
		$dbh->do($querystring);
 
		#insert or update data in predicateFrequency table
		my $predicate = $dbh->quote(deQuote(URLDecode($2)));
 
		$querystring = "INSERT INTO predicateFrequency(predicate,frequency) VALUES($predicate,0) ON duplicate KEY UPDATE frequency=frequency+1";
		$dbh->do($querystring);
	}		
}
# go through dbpedia infobox relations
open (IB, $dir.$DBpedia);
#@#open (CSV,'<'.$dir.$DBpedia);
 
while(<IB>) {
 
	chomp;	#offer a byte sized sacrifice to the great compiler
 
	###################################################################################	
	# 
	#	Wikipedia page title should not be dequoted!
	#	
	#	Split into elements 
	# 	$1 = Wikipedia Page
	# 	$2 = Predicate
	# 	$3 = Object
	#
	###################################################################################
	#
	#
	#	standard triple, no extra screwing about required.
	#
	###################################################################################
   	if($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>\s<http:\/\/dbpedia.org\/resource\/(.*)>.*/){ 
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}	
	###################################################################################
	#
	#	standard triple with date, remove trailing declaration.
	#
	###################################################################################	
	elsif($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>(.+)\^\^<http:\/\/www.w3.org\/2001\/XMLSchema#date>\s\./){ 
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}
	###################################################################################
	#
	#	"Differently" presented data
	#
	###################################################################################
	elsif($_ =~ /<http:\/\/dbpedia\.org\/resource\/(.+)>\s<http:\/\/dbpedia.org\/ontology\/.*#(.+)>(.+)\s\./){ 	
		#print URLDecode($1).'	'.URLDecode($2).'	'.unescape(URLDecode($3));
		#@#print CSV '"'.URLDecode($1).'","'.URLDecode($2).'","'.URLDecode($3).'"';
		doInsert($1,$2,$3);
	}
	else{
		$lost++;
	}
	#@#print CSV "\n"; 
}
 
close(IB);
#@#close(CSV); 
$dbh->disconnect;
 
#let the world know how many we dropped
print $lost;

Tags: DBpedia, MySQL, Perl, Tutorial - 教程, Wikipedia

Today it occurred to me that Thunderbird 2 is pretty old, so I looked into Thunderbird 3’s progress.

I stumbled across a thread on Nabble that contained a link to a mozilla PPA that included Thunderbird 3 Beta versions.

You can find it here:

PPA for Ubuntu Mozilla Daily Build Team

To install it, open a Terminal, then follow the steps below:

Backup your sources list:

sudo cp /etc/apt/sources.list /etc/apt/sources.list_bak

Backup your Thunderbird 2 profile (if you’ve been using it):

mkdir /home/<username>/.mozilla-thunderbird_bak
cp -R /home/<username>/.mozilla-thunderbird/* /home/<username>/.mozilla-thunderbird_bak/

Open the list in gedit:

sudo gedit /etc/apt/sources.list

Scroll to the bottom of this file and paste the repository location (the selected lines in the below image). Make sure you select the version of Ubuntu that you’re using!

Save then close sources.list.

Add the GPG key:

sudo apt-key adv --recv-keys --keyserver keyserver.ubuntu.com EF4186FE247510BE

Update package information:

sudo apt-get update

If you get an error here, repeat the GPG key add step, replacing the above key with the key reported in the error message.

Now install Thunderbird 3!

sudo apt-get install thunderbird-3.0

When that’s done, you’ll be able to access it at: Applications -> Internet -> Shredder 3 Mail/News.

If you want to change the icon:

sudo gedit /usr/share/applications/thunderbird-3.0.desktop

Replace the text following Icon= with a path to your image file. For example:

...
Icon=/home/faceleg/.icons/hydroxygen/128x128/apps/thunderbird02.png
...

Save and close the file.

Have fun!

Tags: Thunderbird, Tutorial - 教程, Ubuntu

JDownloader is an excellent download manager. When I had a Mac I used Speed Downloader, but when the free trial period ran out I switched back to DownThemAll, a download manager plugin for Firefox.

The only thing I missed about Speed Downloader was its ability to store my Rapidshare Password: a feature not supported by DownThemAll – no more returning to the computer to find my downloads folder filled with useless .html files as I’d forgot to make sure the Rapidshare Cookie was set… JDownloader can not only store one’s Rapidshare details, it can store details for just about every other download service imaginable.

JDownloader also has an option to capture the clipboard – copy a link and it will automatically open a “Add download” window – surprisingly useful. Downloads can be organised into packages. JDownloader will attempt to unpack compressed files automatically (there is an option to turn this off).

It’s pretty great – I’m sure it’ll give whatever download manager you’re currently using a run for your money.

Installing it (properly) in Ubuntu:

If you’re using a flavour of (Ubuntu) linux, you may want to set JDownloader up so you don’t have to start it by right-clicking on “JDownloader.jar” and selecting “Open with Sun Java JRE”. I know I did.

How to ‘install’ JDownloader:

This tutorial assumes you have Java installed and working. If you don’t have Java installed: How to Install Java in Ubuntu.

Download JDownloader, extract it to your Desktop. Download a JDownloader icon, rename it to “JDownloader.png” and put it in the JDownloader folder.

Open a Terminal (Accessories -> Terminal).

Create a JDownloader install directory:

sudo mkdir /opt/JDownloader

Move the extracted files to their new home (replace “X” with version number):

sudo mv ~/Desktop/JDownloader\ X.X.XXX/* /opt/JDownloader/

Change their ownership:

sudo chown -R $USER:$USER /opt/JDownloader
 
sudo chmod -R +r /opt/JDownloader

Make the JDownloader.jar file executable:

sudo chmod +x /opt/JDownloader/JDownloader.jar

Make JDownloader runnable from Terminal:

sudo touch /usr/local/bin/JDownloader
sudo nano /usr/local/bin/JDownloader

This opens the file for editing within the Terminal. Paste the following:

#! /bin/sh
java -jar /opt/JDownloader/JDownloader.jar

To save and close the file, press CTRL + X, then Y, then ENTER.

Make a menu item for JDownloader:

sudo nano /usr/share/applications/JDownloader.desktop

Paste the following:

[Desktop Entry]
Encoding=UTF-8
Name=JDownloader
Comment=Download Manager
Exec=java -jar /opt/JDownloader/JDownloader.jar
Icon=/opt/JDownloader/JDownloader.png
Terminal=false
Type=Application
Categories=GNOME;Network;
StartupNotify=True

Enjoy!

Credit to Kmassada for his post about installing Eclipse 3.4

Tags: JDownloader, Tutorial - 教程, Ubuntu

It took me awhile to understand what the ‘path’ attribute was for, and the differences between it and the ‘permalink’ attribute. I couldn’t find a clear explanation that explained the differences, and how one should use these attributes. I’ll explain the differences and how I use the attributes here.

Both attributes should be used for the ratings and comments widgets.

The ‘permalink’ attribute should be the full URL linking to the page that this widget mostly relates to. For this post:

permalink='http://pagesofinterest.net/blog/2009/03/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes/'

JS-Kit will use this attribute to link back to the page the widget mostly relates to, both in that page and elsewhere. In emails alerting people that their comment has a reply, in a page’s comment rss feed, in the most recent JS-Kit comments script, or anywhere else a link to the most relevant page is required.

The ‘path’ attribute is a different story. This attribute must start with ‘/’. This is because the ‘path’ attribute is appended to a site’s comment rss URL to give that widget’s comment rss – to view the comments rss for the whole site, go to the base comment rss URL. If a character other than ‘/’ is used, the comment rss for that page won’t work – see this example.

The ‘path’ attribute needs to be unique to the site. This means that no widgets should accidentally share the same ‘path’ attribute. If one wants a widget to be displayed elsewhere on the site, that widget’s ‘path’ attribute should be used. For example:

Code*:

1
2
3
4
5
6
7
8
9

<div style="text-align:center;">
	<a href="http://pagesofinterest.net/code-of-interest/">Slider's</a> User Rating:	
	<br />
	<br />
</div>
<center>
	<div style="text-align:center" class="js-kit-rating" title="Slider" view="split" starColor="Golden" permalink="http://pagesofinterest.net/code/of_interest.php" path="http://pagesofinterest.net/code/of_interest.php/slider">
	</div>
</center>

Result:

The ‘path’ attribute is what JS-Kit uses to differentiate between a site’s different widgets – if there was no way for JS-Kit to do this, then each widget on a site would always show the same data! The ‘path’ attribute for this page’s comments/ratings widget:

path='/js-kit-comments-correct-usage-of-the-permalink-and-path-attributes'

Correct use of these attributes allows one to display different widgets, with their own comment/rating information on the same page.

To display one JS-Kit Comments/Ratings widget in each blog post, one could do the following:

At the base of each post:

1
2

<div view='split' class='js-kit-rating' title='Title of Post' permalink='http://the-path-to-this/posts/permalink.html' path='/unique_path' starColor='Golden'></div>
<div class='js-kit-comments' path='/unique_path' permalink='http://the-path-to-this/posts/permalink.html'></div>

Note the ‘path’ for the comments and ratings widget are identical.

And once per page (Rapid Weaver users can paste this into the custom footer field):

1
2

<script src='http://js-kit.com/comments.js' type='text/javascript'>
</script><script src='http://js-kit.com/ratings.js' type='text/javascript'></script>

As long as you’ve used different paths, the comments/ratings should display correctly. Because of the path attribute, you’ll be able to change the permalink at any time, and the comments/ratings will remain the same (as long as you don’t change the path). I’ve done this for every blog post!

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Recent Comments PHP Script
Styling JS-Kit Comments

*Please forgive my lazy use of the center tag.

Tags: JS-Kit, Tutorial - 教程

This is a short tutorial that aims to explain how to place a search box at the top of the sidebar, above the navigation menu. This will require some fiddling with code – don’t be afraid! I’ll do my best to walk you through it.

This tutorial assumes the user has bought a copy of Rapidsearch 2.0.

First the code for a search box is required. An example (that you are encouraged to use) is shown below:

1
2
3
4
5

<div id="panel">
        <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
            <input type="text" name="query" id="search_site" value="DEFAULT_TEXT"         onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
        <input type="submit" id="search_button" value="Search"/></form>
    </div>

1) To use this code, open your website in Rapidweaver, press “Themes”. Select the theme you use for your site, and make a copy of it. Select the copy, right click and press “Reveal Theme Contents in Finder”. This will open a Finder window containing the files required to make your theme … your theme.

There are two files that need editing in order to make our search bar work: “index.html” and “styles.css”. Both should be visible in the Finder window.

2) Open “index.html” in a text-editor. I use TextWrangler, because it is free and provides syntax highlighting. If you are a serious coder, try Coda or Eclipse. Scroll down until you see:

<div id="navcontainer">

Copy the search box code (displayed above) just below this line, then change DEFAULT_TEXT to whatever text you want to be displayed inside the search box. You need to change PATH_TO_YOUR_SEARCH_PAGE to the path to your search page as well. It should have changed from this:

<div id="navcontainer">

To this:

1
2
3
4
5
6

<div id="navcontainer">
             <div id="panel">
            <form action="PATH_TO_YOUR_SEARCH_PAGE" method="get">
    <input type="text" name="query" id="search_site" value="DEFAULT_TEXT" onclick="clickclear(this, 'Search within this site')" onblur="clickrecall(this,'Search within this site')" />
    <input type="submit" id="search_button" value="Search"/></form>
          </div>

That has changed the theme’s template to include the search box above the navigation menu in the side bar.

3) This part will clear the default text when a user clicks inside the box, and restore it if the user deselects the box without entering a search term.

Still inside “index.html”, scroll up until you see:

<script type="text/javascript" src="/rw_common/themes/pagesofinterest/javascript.js"></script>

Directly beneath this line, paste this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<script type="text/javascript">
        function clickclear(thisfield, defaulttext) {
            if (thisfield.value == defaulttext) {
            thisfield.value = "";
            thisfield.style.color='DESIRED_ACTIVE_TEXT_COLOUR';
            }
        }
        function clickrecall(thisfield, defaulttext) {
            if (thisfield.value == "") {
            thisfield.value = defaulttext;
            thisfield.style.color='DESIRED_IDLE_TEXT_COLOUR';
            }
        }
    </script>

Replace “DESIRED_ACTIVE_COLOUR” and DESIRED_IDLE_COLOUR” with hex codes for your desired colours for these states. To avoid confusion: “active colour” in this case is the colour that the text will be when the user has selected the text box. I have mine set to #333333, which is the same colour as my body text. “Idle colour”, if you haven’t guessed already, is the colour that the text will be when the search box is not selected. I have mine set to be a very light grey: #C5C5C5.

If you’re not a computer, you’ll need a human-usable interface for generating hex colour codes, which are those nasty-looking 7-digit codes, like the two I mentioned above. To do this I use Dr. Peter Jones’ RGB Colour Calculator. If you don’t want to pick your own colours, you may instead use the colours of your theme. Have a poke around in “styles.css”, they’ll be in there somewhere.

4) There is a chance that your search box is in the perfect position already, but I’d say that chance is pretty slim. To remedy this, we now need to open up the “styles.css” file. Into this file, paste:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#panel{
        position: relative;
        left: 5px;
        width: 169px;
    }
    #search_site{
        color: #C5C5C5;
        font-size: 11px;
    }
    #search_button{
        position: relative;
        margin-top: 4px;
        margin-bottom: 4px;
        left: 96px;
    }

#panel contains the styling for the entire area within which the search box’s form, text area, and button reside. Adjusting the “left” positively will move the whole set left, adjusting it negatively to the right. Adjusting the “width” value will change the width. You may add anything you want here. I used W3Schools to learn about CSS syntax.

#search_site controls the styling of the search text box. I have set the default font colour and size here.

#search_button controls the styling of … the button. Use this to position the button. “margin” defines how much whitespace there should be between the element in question and its neighbours. Append “-left”, “-right”, “-top”, “-bottom” to “margin” to set the respective values.

Save both the “index.html” and “styles.css” files and preview your site. You should now see a search box above the navigation menu in the sidebar, in every page!

5) All we have to do now is create a Rapidsearch page, then modify it to work with our new search box.

So, create a Rapidsearch page, and configure the options to suit your desires.

Preview the page. When you are happy with the page’s appearance, publish the page to the same URL used in your search box, then press ⌘⌥U to view the page’s source. Copy all of the code by pressing ⌘A then ⌘C. Now open page inspector with ⌘⇧I, and uncheck “show in menu” and “enabled”.

Now create a HTML page, and paste the code you copied earlier into it. Open page inspector, change the page’s extension to PHP. Select the “Page” options icon and uncheck “Apply Theme”.

The following line:

var queryTerm = getUrlParam('query');

Must be replaced with:

1
2
3
4
5
6
7

<? php
if($_POST['query'] != ""){
echo "var queryTerm = '".$_POST['query']."';";
}
else{
echo "var queryTerm = getUrlParam('query');";
}

Make sure the URL to the HTML page is the same as the URL used in your search box, and publish.

There is a good chance that your search page will not have the correct styles applied to it, as the links to the external CSS sheets will probably be relative, not absolute. In order to fix this, you must manually correct each CSS link within your HTML page. You’ll know you’ve done it right when the page loads and is styled correctly. Safari’s Web Inspector can be useful for this – in Safari the hotkey is ⌘⌥I.

When you’ve finished with the CSS, re-upload your site, and begin testing.

Congratulations!

Tags: Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程

This post aims to give some tips and guidance on how to style JS-Kit Comments, so they closely match your blog’s theme.

I’ve used an external CSS file to style my comments. If you’re like me, you won’t want to read the rest of this tutorial, and would rather view the stylesheet directly.

Styling JS-Comments is really quite straightforward. I strongly recommend you read this post before moving on, as it contains tips on resizing JS-Kit elements, such as the width/height of comments, among other things.

Use of an external CSS sheet is advised, as it will allow the reader to apply the same styles site-wide with minimum hassle.

Stylesheets should be edited using your favourite text-editor. If you don’t have a favourite, I recommend Text Wrangler, which is an excellent (and free) editor.

I’m just going run through the stylesheet used to style my comments, as the possibilities are too numerous for me to list here. I encourage you to experiment – it is one of the best ways to learn CSS.

The relevant selectors are:

1) .js-singleComment
2) .js–comment-stripe-1
3) .js-singleCommentDepth0
4) .js-singleCommentDate
5) .js-siteAdmin

Note that the full list of selectors can be found using the FireBug addon combined with Firefox.

The first three selectors allow us to apply styling such that the first message of a thread will have style x, the next message will have style y, the next message will have style z, next style y, next z… This is not only pretty, but also makes it easier for the reader to quickly determine where a thread began, and clearly defines the boundary between each comment.

Here is the styling that I have applied to selector #1:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.js-singleComment {
-webkit-border-bottom-left-radius: 7px;
-moz-border-radius-bottomleft: 7px;
background: #ECF4FF;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles all comments that are: not the first comment of a thread, even numbered.

The first two lines give rounded corners in Safari 3 and Firefox 3.

The four lines below that control the background colour and the image that gives the shadow effect, implying that the comment is ‘œbelow’ the previous comment.

The next four lines control the borders – note the lack of a top border, which is taken care of by the image I’ve used.

Finally, the comment has some padding applied to it. I did this as the rounded corner combined with the top shadow image made text difficult to read in some places.

The styling I have applied to selector #2 is:

1
2
3
4
5
6
7
8
9
10
11
12

.js-comment-stripe-1 {
background: #E4EDF2;
background-image: url('http://pagesofinterest.net/images/transparent_shadow.png');
background-repeat: repeat-x;
background-position: top;
border: none;
border-left: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles comments that are: not the first comment of a thread, are odd.

The styling format is identical, I’ve just used different images and colours.

The styling I have applied to selector #3 is:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.js-singleCommentDepth0 {
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-bottom-left-radius: 11px;
-moz-border-radius-bottomleft: 11px;
background: #fff;
background-image: url('http://pagesofinterest.net/images/comments_border.png');
background-repeat: no-repeat;
background-position: left bottom;
margin-top: 13px;
color: #333;
border: 1px solid #ccc;
padding-left: 5px;
padding-top: 5px;
}

This selector styles the first comment of each thread.

This time, the first 4 lines control rounded borders.

The background image is now used to give the pleasing graduation effect at the bottom of the comment box, and the background colour is white.

The whole box has a border applied to it, and I’ve given the top a margin of 13px. This margin further differentiates the comment from any previous thread.

The padding is the same.

The styling for the final 2 selectors is:

1
2
3
4
5
6

.js-singleCommentDate {
font-style: italic;
}
.js-siteAdmin {
color: black;
}

The first styles the date, the second gives the Admin’s name a different colour.

And finally, upload your CSS file to your server, and include the following BELOW the JS-Kit Comment’s insertion code. It is important that the CSS is included after the JS-Kit code.

<link rel="stylesheet" type="text/css" media="all" href="PATH_TO/jskit.css" />

This will break XHTML validation, as the link tag is strictly not allowed anywhere but the head. For me the price is worth paying.

I hope you have fun styling your comments!

To learn more about being a JS-Kit Widgets Admin, consult the JS-Kit Admin Guide.

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘˜Permalink’ and ‘˜Path’ Attributes
Recent Comments PHP Script
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: Customization - 用户化, JS-Kit, JS-Kit Comments, Programming - 编程, Rapidweaver, Tutorial - 教程

The following are the exact steps I took to get OpenCyc running in Ubuntu 8.10. Without this thread I wouldn’t have been able to do it.

1) Install Java. In a Terminal:

~$ sudo apt-get install sun-java6-jre

2) Download OpenCyc

3) Unpack the downloaded file and move the folder to whatever directory

4) Within the OpenCyc folder, locate the “scripts” folder and open it. Open each script in Gedit and change the first line from*:

#!/bin/sh
to:
SHELL = /bin/bash

*Taken from DashAsBinSh.

5) In a Terminal, cd to the OpenCyc/scripts directory, then do:

(for 64 bit)

~$ echo SuSE-9.2-x86_64 > platform-override.txt

(for 32 bit)

~$ echo SuSE-9.2-x86_32 > platform-override.txt

Finally:

~$ ./run.sh

Note that the first time OpenCyc is run you may be in for a long wait – it took about 10~15 minutes on my laptop.

When it is finally finished loading, point a browser to:

Tags: AI - 人工智能, Cyc, OpenCyc, Tutorial - 教程, Ubuntu

Update: Added Trackback/Pingback to prefix snippet.

After being annoyed at the time it took to add my typical blog-post footer (RSS, Email subscription links, Social Bookmark links, JS-Kit comments), it finally dawned on me that I could do all this with one PHP script, have 1/3rd the code at the bottom of each post, and easily change the footer of EVERY BLOG POST AT ONE TIME.

The last thing was the decider, as I recently changed the width of my entire site, and wanted the comments/social bookmarks list to fit nicely with the new width, but didn’t relish the thought of changing the fiddly code I use at the bottom of each post.

So I created a PHP script that is included in the “Prefix” of my blog pages. It consists of one function that is passed a few pieces of information, and spits out a nicely formatted footer section.

This post will explain how to use this script in your site. I have packaged the script + prefix + function call into three snippets, which can be downloaded here: Fancy Footer.

1) Double click on the snippets to install, close and reopen RW. Press ⌘5 to open the snippet window, and find the “PREFIX – RSS, Email, Social Links, Comments + Ratings Inserter” snippet. Double-click on this snippet to go into edit mode.

2) I have labeled each segment clearly, so that you may easily delete those you do not wish to display in your blog. As an example: I do not want the RSS/Email links to display. I press ⌘5 to open the snippet window, and double click on the PREFIX snippet. I search for the line:

//DON'T WANT EMAIL/RSS LINKS? DELETE FROM HERE:"

Then select the lines between it and the line that reads:

//TO HERE!

Then I press delete. The script will no longer output RSS/Email links.

The Social Bookmark links come in two flavours: one with links that behave normally, with the page loading in the current window. The other has links that will open in a Greybox, if Greybox has been set up in your theme. Jan Erik Mostr̦m has written an excellent tutorial explaining how to set a theme up for Greybox. It can be found here: RapidWeaver Рusing Greybox in a theme. If you decide to use the Greybox enabled section, comment the standard section out, and uncomment the Greybox section, as per the instructions within the file.

If you decide to use the RSS/Email and/or Social Bookmarking Sections:

a) The RSS/Email and Social Bookmarking sections require the images included in the download. These images need to be uploaded to your server. Do this with an FTP program, then open your browser and find the folder you uploaded the images to and copy the URL.

As an example: the images used in my footer are located at: http://pagesofinterest.net/images/, and this is the URL that I would copy for this step.

b) If you closed the snippet window, reopen it and double click on the PREFIX snippet to open it for editing. You will need to replace PATH_TO with the URL you copied in a, above. I find this easier to do within a text editor using Find & Replace. To do this simply select the entire text of the snippet and copy it into a text editor window, then use Find & Replace to replace PATH_TO with the URL you copied. When you’re done, double check the new text. Where an image’s src tag read “src=”PATH_TO/image_name.jpg”", it should now look something like (using the example URL):

"src="http://pagesofinterest.net/images/image_name.jpg"

Now select all of the text and copy it back into the snippet window. Press save.

The Email and RSS section require you to have an RSS feed for your blog, and a “subscribe to this blog via email” page. If you lack one of these, you won’t be able to use this section. Just delete it, as described above.

3) The JS-Kit section is highly customizable. I have set it up so that there will be a “comment count” line with 5-star user-ratings below. Beneath these will be a “Leave a Comment!” link, under which the comments will be displayed.

Note that any part of the JS-Kit section can be changed. As there are such a large amount of options, I’ve created a list of the parts I think you’d most likely want to play with:

Type:

- The ratings widget may be configured to display in three modes: combo, split and score.

Combo displays one row of 5 stars.

Split displays two rows of 5 stars – the left row represents the total rating, the right the user’s rating.

Score is actually an entirely different method of rating – thumbs up/down.

Once you’ve decided which you would like to use, replace “view=’combo’” with your desired style.

Options:

1

view='split', view='score', view='combo'

starColor='Golden':

- Colour of rating stars. Colour options: Ruby, Red, Golden, Blue, Green, Emerald, Indigo, Violet.

No ratings:

- Delete the following:

1

<div view='split' class='js-kit-rating' title='".$post_title."' permalink='".$post_permalink."' path='".$post_permalink."' starColor='Golden'></div>

paginate='10':
- No more than 10 comments will be displayed. If there are more than 10 comments, they will be split into “pages” that are accessible via small links or arrows at the top/bottom of the comments section. If you do not care how many comments are displayed at a time, remove this.

Anything coming after “Label:”:

- Will be displayed as a label. Change this text to whatever you wish.

The line:

1

<div class='js-CreateCommentBg' style='width:100%;border:none;'>

- style='SOME_CSS_STYLE' your desired styling options here. currently set so that the comment area will be as wide as the div it is
nested in.

The line:

1

<div><textarea name='js-CmtText' rows='6' cols='62' style='width:550px;height:200px;'></textarea></div>

- cols='XX': where XX = the number of columns for the comment text area.
- style='SOME_CSS_STYLE' your desired styling. Currently set to be 200px high and 550px wide.

The line:

1

<div class='js-commentAvatarArea' style='min-width:550px;max-width:551px;'></div>

- style='SOME_CSS_STYLE' your desired styling. If changing width, you must use both min and max values – it is a hack fix but it works.

Remember that everything here is open to alteration. Don’t like the order in which components are displayed? Swap their position and see what happens!

4) Open your blog page. Press ⌘⇧I to open the Page Inspector, select the “Header” tab. Now select the “Prefix” tab, and drag the modified snippet into this field.

5) Assuming you are using the JS-Kit Comments sections, change to the “General” tab of the Page Inspector. Check the “Footer” box, and copy whatever footer text you normally use into it. Append the following to this:

1

<script src="http://js-kit.com/comments-count.js"></script><script src="http://js-kit.com/comments.js"></script><script src="http://js-kit.com/ratings.js"></script>

These are required for JS-Kit to function. Placing them in the footer means that the important stuff – your blog content – will load more quickly. The loading of these scripts will not cause the page load to “freeze”.

6) Choose a blog entry and drag the BLOG ENTRY snippet to whatever position you want the items to appear. Select the code that appears and press ⌘. to ignore formatting. This is very important.

The “filler” parts that are within the insert_comment() brackets need to be replaced with your information:

RSS_URL: The URL pointing to your RSS feed.
EMAIL_SUBSCRIPTION_URL: The URL pointing to your “Subscribe to this blog via Email” page.
POST_FULL_PERMALINK: The FULL permalink for this post. As an example, for this page this is:

“http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php”

POST_TITLE: The title of this post.
SCROLL_FROM_TOP_TAG: The tag for the div a “Scroll to Comments” anchor would scroll to, if you were using Scroll to Anchors With jQuery.
LEAVE_A_COMMENT_LABEL: The label for the “Leave a comment” link that when pressed allows a visitor to leave a comment.
SCROLL_TO_TOP_TAG: The tag for the anchor that would scroll to the top of the page, if you were using the above scrolling method.

IMPORTANT:

If you decide not to use any of the sections or scrolling, you MUST replace values related to those sections with empty quotes. As an example, here is a fancy footer BLOG snippet that is not displaying RSS or EMAIL links, and does not use SCROLLING:

<? php insert_comment("","","http://pagesofinterest.net/mikes/blog_of_interest_files/fancy_footer.php","Fancy Footer - Usage and Tips","","Like these snippets?  Leave a comment!",""); ?>

Notice the use of empty quotes in place of variables that are not required. Not doing this correctly will give visitors an error page instead of your lovely blog post.

That’s it!

Probably best to try this out on a test blog (I did) before committing changes to your precious main blog. Play with it, publish it to a server and see if the results are what you expected. When you’re sure you have it how you want it, copy the code over to your main blog.

I’ve used a stylesheet to style my JS-Kit comments , and I am really pleased with the result. I plan on writing a post explaining how to style comments, and will link to it from here when it is done.

Enjoy!

To learn more JS-Kit tricks, read the following posts:

JS-Kit Comments + Greybox on Any Page
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: PHP, Programming - 编程, Rapidweaver, Tutorial - 教程

This post will introduce and explain the “scroll to anchor” method I have used throughout this site. For a demo, click “scroll to Comments”, which you’ll find above.

See how it smoothly scrolls the page until it reaches the comments section? There is another example of it in action on my Photo Selection Smorgasboard, where I’ve used it to allow people to scroll to the different sections of the page, then back up to the top.

Why should you use it? While the traditional method is fine, it doesn’t really scroll, instead snapping straight to the anchor. I find this quite jarring – not part of the experience I attempt to offer visitors to my site.

The scroll method that I use is straight-forward, and is easy to add to any page. The javascript code is taken from this page: Animated Scrolling With jQuery. I found that tutorial a little hard to follow ( I think it is written for people with far more skill than I possess ), and was only able to get nice scrolling to work after examining that page’s source and trying things out on my own. The javascript I’ve packaged into a snippet for you is taken from that site, and can be found at the usual place – Code of Interest.

As I found it a little difficult, I thought I’d share with you, in simple English, exactly how to implement this smooth scrolling in your site.

1) Download the jQuery javascript library, download the Simple Scroller Snippet.

2) Upload the jQuery file to your server, open page inspector (⌘⇧I) and select the “Header” tab. Into the Header field, paste:

<script type="text/javascript" src="PATH_TO/jquery.js"></script>

Replace PATH_TO with the URL pointing to this file.

3) Change from the “Header” tab to the “Javascript” tab. Drag the “Simple Scroller” snippet into this field.

If you have existing jQuery code in your javascript tab, remove the 1st and final lines from the “Simple Scroller” snippet, and paste the remainder into the javascript tab, between the first and final lines of the existing jQuery code. Reason:

$(document).ready(function(){
    //    jQuery code
    });

Wraps jQuery code, and is needed only once.

Ok, so this page is now set up for scrolling. We just have to add something to scroll from/to.

4) To add a link that scrolls to point X, use:

<a href="#X">Scroll to Point X</a>

And at point X:

<div id="X">Point X</div>

That’s it! When a visitor clicks on the link, the browser window will scroll to Point X – if javascript is enabled, the scrolling will be smooth and pretty, but if it isn’t, it’ll still scroll – it just won’t be as luxurious.

To make the “Scroll to Comments” links, this is what I use:

At the top of the page:

<div id="topScroll_to_Anchors"><a href="#commentsScroll_to_Anchors">Scroll to Comments</a></div>

At the top of the comments section:

<div id="commentsScroll_to_Anchors"></div>

Finally, beneath the comments section:

<a href="#topScroll_to_Anchors">Scroll to top</a>

Easy.

Simple Scroller Snippet’s User Rating:

Tags: Programming - 编程, Rapidweaver, Tutorial - 教程

I’ve been using JS-Kit for comments for a long time, and I’ve been extremely impressed with the quality of their service.

They’ve recently acquired Haloscan, which is great – I dropped Haloscan in favour of JS-Kit some time ago, as I didn’t like the lack of control I felt I had over my comments. I haven’t looked back.

A few weeks ago I was showing my site to a fellow student, when she asked me why people were unable to leave comments on my photo pages. I couldn’t think of a reason, so as soon as I got home I set about fixing this lack.

After thinking about the problem for a short time, I realised that I didn’t want comments to be visible on the page in case one set of photos became wildly popular (yeah, right); which would result in a page of comments with a few photos, instead of a page of photos with maybe one or two comments. For some reason, Greybox popped into my head, and wouldn’t leave. A few hours later, this happened: Hangzhou Day 1.

If you like the effect, read on. Below is a short tutorial explaining how it was accomplished.

1) You must first have Greybox integrated with your site. Jan Erik Mostr̦m has written a tutorial explaining how to do this: RapidWeaver Рusing Greybox in a theme.

When you’re done with that (please make a test page to verify Greybox is working), head over to Code of Interest and download the Friendly Comments snippet.

Friendly Comment Snippet’s User Rating:

2) Open your RW project, select/create the page you wish to add JS-Kit comments to.

3) Open the page inspector, go to the Header > CSS tab. Paste the following CSS:

#comment{
height: 40px;
visibility: hidden;
font-size: 13px;
}
.href{
font-size: 15px;
}
#subtext{
height: 12px;
position: relative;
top: -20px;
visibility: hidden;
font-size: 8px;
font-style: italic;
}

Please note that the CSS may require some editing to ensure the link to the comment page matches the style of your site. Not all of us adore grey links.

The CSS reserves a space for the comments link, which is generated when the page has finished loading.

4) Still in the page inspector, switch to the Javascript tab. Drag the Friendly Comments snippet in. Close the page inspector.

Please note that if you are using a different script on the page that uses the “addLoadEvent” function, you don’t need to add the function again. You will, however, need to make a call to it:

addLoadEvent(friendlyComment);

Create a new HTML page. The following code should be modified, then pasted into this page:

A_TITLE = a title (do this now, it’ll come in handy in the future ;)
PATH_TO_MAIN_PAGE = full URL to the page containing the link to this comment page.

As this page will only be displaying comments, it won’t need much of the styling required for the other pages in your site. The way I accomplished this is possibly not the best, but it worked for me. I copied the CSS from the styles.css file for the theme I use, pasted it between tags, and removed the information from the {…} for each item. It took awhile. I suggest you work through the rest of the tutorial and preview your work to see if you need this step.

View the CSS example

Now you should upload the HTML page.

6) On your main page, wherever you wish the link to the comment page to appear, paste* the following:

0 Leave a comment!



    
(Comments will open on top of this page)


     

You will need to change the following:

***X = Horizontal size of the comment Greybox
***Y = Vertical size of the comment Greybox
LINK_TO_THIS_PAGE = the full URL to the page this code is to be pasted in
LINK_TO_COMMENTS_PAGE = full URL to the comments page
TITLE_OF_COMMENTS = Text you wish to appear at the top of the comment Greybox

This code should go in either the main body of the page or the sidebar. On my photo pages I’ve pasted it into the “header” area of the Rapidflicker plugin.

As an example, this is the exact code I use for my Hangzhou Day 1 photo page:

0 Leave a comment!



    
(Comments will open on top of this page)


    

Back to step #5

*Remember to select the pasted code and either choose “Format > Ignore Formatting” from the RapidWeaver menu, or press “⌘ + .”

Always do this when pasting code. Always.

If you don’t do this, there is a good chance that the code will break. Always do this!

As an added precaution, open the Page Inspector, go to the “General” tab and choose “Output: Default”. This will stop RapidWeaver from inadvertently breaking PHP or HTML code.

To learn more JS-Kit tricks, read the following posts:

Fancy Footer
JS-Kit Comments for Each Blog Entry
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes
Recent Comments PHP Script
Styling JS-Kit Comments
JS-Kit Comments: Correct Usage of the ‘Permalink’ and ‘Path’ Attributes

Tags: JS-Kit, Products - 产品, Programming - 编程, Rapidweaver, RW Tutorial - RW教程, Tutorial - 教程