In this short tutorial I will describe how to use the JS-Kit commenting system in Rapidweaver. By then end of this tutorial you will have learned how to insert the code into yor blog so that each post has its own comments - the comments will show in permalinks, category and tag versions of each post. When someone comments on a post, JS-Kit will notify you by email. Included in the email that you, and other people who comment then recieve replies are sent will be a link to the permalink entry of the post in which the comment is displayed. You will be able to use JS-Kit’s excellent moderating system to manage your comments.

I’m going to go ahead and assume you want to integrate JS-Kit’s commenting system with the JS-Kit ratings widget, like I have. If you don’t just ignore the parts of the below tutorial that mention the ratings widget.

1) Open RW, select your blog page. Open the page inspector, select the “General” tab. Under “Override Default Site Settings”, check “Footer”. Copy the following code into this field:

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

To use the ratings widget as well, you’ll want to add this code also:

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

If you have other information you wish to see included in your footer, like I do, then you’ll need to include that here as well. For example, this is what my custom footer field contains:

<script src="http://js-kit.com/comments.js"></script> <script src="http://js-kit.com/ratings.js"></script><a href="http://topsites.blogflux.com/travel/"><img style="border:none;" src="http://topsites.blogflux.com/track_141347.gif" alt="Travel Blogs - Blog Top Sites" /></a><br /><a href="http://blogshares.com/blogs.php?blog=http%3A%2F%2Fpagesofinterest.net%2Fchina_blog%2Fchina_blog.php&user=56480"><img src="http://blogshares.com/images/blogshares.jpg" alt="Listed on BlogShares" width="117" height="23"/>
<p style="text-align: center;></a>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">
<img alt="Creative Commons License" style="border-width:0" src="http://creativecommons.org/images/public/somerights20.png" /></p>
</a></div>
<br />This work is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/nz/">Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License</a>.<br /> <br />Michael Robinson -
<a href="mailto:est.ergo.sum@gmail.com?subject=China%20Blog">
Contact</a>

2) Close the page inspector - we’re done with the tricky stuff.

3) This part can be rather tiresome - it depends on how many old posts you want to add the option to comment to.

At the very bottom of each post you wish to allow users to comment on, paste* the following code:

<div class="js-kit-comments" permalink=""></div>

If you want to use the ratings widget as well, you should paste this (below includes the above code - above is for those who do not want to use ratings, below is for those who want both):

<div class="js-kit-rating" title="" path="PATH_TO_POST_PERMALINK" starColor="Golden"></div>

<div class="js-kit-comments" permalink="PATH_TO_POST_PERMALINK" path="PATH_TO_POST_PERMALINK"></div>

Replace “PATH_TO_POST_PERMALINK” with ... the path to that post’s permalink. For example, this is what I have at the bottom of this post:

<div class="js-kit-rating" title="" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" starColor="Golden"></div>
<div class="js-kit-comments" permalink="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php" path="http://pagesofinterest.net/mikes/blog_of_interest_files/js-kit_comments_for_each_blog_entry.php"></div>

And that’s it! Comments should now be enabled for that post.

To moderate posts, you’ll need to go to the JS-Kit Settings page. If you don’t already have one, you’ll have to create an OpenID account. Choose from the list of providers listed beneath the sign-in box.

If, after logging in you don’t see your site anywhere, you’ll need to “claim” it. Just enter the url of your site in the labeled text box, and follow the instructions. They’ll send you an email, and once you’ve followed the link included you will be able to moderate your site’s comments.

Enjoy!

If you would like to explore the options available to users of JS-Kit, head over to the website: JS-Kit

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.

 Subscribe in a reader

 Subscribe by Email

Scroll to top

Tags: Rapidweaver | Tutorial | Javascript | RW Tutorial

I’ve been pretty busy lately, writing and reading about code. Not really for the right reasons though...

