CSS Back to Basics Class
CSS Back to Basics Class
- Posted on 06/28/2007 at 11:30 AM by Sandra Clark
- Categories: Accessibility / CSS / JavaScript
Well, I think my CSS presentation here at CFUNITED went well. My computer went totally nuts at the beginning, and I had to go without it for about 1/3 of the time, but I was able to get the information out. Thanks to everyone at the session for their patience with my situation.
I didn't get to my special treat, which is popup Windows using a Class. I've got the zip file up at: docs/popupwindows.zip for your downloading pleasure. The basic premise is that in an xHTML 1.0 strict environment, the target attribute is obsoleted. So there is no way to simply have a link open in a new window. I actually blogged about this in September, 2006, and have been working on the solution since then. The solution uses JavaScript and CSS together to create both the functionality of the popup window as well as add an image to the page to indicate that the link opens in a new window. It also degrades gracefully without JavaScript and simply opens in the current window.
I've also made my presentation and sample files available for download. Enjoy!
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.
- Posted By Christian Ready
- Posted On June 28, 2007 at 01:41 PM
- Posted By Christian Ready
- Posted On June 28, 2007 at 01:41 PM
Seriously, you're doing great despite the technical glitches.
- Posted By Lyle
- Posted On June 28, 2007 at 07:58 PM
What you came up with is very similar to something I've seen called "the perfect popup."
The largest difference is that their popup uses the rel tag instead of a class and because of this it can also allow for control of the size of the popup.
See http://accessify.com/features/tutorials/the-perfect-popup/
Of course, it wasn't quite perfect enough for me, and so I changed their script a little to include a 'tab check' for those browsers that incorrectly propagate it up.
In particular I added the function:
function verifyKey(e){ if(e.keyCode==13) doPopUp(e); }
and changed findPopUps() to include: popups[i].onclick=doPopUp; // attach popup behaviour popups[i].onkeypress=verifyKey;
I only bring this up because changing over to rel rather than a class may allow you to upgrade your script to also control the popup's width and height dynamically.
Hope this is useful, -Lyle
- Posted By Lyle
- Posted On June 28, 2007 at 07:59 PM
What you came up with is very similar to something I've seen called "the perfect popup."
The largest difference is that their popup uses the rel tag instead of a class and because of this it can also allow for control of the size of the popup.
See http://accessify.com/features/tutorials/the-perfect-popup/
Of course, it wasn't quite perfect enough for me, and so I changed their script a little to include a 'tab check' for those browsers that incorrectly propagate it up.
In particular I added the function:
function verifyKey(e){ if(e.keyCode==13) doPopUp(e); }
and changed findPopUps() to include: popups[i].onclick=doPopUp; // attach popup behaviour popups[i].onkeypress=verifyKey;
I only bring this up because changing over to rel rather than a class may allow you to upgrade your script to also control the popup's width and height dynamically.
Hope this is useful, -Lyle
Seriously, you're doing great despite the technical glitches.
http://www.christianready.com/