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

Today a customer informed me that Slider wasn’t working properly on his webpage. They gave me the URL to the problem page, and for a page with a working (properly) version of Slider.

Initially I was perplexed, but it dawned on me that the code for parsing out the cell numbers can only parse single-digit numbers.

A classic case of short-sighted programming.

See the cells’ class attribute was put together like this:

cell + the cell’s number + unique ID.

Examples:

cell2page0

cell9page102

cell10page0

Code for parsing out the cell’s number:

1

parseInt(jQuery(peeker).attr("class").substring(4,5))

Notice that it only gets one character.

To work correctly, two things needed to be changed.

First, I had to change the way the cells’ class attribute is put together:

cell + unique ID + the cell’s number

Second, the javascript for parsing out the number:

1

parseInt(jQuery(peeker).attr("class").substring(("cell" + length of cell + unique ID),(length of class attribute)))

The updated plugin is available here: Slider 0.95b

I’m confident that I’ve fixed the problem, but if I haven’t don’t hesitate to let me know!

Incidentally, the customer’s website is extremely well done, go and check it out!

John Charlton Webdesign

Tags: Products - 产品, Slider

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

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

So I spent the last six hours beating my head against my keyboard.

I must have hit on the right rythm though, because I’ve finally achieved the result I wanted. Amazingly, the prototype is finished, now I just need to make some more styles, and a few different variations.

I am so tired.

Off to eat toast, then sleep. So long as I manage to avoid any further problems, I think I’m on course for a Sunday night (my time) release, or sooner. It all depends on how IE6 behaves.

Tags: Products - 产品, SmartBlock

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