I’ve used Listeners a lot in Java. The standard listeners have always been sufficiently flexible for my needs.

Until today.

This tutorial was all I needed to quickly implement my listener: Listeners in Java

It’s clear, succinct and comprehensive. When you need to implement your custom listener interface, check it out.

Tags: Java, Programming - 编程

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 - 教程

About a month ago, when reading DBPedia data into a database, I discovered ‘/uXXXX’ appearing where pretty unicode characters should be within my strings. The strings were to be compared to … other strings, which would have the proper unicode characters, so I had to replace the ‘/uXXXX’ in my strings. I couldn’t find a class to do this, but found enough information to understand what needed to be done.

The below function is what I came up with.

/**
 * Strips /uXXXX from a string and replaces it with the correct unicode character (for example: '\u1E09')
 * 
 * @param slashed string containing '/uXXXX' to be replaced with their Unicode characters
 * @return Unicode string with '/uXXXX' converted into Unicode.
 * @author Michael Robinson mike@pagesofinterest.net
 */
public String unslashUnicode(String slashed){
 
	ArrayList<String> pieces = new ArrayList<String>();
 
	while(true){//while there is /uXXXX in the string
 
		if(slashed.contains("\\u")){
 
			pieces.add(slashed.substring(0,slashed.indexOf("\\u")));//add the bit before the /uXXXX
 
			char c = (char) Integer.parseInt(slashed.substring(slashed.indexOf("\\u")+2,slashed.indexOf("\\u")+6), 16);
 
			slashed = slashed.substring(slashed.indexOf("\\u")+6,slashed.length());
 
			pieces.add(c+"");//add the  unicode
		}
		else{
			break;
		}
	}
	String temp = "";
 
	for(String s : pieces){
		temp = temp + s;//put humpty dumpty back together again
	}
	slashed = temp + slashed;
 
	return slashed;
}

Note that my strings only ever contained unicode slashed as ‘/uXXX’, never as ‘/UXXXX’. The above class, therefore, will need some modification if it is to be used with capital ‘u’ slashed unicode characters.

Tags: Class, Java, Programming - 编程, Tutorial – 教程

While migrating my blog articles from Rapidweaver to Wordpress I stumbled across some rather odd behaviour. All posts in http://pagesofinterest.net/blog/2008/06/ were displaying a garbled version of a particular post in that directory. The bottom of each affected post had the following php error message:

Fatal error: Call to undefined function insert_comment() in /home/pagesofi/public_html/wordpress/wp-content/plugins/exec-php/includes/runtime.php(42) : eval()’d code on line 131

After much investigation, I narrowed it down to one thing – Exec-php and WP-Syntax battling for control.

Exec-php was attempting to execute the line below, when there was no whitespace between

<? and php

For example:

<? 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!",""); ?>

Obviously, I can’t show you the code that causes the craziness.

Keep this in mind if you’re also using these plugins together. If you do run into this problem, open the post that is causing it for editing, and copy its entire contents into a text editor. Paste each line into the Wordpress edit text area, and press save, then view the post. Continue until you see the above error. Fix this line, then continue down the post. The point of this is to find each line that causes this error, and to fix it.

Tags: Exec-PHP, PHP, Programming - 编程, Wordpress, WP-Syntax

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 - 教程

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 hit a brick wall with my plugin development, so I spent some time updating the Chinese Idiom Database.

A long time ago a kind person emailed me with some suggestions for the database. I thought all of his ideas were wonderful, and have just finished implementing them all, plus some minor improvements to the code, which will make further updates less painful. As this database was my first attempt at PHP programming, the code was … messy.

I also implemented a few things I wanted to do a long time ago, but couldn’t because of the state the code was in.

These are the changes:

There is now an “All Idioms” page that displays all the idioms’ English meaning, which will make it possible for people just starting to learn Chinese to browse idioms.

Both the English and the Chinese “All Idioms” pages’ links open in a Greybox above the page, which avoids a full page load.

One may move forward or backwards through the idioms within the Greybox, using the “Previous, Next” links.

Idioms may be given thumbs-up/down ratings.

Each time an idiom is returned as a search result or viewed by following a link from one of the “All Idioms” pages, a count is incremented. This will allow us to see which idioms have been viewed the most, which will give me some idea of how many people actually use the database (if any at all).

The hardest part was making the Greybox pages show the “Next/Previous” links, but that was only hard because I am a still pretty new to MySQL. During the page generation, I needed to be able to pull the idiom/English translation from the next and previous entries in the list of all idioms. After much irritation, I managed to do it like this:

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

