During the great rewrite, I’ve been trying to focus on one section at a time. The first section to come under attack was “everything pertaining to the styling of Slider that is not Arrow-related”. After much mucking-about I decided to combine the Border, Rounded Corner, Background Image, Gradient and Background Colour onto one Pane.

I don’t know why I didn’t do this before, it is obvious and really the only logical way to present these controls – enabling some may disable others, it was confusing and clumsy when they were on different tabs.

Now users will be able to see what is being enabled/disabled without swapping between different tabs.

Here is a screenshot of the option page as it is currently:

Slider style configuration laid bare: Click to view

This is about the 10th layout redesign, I’m quite sure there will be no major changes from now on.

Still a long way to go, but progress *is* being made.

Tags: Development, Objective C, Rapidweaver, Slider

Yesterday I was trying to implement a Shadowbox contact form in the Bay of Islands SPCA site, but I just couldn’t get it to work. I was using the standard setup that works perfectly well on the Te Kuiti SPCA Site:

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

<script type="text/javascript" src="http://tekuitispca.org/sb/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://tekuitispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
Shadowbox.loadSkin('classic', 'http://tekuitispca.org/sb/skin');
Shadowbox.loadLanguage('en', 'http://tekuitispca.org/sb/lang');
Shadowbox.loadPlayer(['iframe'], 'http://tekuitispca.org/sb/player');
 
window.onload = function(){
 
    var options = {
        initialWidth:     '0',
        initialHeight:    '0'
    };
 
    Shadowbox.init(options);
    }
 
</script>

And the HTML:

<a href="http://www.tekuitivets.co.nz/" rel="shadowbox;initialHeight=0;initialWidth=0;width=900;height=700;" title="Atkinson &amp; Associates Vet Clinic">Atkinson &amp Associates Vet Clinic</a>

I uploaded all the files, changed the addresses in the above code. Strangely, it worked find in Rapid Weaver, but not in Safari, Firefox, Epiphany or any other browser – either in export mode or after a full upload. My search for “Shadowbox just won’t work!” yielded no results, so was forced to use the programmer’s final weapon – exhaustive trial and error.

I tried various things for about an hour, and finally struck gold with 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

<script type="text/javascript" src="http://boispca.org/sb/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox-jquery.js"></script>
<script type="text/javascript" src="http://boispca.org/sb/shadowbox.js"></script>
<script type="text/javascript">
 
	Shadowbox.loadSkin('classic', 'http://boispca.org/sb/skin');
	Shadowbox.loadLanguage('en', 'http://boispca.org/sb/lang');
	Shadowbox.loadPlayer(['iframe'], 'http://boispca.org/sb/player');
 
	jQuery(document).ready(function(){
 
		var options = {
		initialWidth:     '0',
		initialHeight:    '0'
		};
 
		Shadowbox.init(options);
 
		jQuery("#contact-us").click(function(){
			Shadowbox.open({
			        player:     'iframe',
			        title:      'Contact Us',
			        content:    'http://boispca.org/contact/',
			        height:     500,
			        width:      400
			    });
		    return false;
		});
	});
 
</script>

And HTML:

<a href="http://boispca.org/contact/" id="contact-us" title="Contact" >Contact</a>

Now whenever one clicks the contact button, Shadowbox is called through jQuery.

I don’t know why the normal way didn’t work!

Tags: Fix, jQuery, Rapidweaver, Shadowbox

Some hours after posting the previous post, I received an email from John informing me that the 0.95b version of Slider was … broken.

Seems I had changed something, and Slider would no longer install properly.

I managed to fix the problem, accidentally.

(hand on heart) I, Michael Robinson, solemnly swear to never, ever touch Xcode build options that I do not understand while working on a release-ready project.

I am so pleased that it works now, for about 3 hours I thought I might need to rewrite everything from 0.93b up…

Tags: Products - 产品, Rapidweaver, Slider

I’ve updated the Fancy Footer snippet, now Trackbacks/Pingbacks will be able to find your posts – the previous version’s implementation was … lacking.

The previous snippet used the post permalink as both the permalink and the path – the Trackback/Pingback system didn’t like “http://“ being included in the path attribute.

I was afraid that I wouldn’t be able to find a solution that allowed us to have Trackback/Pingback support and keep our existing comments.

I am glad to say that my fears were unfounded, and I managed to come up with a solution. The snippet now parses out the “http://domain.com” part of the permalink, and uses that for the path attribute for the widgets. Happily, JS-Kit must do a similar thing, as it hasn’t messed up my comments (the path attribute is what JS-Kit uses to determine what page to display which comments).

The snippet may be downloaded here. To learn how to use this snippet, read Fancy Footer – Usage and Tips.

Tags: PHP, Rapidweaver, Snippet - 小片

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

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

So I was about ready to get started on main code of the program when it occurred to me that eventually (if/when this program ever gets finished) I’ll have to package the program up into a .dmg file for distribution.

So I installed a plugin, ported my project over into the new plugin, and *bang* it stopped working.

I had to delete things randomly until I found the problem, then start rebuilding it according to the plugin’s specifications.

OK, so I’m glad it happened now, not later on when I would have lost even more, but I’m still not happy about repeating work.

I did, however, find out how to make Java applications look like native Mac OS X applications, which I thought was pretty cool.

Now I just have to get back to where I was, then figure out how the hell I’m going to solve the myriad of problems I know I’ll discover when the *real* coding begins.

Sigh.

Tags: Java, Rapidweaver

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

Somehow I screwed everything up again, and had to go through a few hours of frustration and confusion.

It paid off, the Javascript works well now, and I’ve finished one set. It even works perfectly in IE6 AND with Accordion! Tomorrow I’ve just got to create a few more styles, then I’ll be able to release it.

I’m not sure how I’ll sell them, as a pack or as individual styles? I might do both – sell each style individually and offer a discount for those who purchase multiple styles at a time. I think it makes more sense that way, as some people won’t want to use all of the styles on their website, while some developers will want various styles so they can demo them to prospective clients. Also, if I do it that way I’ll be able to add more styles to the store as I make them, without having to wait for X amount to release them as a pack.

I’ll think about it some more though, after I’ve made the styles.

I’m sure you’ll all like it, no matter how it is packaged.

Tags: Development, Products - 产品, 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