Tag: Javascript
The @font-face snowball
Håkon Wium Lie’s article, CSS @ Ten: The Next Big Thing on A List Apart in August 2007 may have got the (snow)ball rolling, but it seems that it was the announcement of Typekit on May 27 this year which has prompted an avalanche of interest in web fonts. Or maybe I’ve just woken up to the issue since then and been taking more notice. But I seem to be adding a lot of font and type-related bookmarks lately and thought it would be worth sharing some of them.
Fetching posts in WordPress and ExpressionEngine with jQuery and AJAX
Recently I was asked by a client to do some customisation of a WordPress site to enable a site visitor to load posts from a certain category into the same part of the page via AJAX. This could have been done in a couple of different ways – using AJAX as requested; or all the posts could’ve been printed to the page, with javascript then used to hide all but one and also used to navigate between them in some sort of hide/show, fading/sliding effect. I’ve done similar things like this before using jQuery, but there were two reasons why I didn’t go that route on this occasion:
- With javascript turned off, all the posts from the selected category would’ve been displayed on the page and as the design called for three short columns of text on the page, having one column much, much longer than the other two would really have looked wrong.
- The client specifically asked for AJAX to be used.
More on Fetching posts in WordPress and ExpressionEngine with jQuery and AJAX
Animated navigation items using jQuery
Dave Shea recently published an article on A List Apart (ALA), CSS Sprites2 – It’s JavaScript Time‘, about how to use jQuery to create the effect of animated rollovers on navigation items.
The technique he outlines makes use of the same image replacement method as outlined in ALA‘s original Sprites article. The problem with this method however is that it uses a large negative text-indent to remove the default text from screen, and with images turned off in the browser, you don’t see anything. This has accessibility implications not only from the perspective of those with disabilities, but also for those who deliberately turn images off, i.e. people on slower connections or those using handheld devices who are trying to limit the amount of information downloaded to their phone.
PayPal options and Expression Engine’s Simple Commerce Module
Recently I had to add basic shopping cart functionality to a site that had been built with ExpressionEngine (my CMS of choice). “No problem,” I thought; I can use the Simple Commerce Module (SCM), which as the names suggests, is ideally suited to simple ecommerce requirements, and which I had used before on other EE sites.
More on PayPal options and Expression Engine’s Simple Commerce Module
Dropdown low down
Dropdowns (horizontal) or flyout (vertical) menus abound on websites and come in many different flavours. They are also put together in a number of different ways, some done with javascript, some with ‘pure’ CSS and some a mixture of both.
Styling form buttons
Anyone who’s used the web has encountered buttons in forms. Buttons, as with most form controls, can be a bit tricky to style for consistent look cross browser and cross platform as the operating system often has more to do with how they are rendered than the browser itself. Roger Johansson has delved into this issue in more detail.
Onfocus, background-changing, sliding door tabs
There are already several excellent articles discussing the sliding door tabs technique for creating navigation elements, so why do we need another one?
Why doesn’t :hover work in IE?
You may have seen on other sites an effect whereby the background colour of a containing element changes colour when you hover over it. A look at their CSS might reveal something like div:hover or li:hover. This is also how a lot of CSS dropdown menus work too, by applying a :hover to a list item.
