My curiosity into CSS 3 was piqued at Scotch on the Rocks 2010 this year. There was a very good presentation from Chris Mills from Opera http://twitter.com/chrisdavidmills where he touched on some of the new CSS 3 and HTML 5 functionality that some of the modern browsers are taking advantage of. I particularly liked some of the really simple, but visual CSS 3 changes, in this case rounded corners.

This article is a quick example of how to add rounded corner styling to your designs.

Here is a demo of CSS 3 rounded corners in action.

[More]

A project request recently came up where we needed to track some users responses to a series of questions, then build an account 'home' page based on those responses. Pretty straight forward you'll agree. The problem here arose from the clients using a bespoke online solution that blocked any kind of server side interaction.

I've played with JavaScript cookies in the past to remember display states in JQuery functions, so I thought they would be a great solution to this. This article deals with how to use JavaScript cookies to emulate a normal form submission.

There is a demo of using the JQuery Cookie plugin to emulate forms here.

[More]

The article deals with using cfcontent to serve up dynamic data driven CSS. I'll use Coldfusion to embed variables in a cfm file, then use cfcontent to have the browser serve the content as a CSS file.

[More]

I was recently writing a form where I needed to control the visibility of a div element based on a user selection. If a user checked the checkbox, then a div was to appear with related options in it. This article deals with using JQuery to alter CSS properties on the fly.

[More]

I've been running an older version of Blog CFC for a while now, so I thought it was well past due an update to the latest version. It seemed like a good time to give the site a lick of paint, so I have de- web 2.0'd it. At some point I got swept up in the curved corners and shiny gradients of Web 2.0ness, and now I just plain don't like it.

If you didn't know already you can get BlogCFC from RIA forge here: http://blogcfc.riaforge.org/. There seem to have been some nice tweaks in the last few versions, and it's nice to see a software application maturing.

In the process of redesigning the site I came across this recent survey of the installed user base for windows fonts. It is always risky for a developer to use a non standard font, so surveys like this are ideal. http://www.codestyle.org/css/font-family/sampler-WindowsResults.shtml

Also I had a little Photoshop help creating the image header. Here is a pretty painless Photoshop tutorial on "Fade Images in Photoshop Using Layer Masks", http://articles.sitepoint.com/article/photoshop-fade-layer-mask

Lastly I've added some Feedburner integration. Feedburner is a great way of consuming your RSS feeds, it adds a whole load of options, and allows you to push feed content out to other community sources, such as Twitter or FaceBook. It also provides stats, a la Google Analytics style, and its free (requires a Google account)! http://feedburner.google.com.

I think I took two things away from this redesign. Firstly, double check your CSS. The only real issues I had during the entire process were CSS related (thanks IE). Secondly index your database properly. I'm not sure if the previous install was indexed at all, or whether the new version just has better indexing in the installation scripts, but the performance difference is notably quicker!

This entry will deal with how to create a displayed / collapsible floating div, using JQuery. When I build a web platform I often like to include small sections of text alongside the functionality, just to provide the users with a little guidance on what is going on. Rather than having these inline, where they can often interfere with the content and display, I like to add them to a 'help' div that I float inside the framework. First we include the JQuery library from Google, and our link. It doesn't go anywhere, but we will attach a JQuery event to it. Next we create our JQuery function, attached to the 'help' div. This adds a div to the document with whatever content you have set in it. There is also a 'close' link in the floating div that calls the close function. Lastly we add some styling and positioning to tie the whole lot together. This gives the pop up div its shape and style. I've positioned the floating div on top of the calling function text. You can see an example functionality here.

I recently stumbled upon an interesting dilemma whilst using an image map that was dynamically generated from a Coldfusion Query. If you turn JavaScript off, then the image maps primary graphic still stays visible (and occupies the same space on a page), but none of the map links function anymore. The problem was to replace the map content with a list of hyperlinks that provide the same functionality. Initially I set the maps div CSS to be hidden. In this way the map is not shown by default. Next we can use a JavaScript call to change the CSS visibility to 'visible'. In this way if JavaScript is disabled the graphic remains hidden, if JavaScript is enabled it turns in on. Lastly we can create the content that we want to see instead of the map. Don't forget to wrap it all in the no script html tag. By altering the css properties like this we can have the map and the no script content occupy the same real estate on the screen. If you simply populate the no script with the alternative, then the space the map occupies stays occupied, just by a hidden map, giving you a large blank space.