Posts in the "JavaScript" category

Quick tip: Making jQuery tabbed content available for users without JavaScript

Posted in on 29 August 2011 | Comments [1]

Most users have JavaScript enabled these days but there may be a small fraction of your website visitors that have JavaScript turned off. In these circumstances, it’s generally accepted good practice to make sure that your website content is available to those users without JavaScript.

Read more ...

Flowplayer for playing Flash video

Posted in on 4 May 2010 | Comments

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.

Info: Like other methods, for example swfobject, Flowplayer uses a JavaScript file so it is best to show a message, using a <noscript> tag, for users who may have JavaScript disabled.

Putting Twitter hovercard pop-ups on your website

Posted in on 16 April 2010 | Comments [2]

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.

Move your mouse over the Clive Walker link to see my Twitter profile information. If you are logged into Twitter at the same time, there is more information and actions (for example, following the user) available to you. Here's a link to the hovercard JavaScript I am using (you'll also need a Twitter API key call in your webpage). I have also added a Twitter icon in my CSS for any link with the "tweep" class, just so it is clear which links have the hovercard treatment.

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.

Info: There’s more documentation on the Twitter @Anywhere website. You’ll need to sign-up for an API key before you can use the @Anywhere system. I also found this tutorial useful.

Easy ways for clients to edit image galleries/slideshows

Posted in on 13 April 2010 | Comments [1]

I have been working on a website where one of the requirements is a JavaScript slideshow and/or an image gallery that the website owner or client could update. It is possible to do this via content management systems like Wordpress or Perch (and many others) but in this case, for various reasons, we had an HTML website, without database, to work with. At the same time, the system had to be really simple. So simple in fact, that all the client has to do is upload images (via FTP perhaps) into the correct folder on the server.

Read more ...

jQuery: Novice to Ninja from Sitepoint

Posted in on 11 March 2010 | Comments [1]

jQuery: Novice to Ninja 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.

Downloads: Get sample chapters from JQuery Novice to Ninja with this free download • The code archive from the book is also available.