Safari - Niggle Me Softly

Had the fun of trying to sort out a few wrinkles in how Macintosh Safari browsers render pages/execute javascript this weekend. I had 3 minor niggles to sort out, 2 of which only affected me personally on this blog, and one that would affect anyone using the d2b category system.

Safari Niggle #1 - The header area of phydeaux3 was trashed in Safari. The background was extending down past it's assigned height.

Safari Niggle #2 - When using d2b, when the category list was shown either in the posts 'category links' OR when the selected category was displayed, the customizable variable for the displayed separator wasn't being rendered correctly. If a space was entered into the variable BEFORE a 'real' character, then that space was ok. But a space entered AFTER a 'real' character wasn't being rendered at all. This not only didn't look right, but if no spaces were defined before a 'real' character AND a long list of 'categories' ensued, Safari would then treat that line as an unwrappable long word. Minor, but not good.

Safari Niggle #3 - On phydeaux3, I have setup a script which adds an 'open in new window' icon for external links. Not working at all in Safari. Along with a script that would change the style of comments made by ME was not working in Safari either. They just failed without any whimpers.

Image Showing Safari Niggles #1 and #2 - Header extends past it's assigned height and separator between category names should have a space before AND after the | symbol.
Hover Over to Magnify

Fix for niggle #1 - Realized it was the positioning of the background-image that seemed to be causing the issue, Safari wasn't respecting the assigned height of the container when the background image was positioned, showing the whole image. Fix was to resize the image so positioning wasn't necessary. Found this bugzilla report AFTER wards that seemed to say the same thing.
Bug 7771: CSS Background Image breaking out of containing block

Fix for niggle #2 - I took a guess. Realized that the one thing different about the way I had added the category separators was I used a shortcut .innerHTML rather than taking the extra step and adding it with a document.createTextNode. So took a shot. Seems to work as advertised now. d2b Updated.

Fix for niggle #3 - Whilst searching for a relevant bug that would explain niggle #2 (never found one) I ran across this bug report.
Bug 8080: getElement* returns nodeList that cannot be used with for...in
Now when I first read it I thought 'interesting', but since I was focused on looking for something related to the other niggle, didn't realize this was the answer to this niggle. Until it popped into my head about two hours later, ok I'm a little slow. Rewrote the scripts to use a more verbose
      for(p =0; p <ar.length; p++)
rather than the prettier
      for(p in ar)
and Safari seems to be happy with those scripts now as well.

How was your weekend? :-D

CSS | Javascript | Safari | Niggle Me Softly | Phydeaux3

delicious2Blogger - Categories for Blogger

Update April 11, 2007 - This methods/scripts etc described in this post are obsolete. Do Not Use Them! They relate to a category method for Blogger BEFORE Blogger introduced their labels. Use New Blogger, Use Labels. This is just up for historical reasons, or if someone using the code already needs it. Comments are now Closed. Thanx.

Update - August 18, 2006
As most are aware now, Blogger in beta has it's own built in categories and effectively makes these scripts obsolete, eventually. BUT if you migrate over to the new BETA servers these WILL NOT WORK ANYMORE!!!!! I am tracking the changes with beta and d2b at the post d2b Categories and the Beta Blogger and recommend two things.

1) If you are thinking about setting these scripts up DON'T. Just wait until you can move to beta blogger and use their labels.
2) If you are a current user of d2b and are thinking about switching hold off unless you are ready to dump d2b. They will not work on the new servers without modifications and I'm still working out whether that's even worthwhile. d2b Categories and the Beta Blogger UPDATED!- See this post d2b and Beta Part 2

The rewrite on the scripts are done, and now the category system formerly (and unofficially) called Blogger Categories with Del.icio.us are now rechristened...[cue the trumpets] delicious2Blogger. Ok. It's a lame name but I gotta call it something. I hear all the cool kids just refer to it as d2b.

As before, this is not the only method to 'fake' categories with Blogger, it's just one of many. I don't necessarily think it's better than any other. It's got it's pros and cons as most of the methods do. But it works well for me. Be sure to check out Freshblogs' Blogger Hacks - The Series for the most comprehensive list of all the different Blogger Category methods before deciding which one is for you.

Some of the new benefits/features of d2b are -

• New Features-

• Completely rewritten scripts - majority of code moved to an external javascript file with less muss/fuss in the body of the template
• Customization - Virtually everything output by the scripts is now easily customizable, making it easy to convert the output into the language of your choice.
• Use of a delicious "Common Tag" - now has the ability to add a common tag to all blog posts. What this means is you can use one delicious account to categorize your blog, but still use that same account for your normal bookmarking. Or use it to categorize mulitple blogs.
• Option to provide an RSS feed link for each 'category', with customizable RSS image and heading
• Added an optional and customizable 'read more' link that can be displayed in the 'notes' section.

• Not New But still a feature

• All links are shown in blog, visitors never have to leave.
• OMG! A category cloud. Yes the highly desirable in blog cloud is available
• Setup requires the creation of only one 'category post' that is dynamic. All new tags added at del.icio.us are displayed dynamically without any further setup.
• Everything is given id's and classes for styling with CSS

I've put the new and updated instruction on my googlepage site (easier to manage large bits of code there than in a blogger post) and the setup pages are completely rewritten as well. Everything is in two parts, installation and configuration.

Installation and Configuration pages for d2b Category Scripts

d2b Category Installation

