Geeks With Blogs
Benjamin Howarth, Code Gecko

Hi guys,

Well, the portfolio page has changed a bit! I've added this really cool Javascript effect known as FancyZoom, and extended to work with Prototype and Scriptaculous.
As an aside, DotNetNuke has native compatibility with two Javascript/AJAX frameworks - Project Atlas (or ASP.NET AJAX) and Prototype, but can't be made to work with any other frameworks like Mootools, jQuery and so on.

Funky little way of saving space on the page with a nice UI effect. Only downside is no AJAX, but DNN works with Atlas and Prototype has it's own AJAX library, so extending it won't pose too big a problem.

To make it search-engine optimised, I've done a couple of little CSS tricks.
The first one is that the images themselves are background-images, not <img> tags.
The second one is that the text has a CSS text-indent property set to a minus value, so the text itself is shunted far off screen out of the user's view.
In this particular instance it's {text-indent: -9999px;}
However, when you turn CSS and Javascript off (think accessibility and search engine spiders), the background image isn't shown and you just get a plain-text link with the contents of the lightbox directly underneath it.

Just goes to show that functionality and accessibility can work hand-in-hand!

I have a host of new projects on at the moment so I will be regularly posting problems I come across and how to solve them!


Posted on Wednesday, September 24, 2008 12:41 AM SEO , DotNetNuke | Back to top

Comments on this post: Accessible CSS and Javascript tricks

No comments posted yet.
Your comment:
 (will show your gravatar)

Copyright © TheInspiredGecko | Powered by: