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.

Quick Tip – TinyMCE : Use full url while inserting image

fi-tinymce

Problem:This is a common scenario. You are using tinyMCE in admin of a site to insert a link to image.  While displaying that image on frontend tinyMCE makes it relative path instead of absolute.
Solution:
When setting up tinyMCE set these 2 configuration options:

 

Both these options are true by default. As the name implies, “remove_script_host” removes the protocol and host part of URLs. “relative_urls” must be set to false is you want to set “remove_script_host” to false.

TinyMCE documentation for relative_urls and remove_script_host.

Hope it helps.

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

 

 

Why you MUST use client side validation

validation

Client side validation is checking the values against the desired format before sending them to server side for further processing. Javascript is used for validations on browser. Lately, with the popularity of jQuery, a large number of validation plugins are available which make it even more easy to implement validations on forms.

A word of caution before beginning. Though client side validation is very useful and simple to implement, it should NEVER be thought of as a replacement for server side validations. If the javascript is turned off on the browser or user bypasses it and no server side validation is placed, your application then is at the mercy of users solely.

Read Why you must use server side validation?

So, here is why you should use client side validation.

Easy to implement

Although you can write your own validation for forms, there are multiple javascript and jQuery plugins available that require developers to write minimal amount of code to implement validation. These plugins also provide several options for customized validation like strings, numbers, dates, email addresses etc.

No waiting time for users

Since javascript executes on users browser itself, client side validation provides instant feedback. Plugins like live validation provide helpful messages to users as they type. Besides saving time, this pattern makes data entry less error prone.

Less server trips

Without javascript validation, each time a value needs to be checked, the form should be submitted and server would then process it and show the result. Take for example a text box which asks for email. Possible validations for it could be blank value and a valid email address. With javascript validations in place we can save these trips to server.

Interactive and Fun

Have a look at jQuery inline formValidator. Gone are the days of ugly alert boxes (those were really irritating). With javascript running in browser, you can unleash your creativity and make validation an interactive and fun process by combining html and css with javascript. You can use tooltips and fancy effects to guide your users.

Users love it

Waiting for full page load only to see one error message is no good. Users like instant feedback and helpful error messages. Javascript allows you to create a rich visual experience that is a major trait of rich internet applications.

That’s it for now.

It is worth mentioning again that alone client side validation is no good. Always, I repeat, always use server side validation along with client side validation. This way, in case the javascript validation fails, you can always rely on the server.

Click here to read more about best practices of form validation