I have an exam, see. It’s tomorrow. It is going to be really hard, and the subject bores me. I think that’s why I’ve been avoiding it. It’s a bit late now, but I recently found out some good news: It’s OPEN BOOK, and THREE HOURS! These two things are excellent. The first because it means I can print all my notes and bring them, along with my text book (and computer?? (doubt that!) into the exam. The second because it means I have a lot of time to flick through the book/notes looking for likely answers. Like I said, it is a hard paper. I didn’t really understand what the teacher talked about in class, and I didn’t really understand the projects. I passed them all, even got 90% for a couple - but generally I didn’t know what I was doing.

The only assignment I really liked was the Genetic Algorithm one, which I actually thought was pretty fun. I plan to implement that algorithm in PHP, so I can show it off on my site. The only thing stopping me is that I can’t think of a “real world” application of the algorithm, which I think is important - no point saying “Hey! Look at what I can do!” if what I can do isn’t useful. The program we had to write took sets of characters, say ABC AB ABD AC, and had to output the smallest subset of given sets that contained all characters. The program I made did this well, it output the optimum subset every time, even if it was given only a limited number of generations. I was happy. If you think of a way to apply this to a real problem, maybe even to a RW related problem, let me know!

So, to avoid thinking about my exam, I’ve been thinking about RW problems, and trying to create (at least in my head, if not in reality) effective solutions for them. One example is the “Archive Annihilator”, which replaces the silly archive links list that is the only option in RW. Well, the only option aside from off, which is what most people choose after a year of blogging.

Also I have just finished hooking up js-kit’s awesome commenting system with GreyBox, which I’ll put in all of my photo pages. You can see an example of the final result on this page: Beijing Day #2; Great Wall.

I’ve got a few tutorials planned, one explaining how to embed multiple PhotoAlbum slideshows in a blog post, like I have done in my post about the Besta Ta-3000 electronic dictionary (I wanted to use the slideshow to demonstrate a) how one inputs characters and b) the “show stroke order” function of the dictionary). The second tutorial will be about creating the same comments in GreyBox system mentioned above.

Well... I’d better go and “prepare” for my exam now ... (prepare = print out the notes and put them by my shoes so I don’t forget them).

 Subscribe in a reader

 Subscribe by Email

Tags: University | COMP

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.

First you need to have the code for a search box. I got mine by adding a Rapidsearch page to my website, uploading the page, viewing it’s source then copying the code that created the searh box in that page. This tutorial could be modified to work with Google’s custom search. If you do this, please let me know which steps needed modifying and I’ll include them here.

Luckily you won’t have to do that, because I’ve copied the required code for you (plus an extra that you’ll love):

<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:

    <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:

<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:

#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!

Congratulations!

 Subscribe in a reader

 Subscribe by Email

Tags: Rapidweaver | Tutorial | RW Tutorial

-> Updated (17/09/08) <-

While attempting to read a Chinese sentence, if I come across characters that I haven’t seen before, I usually can’t understand the meaning of the sentence. Sometimes I can guess, but that has often resulted in some hilariously wrong translations. My desire to read Chinese improved with my ability, and this problem became more intrusive the more I tried to read - like it fed itself. To solve this problem I bought a Chinese-English electronic dictionary while I was in Shanghai. We went to “Cybercity”, which is on 徐家汇路 (xú jiā huì). Cybercity is my favourite place in all of Shanghai. After perusing the selection, I decided to buy the Besta TA-3000, which looks more like a PDA than a dictionary.

Before buying the Besta, I had purchased a cheaper model. I thought I was being really clever - an all Chinese menu would help me learn more Chinese, right? Wrong. With the first dictionary, instead of looking up words I didn't know I'd just skip over them. I didn't want to spend 5 minutes fumbling through the menu, followed by the realisation that as I didn't know the pinyin, I couldn't look up the damn word anyway! A few weeks after buying it, I realised that my “cleverness” had resulted in a reduction in my desire to learn new characters, which was no good at all.