d2b Category Configuration

I've tested the new scripts/setup about as completely as I can and pretty sure that everything is correct. But if you find a problem, have a suggestion, or want to complain this is the home post for d2b and you can do it here.

During testing I set up some test blogs, so if you want to see d2b in action in a couple of different templates you can. Just remember it's pulling in the same tags as from phydeaux3, so any links in the displayed categories come back here.

d2b Test Blog in Minima Black
d2b Test Blog using Powell Street Template

Note for previous users of the older method --

Unfortunately, rewriting the scripts to clean everything up makes it a non-trivial matter to convert over from the older setup to the new one. I'm going to leave all the code/setup for the old method up without alteration for anyone using that can always get fresh copies of those scripts if needed. If everything is setup and functioning like you want, there probably isn't any reason to convert over. The only feature in the new scripts that would really be worthwhile in doing the conversion is possibly the common tag feature, but here's what you need to know. EVERYTHING in the old setup needs to be replaced by the scripts from the new setup. Everything tagged at delicious is the same, the category post url/archive urls are the same, a few of the variable setups/css are the same, but everything else has changed and you CANNONT MIX AND MATCH bits from the old and new methods. Use all of one or the other. If you want to convert over, you'll have to follow the new instructions step by step and replace all the old code (including in the category post) with the new codes...that could be a real pain and I don't recommend it for the faint of heart. The only time I would recommend converting to the new scripts is if you decide to change the template/layout of your blog, then that would be a great time to convert over since you would have to set everything back up anyway.

Blog | Blogger | Blogging | Categories | Categories for Blogger | Blogger Categories | Del.icio.us | Javascript | Phydeaux3

d2b Categories -Changelog and To-do

Update April 11, 2007 - This methods/scripts etc described in this post are obsolete. Do Not Use Them! They relate to a category method for Blogger BEFORE Blogger introduced their labels. Use New Blogger, Use Labels. This is just up for historical reasons, or if someone using the code already needs it. Comments are now Closed. Thanx.

Figured I'd make a post to track any changes I've made to the d2b Category Scripts and possible to-do's. So here it is.

ChangeLog

May 09, 2006

- Fixed minor niggle. On the Category Page listings if the option to show tags for each post was set and the category was a simulated 'multiple-word' category, the title element(tooltip) showed the category with the underscore. Fixed. Nothing needs to be done for it to take effect as it's in the external js file.

- Added an option to 'throttle' the category listing at XX number of tags if the var delThrottleTag is changed from false to a numerical value. This causes the category listing to show the XX number of posts with the most entries. Installation and Configuration pages updated with the info. Users who installed before this date would just have to add the variable to their setup and set it to use. Otherwise no action is needed.

May 15, 2006

- Fixed minor Safari niggle keeping spaces in the delSep 'separator' variable from working as expected in that browser. Main js file updated, no need for users to do anything. I believe there are a couple of other spots that could use the same treatment to get Safari exactly right in all spots. The others aren't as noticeable, will probably fix those later in the week.

June 22, 2006

- Fixed minor issue with the common tag feature. If used, on the displayed category page, IF the common tag was not the LAST tag input at delicious, then the scripts were inserting an unneeded separator before the first shown tag. I believe this is fixed, only noticed it as a problem in one blog. The external script is updated so users linking to it need to do nothing. If you're hosting the script yourself, you may want update it. I'm still watching to see if this has introduced any problems, but so far it looks like it's working as I want.

Possible To-do's

- Correct spelling of to-do's.

- The Throttle tag 'could' be more of a 'threshold' type, meaning set to only show tags with more than x number of entries. Would require a few more changes so went with the easy one for the moment. Could add both options at some point.

- Page listings on the Category Page?? An option to set if more than XX number of entries in a category, to Page through the entries. As in show the first 20 entries then Next Page link to the next 20 entries...so on.

- Crunch the javascript?? Could remove the formatting on the external js file to save a few kilobytes. It's only 16k at the moment, and that doesn't seem too bad. But could be tweaked down a bit. Makes for an unreadable file tho, maybe if/when I'm confident I won't be making any more changes for a bit it might be worthwhile to shave off a few bits.

Category Script Rewrite

I've just finished a rewrite on the Blogger Categories with Del.icio.us scripts that add a few features, clean some things up, and just generally don't make quite as big a mess as the first version. New features are the ability to use one del.icio.us account for multiple blog categorization, or just to use the same account to categorize your blog and still use it normally for other bookmarks. Also added the option to include a link to the RSS feed for each "category", figure since del.icio.us offers it why not use it.

In addition, this version should be much easier to fully customize, especially for non-English speakers who want to convert all the displayed text to their language. But mostly this should make it a little cleaner and easier to setup. I've just converted phydeaux3 over to the new setup, and gonna stress test it to make sure I didn't miss anything and will probably post the update in a few days.

UPDATE-May 5- The rewritten scripts and instructions are now up at delicious2Blogger - Categories for Blogger

I also should note, I will leave up the original scrips/instructions for those that are already using it, but if you are thinking about going with this method...WAIT FOR the new release. Unfortunately, going from the orignal version to the new rewrite won't be a trivial matter. That's one of the reasons I rewrote things, to make any future additions easier to implement. If you are already using the original scripts/setup, and it's working for you, it may not be worthwhile to convert over since it will basically involve setting it all (well most) up again. A disadvantage of how I originally set everything up.