$result = mysql_query("SELECT * FROM idioms WHERE zh_idiom!=''") or die(mysql_error());
	$result_copy = mysql_query("SELECT * FROM idioms WHERE zh_idiom!=''") or die(mysql_error());
 
	$prev =  mysql_result($result_copy, mysql_num_rows($result_copy)-1 ,'zh_idiom'	);	
 	$next =  mysql_result($result_copy, 1 ,'zh_idiom');
 
 
 	$count = 0;
 
 	while($row = mysql_fetch_array($result)) {  //make one page for each idiom
 
	$file_name = $row['zh_idiom'] . ".php";	
 
    $file = fopen($file_name,"w");
 
	$update_count = "<?php ".'$'."dbhost = 'localhost';
				 ".'$'."dbuser = 'pagesofi_student';
				 ".'$'."dbpass = '".'$'."a|Qt;jXg+Nf';
				 ".'$'."dbname = 'pagesofi_idioms';
 
				 ".'$'."conn = mysql_connect(".'$'."dbhost, ".'$'."dbuser, ".'$'."dbpass) or die('Error connecting to mysql');
 
				mysql_select_db('pagesofi_idioms');
				mysql_query(\"UPDATE idioms SET times_accessed=times_accessed+1 WHERE zh_idiom='".$row['zh_idiom']."'\") or die(mysql_error());
 
				".'$'."result = mysql_query(\"SELECT * FROM idioms WHERE zh_idiom='".$row['zh_idiom']."'\");
 
				".'$'."count = mysql_fetch_array(".'$'."result);
				?>";
 
	$top =  "<META http-equiv=Content-Type content='text/html; charset=UTF-8'><head><link rel='stylesheet' type='text/css' media='screen' href='idioms_individual.css' /></head>
        ".$update_count ."
 
        <title>".$row['zh_idiom']."</title>
        <html><body><p></p>
 
<p>".$row['zh_idiom']."</p><br>".$row['pinyin']."<br><br>". "<p1>".stripslashes($row['en_translation'])."</p1><br><br><p5>" . $row['example'] . "</p5><br/><br/><p2>Keywords: " .$row['key_word']."<br/>Viewed <?php echo " .'$'. "count['times_accessed'] ?> times. <br/>Entered by ".$row['creator']." on ".$row['date_created']."</p2><br/><div class='js-kit-rating' view='score' title='".$row['zh_idiom']."' path='".$row['zh_idiom']."' permalink='http://pagesofinterest.net/idiom/search_results.php?zhongwen=".$row['zh_idiom']."'></div>
<div id='nextPrev'><a id='prev' href='".$prev.".php'>Previous</a><a id='next' href='".$next.".php'>Next</a></div>
<script src='http://js-kit.com/ratings.js'></script>
</body>
</html>";
 
fwrite($file, $top);

I’m sure that my way is not the best way, but it works. If the database ever becomes massive, or I can’t find anything better to do, I’ll look at changing it.

As this script is only run when an idiom is added, so a little inefficiency is OK, right?

Shhh… I’ll make it better later, promise!

Tags: Chinese Idioms, Culture - 文化, MySQL, PHP, Programming - 编程, Rapidweaver, 成语

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 - 教程

Instead of using Cocoa to create my latest RW addition, I’ve decided to use Java.

Why? Because I don’t know Objective C, and don’t have time to learn it right now.

The program won’t be any worse because of this decision. I think, actually, it will be better, as I at least kind of know what I’m doing in Java. Kind of.

So I’ve set aside the whole weekend to do it – I’ll hopefully have it done by Sunday.

Until then!

Ah, also I’ll write a short tutorial on how to use JS-kit comments with greybox.

Edit: I failed, it’ll have to be done in ObjC. Hopefully I get a chance to try again this year.

Tags: Java, Programming - 编程, Rapidweaver

I released the Smart Buttons last night, and displayed them with my new store layout.

GreyBox is so good, I keep thinking of new ways to use it.

Now that the Smart Buttons have finished, I feel it is time to move onto another RW related idea. This will be a stand-alone program – a RW helper if you will.

And that’s about all I have to say on the subject at this time.

I’m off to read the Cocoa manual.

Tags: Cocoa, Programming - 编程, Rapidweaver

Late last night I finally finished my first Smart Block Package!

30 user-configurable Smart Blocks, each with attractive rounded corners – each simple and easy to use.

• Block width
• Title
• Title alignment – left, center, right
• Title font size
• Title font e.g Arial
• Title colour – #FF0000 or RED
• Main text – HTML is OK too!
• Main text alignment – left, center, right
• Main text font size
• Main text font
• Main text colour
• Block ID

I would have released them sooner, but you know … Internet Explorer got in the way.

If you’d like to see how they look, head over to the Blocks Smorgasboard! After that, if you’d like to learn more about them, head over to Code of Interest.

Also, I had my last exam today, which is a real relief. Now I can spend some time working on my next idea, which is a secret! It should be released soon (within 3 days), so you won’t have to wait too long :).

Tags: Products - 产品, Programming - 编程, Rapidweaver

I have just finished adding a JS-Kit Comments / Greybox comination to every one of my photo pages.

To quote Apple’s Dictionary:

tedious |ˈtēdēəs|
adjective
too long, slow, or dull: tiresome or monotonous : a tedious journey.

Oh yes, it was tedious. But it’s over now.

Why don’t you go and have a look?

Photos of Interest

If you like the effect, and want to know how I did it just let me know and I’ll put together a little tutorial + snippet for you.

Oh yeah, and my exam wasn’t as bad as I thought it was going to be.

Tags: JS-Kit, Programming - 编程, Rapidweaver

The solution for the ’sidebar explosion’ effect that the Archive Annihilator caused occurred to me earlier today. The fix was pretty simple, the fact that I didn’t think of it right away is a little embarrassing.

The update has been uploaded, and is available here.

Tags: Javascript, Programming - 编程, Rapidweaver, Snippet - 小片

It sure has been a long time since I posted here.

I’ve been busy… Though I can’t say this semester has been horrible, I can’t say it has been very enjoyable, either. Being reminded that I had a COMP paper remaining, after coming back from our wonderful trip to China was not fun. That paper is very very hard, and makes me stressed. Even after completing an assignment, I am not sure what we were meant to do. My assignments tend to pass the required tests, however, regardless of their creators lack of understanding. I have one more assignment left for this paper, and I hear from the lecturer that it is “not going to be easy”. I think he was implying that the previous 5 assignments have been easy. I assure you, they were not. I shudder to think what hideous task he has waiting for us. He really makes work for himself, when he gives me such difficult work. He must know that I will be emailing him every half hour with (what would be to him, I guess) inane and obvious questions. Questions like:

So the binary “whatchamacallits” for each index could be:

000
010
100
110
001
011
101
111

Right?

This would let “us” know which of the variables were true for each index, and allow “us” to do our thing?

Is this at all correct?

Am I getting closer?

Mike

Actually, that is less desperate than normal. He answers them promptly, and I usually find the comments helpful.

Though I don’t like the paper, I don’t mind being forced to complete it (it is a compulsory for my major), as it makes other, non AI related programming seem like actual fun. For example, this weekend I created The Chinese Idiom Database, partly because I wanted to learn how to use MySQL & PHP, and partly because the other idiom databases I could find were … somewhat lacking. One of them appeared initially promising, returning a good number of idioms for my search “orange”, but it fell over when I selected an idiom to view. The idiom’s information was presented in some encoding that my browser doesn’t understand:

Stupid Big5

This may, or may not be their fault. Whatever, I can’t use their database. There were one or two others, but either the layout or the search method were seriously flawed.

Mainly I wanted to make my own.

You can find it by clicking on the “Idiom DB / 成语资料库” link in the sidebar.

I’d say I enjoyed about 15% of the creation process. The rest was extremely frustrating. Prior to creating the database and associated pages, I knew NOTHING about MySQL or PHP. This meant that any error I got didn’t make sense to me, and help (in the form of Google) would more often than not confuse the crap out of me. I found two great tutorials, and combined with the excellent W3Schools site, I managed to throw together what you’ll see, if you’d only CHECK IT OUT!

The tutorials are: a MySQL tutoral, a short tutorial on how to create a login/registration area, and W3Schools.

The thing that I like the most about The Idiom Database is that you can create an account and add idioms yourself! I hope that people do, as I know there are a lot of Chinese Idioms out there, and I know I can’t add them all myself. Users can also edit idioms they have entered, or if they have special permissions, can edit any entry. If you think you deserve special permissions, please send me an email! The reason I had to make it so people can only edit their own entries is because I don’t want one bastard to come along and screw it all up by changing all the entries to something rude or nonsensical. If people start entering stupid things, Ill change their account permissions so that any idiom entered by them goes into a moderation queue, waiting for me to OK the entry before it gets displayed with other idioms in search results.

Well, that is all for now, I have to go out. When I get back I’ll let you know about other things that have been going on!

Tags: Idiom - 成语, Programming - 编程