If you want to embed Flash video on your website, you could do a lot worse than use Flowplayer which is an open source Flash player. The set-up process is really easy and there are lots of demos with code on the Flowplayer website. The player has many configuration options including the use of a preview image for your Flash video but the basic set-up only takes a minute or two. Excellent!
- Update: Another review of Flowplayer on Boagworld.
- Related: JW Player is another Flash player option but it’s not free and you’ll need to buy the commercial version if you want to use this for client websites.
Update: With recent Twitter API changes, the method described in this post is now deprecated. Sorry ‘bout that. Here’s the announcement from Twitter.
Twitter has opened its doors a bit more so that you can add its functionality to your website. Its @Anywhere platform allows you to integrate Twitter into your website. Yes, it was possible to add tweets and Twitter data before this but now there’s all sorts of new ways to use Twitter functionality including the hovercard user profile pop-ups that you see on the Twitter website.
This link, Clive Walker on Twitter, is an example. The Twitter call can automatically create links for any instances of the username in your text (if you choose to do this) and it will add the hovercard pop-up. In my case, I prefer to create the links myself and set-up the code so that only links with my class = "tweep" are selected. The Twitter username is required of course and this is parsed from the title attribute of the link; images can be linked in a similar way. With a slight variation in code, the username can also be obtained from the text of the link.
Of course this is a good thing for Twitter because it will spread Twitter across a wider spectrum of websites. However, since I am mentioning Twitter usernames more and more in blog posts, I reckon the pop-ups add something for me as well.
I am reading a new jQuery book from Sitepoint at the moment. It’s called jQuery: Novice to Ninja and it promises to take you from beginner to expert. If you have copied and pasted jQuery code up to now without thinking or knowing how it works, this book could be for you! The book covers a whole range of examples so it’s also very good for intermediates. I have used some of the code from the first chapters already!
The book weighs in at just over 400 pages and is divided into nine chapters that start with the basics of jQuery, and its use for selecting, decorating and enhancing your HTML, and moving on to chapters about, for example, animations, images and slideshows, menus, tabs, and tooltips, and Ajax. The book also includes a final chapter on creating a jQuery plugin and advanced methods for extending jQuery.
I’ll post a more in depth review when I have read through the whole book.
Over the last week or so I have come across several websites that allow users to navigate using the left and right arrow keys. I think this is an interesting approach and I really like this method of navigating a website. Perhaps it’s just me but I like using keyboard shortcuts (because they seem to allow me to do things faster) …. so it’s interesting to see websites using the left and right keys in this way. Here are the website examples I have spotted that use this method.
- Crush + Lovely. This is a fantastic design and the left and right keys enable you to scroll between the various content sections. Try it and see!
- Pictory is a photo story website and it uses left and right keyboard navigation in a similar way.
- Thinking for a Living uses left and right keys for horizontal scrolling between sections/pages.
- OnSugar uses a left-right arrow key method to navigate between images in a gallery.
There is an adding keyboard navigation tutorial at jQuery for Designers which explains how a similar effect is achieved with an image slider. The jQuery Tools website has Scrollable which enables a content slider to be navigated with left-right keys.
There may be disadvantages to this method but I’m keen to find out more about it so if you know of other websites that use this approach, let me know.
Some recent articles on jQuery from around the web:
- I blogged about multi-column layouts with CSS3 but the Columnizer jQuery plugin means you can create newspaper-style layouts that work in all browsers.
- jQuery pageSlide provides a way to reveal (slide in) secondary page content; an interesting approach I think
- SlideDeck is a horizontal slider that provides a way of highlighting content in hidden panels but with search engine visibility.
- jQuery MagicLine Navigation is an animated hover effect for navigation links.
- Twitter-like dynamic character count for textareas and input fields
There’s a common newspaper and print layout method where the text of an article is arranged over several columns. This makes the article easer to read and looks quite nice visually. Wouldn’t it be great if you could do this with CSS? Well, in fact this is perfectly possible using the multi-column layout module that is part of the CSS3 specification. Whilst browser support for this is patchy, the module is now approaching candidate recommendation status, and the method can still be implemented using proprietary but well-supported CSS rule prefixes like