Word Clock using jQuery

jQuery Word Clock
jQuery Word Clock

Sometime back in 2012 or 2013, I stumbled upon this site.  As you will see, it displays the current time but in a rather creative manner. Note that this “word clock” is built on Flash.

I thought it would be cool to create it in jQuery just as an exercise. So I started on it and it took just about under one hour to come up with a similar word clock built on jQuery. Here is the link for it. Go ahead and check the time.

When I created it, I wanted to make a blog post for explaining its code but was too lazy at that time. I still am. You can expect to see a blog post explaining it in detail this month this time though. Meanwhile, you can do the digging yourselves. It is just JavaScript after all. Just view source or use Chrome inspector or Firebug.

Code Snippet : javascript – Checking for blank spaces in sentence without regex

This is actually very interesting. I had a text field which expected a single word string and I had to check it on client side. Using jQuery and JavaScript’s split function we can easily check if an input string contains spaces or not.

split function accepts a delimiter as first parameter, a string as second paramter and splits the string into an array by that delimiter. Returns original string if delimiter is not found.

Here is the code I used :


jQueryUI Sortable-tr width reduces when used with table

I am working on a project where I need to make a list of items sortable. Naturally, I used jQueryUI’s sortable component. Now it works great for elements like ul, or ol or any other html structure.

In my case the items were in a table and I had to make the tr’s sortable. Implementing the sortable gave me the desired behavior. Here is the code I used:

But while dragging the rows, the width of cells inside currently dragged row was getting decreased, making the row appear far smaller than normal size and ugly. This is what I am talking about (note row #6):

I did a quick Google search and found the following solution which works well. You will have to use the “helper” option provided by jQuery UI api. Here is it how you use it:

Source : StackOverflow



Favorite tech links of the week : 17 Jan – 23 Jan, 2011

This post contains some of the useful and interesting tech links I found during last week. To keep up to date with the latest information, subscribe to the feed or follow me on twitter @v08i.

How to write a simple application on jQuery Mobile : http://goo.gl/5DpOO

jQuery Mobile

50 Free Tools and Apps for Web Designers and Developers : http://goo.gl/6YjNL

50 Free tools for developers

10 Useful jQuery Plugins for Images : http://goo.gl/VTk1F

jQuery Image Tools

20 less known Open Source PHP CMS-es : http://goo.gl/cM6f3

php Cms

11 More Things I Learned From the jQuery Source : http://goo.gl/2zBh7

CSSReset : All the most common CSS Reset scripts in one place : http://goo.gl/8OV9E

CSS Resets

JavaScript Slider – TinySlider 2 : http://goo.gl/526cL

js Slider

Searching text in a HTML table using jQuery

Filter Table

Here is the situation. You have a really long table with hundreds of rows and you want to filter the rows(instantly!) that contain a specific keyword in any of the table cells.

This article will show how this can be achieved with the help of jQuery.

View Demo Continue reading Searching text in a HTML table using jQuery