As soon as I started using the Besta TA-3000 (sounds like a term from The Terminator, right?), I found things were different. To search for a word using a standard dictionary, one must know the pinyin, and enter it using the keyboard. There are two problems with this: the keyboard is usually too small for fat fingers like mine, and more often than not I don’t know the pinyin of the word in question. The Besta dictionary avoids “sausage finger” issues by utilising a touch-screen interface. It circumnavigates the pinyin problem by allowing the user to write characters directly into the search box! It even recognizes “human” writing, by which I mean it doesn’t require one to write the character precisely to recognize the character. And if it’s unsure, it shows the user a list of “guesses” to choose from:

This method of searching is completely hassle-free, and exceedingly useful.

After entering the characters and pressing the Search button, the user is taken to the following screen:



The device has a few built-in dictionaries, and it searches each one for a given search term. If it finds the term in a dictionary, a link to the entry will be displayed here, in the results page. Select an entry and part of it will be displayed in the bottom-half of the screen. Double-tapping an entry will load the full text. Another great feature of this dictionary is that if one comes across an unknown character or term within the entry (happens often), one may simply select the word/term and look it up!


On top of all of this: the dictionary is capable of displaying any character's stroke order as well. To do this, simple select the character and press the "Str." button that should appear. This will display a page like that shown below:



The first time I tried this I got quite a shock: as soon as it opens, the animation begins, which is accompanied by a voice that counts out the strokes. Prior to testing this feature, I was playing with some settings and must have turned the volume right up. I was on the bus at the time, and got some pretty funny looks. When practicing characters, I do find myself forgetting the stroke order often. This feature reminds me of the correct order, and gives me a chance to practise it before going back to writing it out again and again in my little math book.

This dictionary comes with a boatload of other features, but what really matters is how well it performs at its main task: being a dictionary. After using it for over four months, I can honestly say that it performs this task well - it is an excellent dictionary. It is easy to use and packed with really helpful dictionary-related features. The main ones I've talked about above, but there are more:

• Search for all sentences containing the target word/s, which is great for those words you've learned but don't know how to use
• Input search terms using Pinyin, Smart Pinyin, English Keyboard (on-screen), and of course: Chinese Handwriting!
• Four different languages (Japanese, Korean, Chinese, English - for the menus)
• Downloadable updates

Out of the box dictionaries (user may select which to search - default is all):

• Oxford Advanced Learner’s
• English-Chinese
• Chinese-English (for some reason these are listed as different dictionaries)
• Contemporary Chinese
• Cambridge Encyclopedia (unfortunately all Chinese)
• Neology
• Terminological Dictionaries (I found a lot of terms here, very useful)
• Graded Dictionary
• DIY Dictionary (apparently one may make custom diciontionaries - I haven’t tried this)

So there you have it: the Besta TA-3000 is the Chinese Language Learner’s best friend! I know mine has been tremendously helpful - unlike other electronic dictionaries that I have tried, which can be troublesome and irritating to use, the Besta has always performed brilliantly, and been a pleasure to use. The only thing I’d change about it is its name: “The Besta TA-3000” sounds a bit ... ‘80’s sci-fi?

Great dictionary, puzzling name.

Update:

The dictionary's menu can be changed to English easily.

First, press the "back" button repeatedly, until nothing happens with further presses. This means you're at the main menu.

I've highlighted the position of the back button in the image on the right.

Now just follow the slideshow below to change the language. I haven't been able to find any English documentation for this dictionary, so until I do, I'm afraid this is the most help I can give. I think with the menu in English, a manual is not as necessary, though it'd be nice! If anyone knows of any English documentation for this dictionary, please let me know!



The dictionary's software may be updated also, which improves the interface and stability. I will post instructions on how to do that when I get some time, hopefully later this week.

 Subscribe in a reader    Subscribe by Email

Like this post? Move it on along with:

Email  |   delicious  |   Digg  |   Reddit  |   Newsvine  |   Furl  |   Google | Stumble | HaoHao

(0 Comments) 
Scroll to top

Tags: Besta TA-3000 | Dictionary | Chinese | 中文 | 词典 | Electronics