3 common requirements/issues and the corresponding Jquery solutions for your next web project
Recently, while working on some client projects, I noticed a few requirements(I know there are many) that were common. I strongly feel, this will be useful for your next web project.
1. Empty form field value on focus/click
The requirement/issue:
This is a very common requirement. You would have noticed form fields that have a value by default which disappears when you click/focus on them. When you click outside, the value appears again.
Solution:The jQuery emptyonclick Plugin works like a charm. All you need to do is download this plugin to your project directory and include the following code within the head tags.
| Javascript |
| 01 | |
| 02 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> |
| 03 | </script> |
| 04 | |
| 05 | <script charset="utf-8" type="text/javascript" src="jquery.emptyonclick.js"></script> |
| 06 | |
| 07 | <script type="text/javascript"> |
| 08 | $(document).ready(function(){
|
| 09 | $('.emptyonclick').emptyonclick();
|
| 10 | }); |
| 11 | </script> |
| 12 |
Now add the class "emptyonclick" to all form fields that you would like to empty onclick.
You can find more about the usage here
2. Truncate lengthy text with either a "more" button or 3 dots at the end
The requirement/issue:
I am sure that most of you would already have faced this issue, especially with lengthy breadcrumbs. You don't have to run behind and bother a programmer anymore for a solution.
Solution:Truncate is an awesome jQuery plugin that helps you achieve this in seconds. Download the plugin and include the following code within the head tags
| Javascript |
| 01 | |
| 02 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> |
| 03 | </script> |
| 04 | |
| 05 | <script charset="utf-8" type="text/javascript" src="jquery.truncate-2.3.js"></script> |
| 06 | |
| 07 | <script language="javascript" type="text/javascript"> |
| 08 | $(function() {
|
| 09 | $(".classname").truncate( 60 );
|
| 10 | }); |
| 11 | </script> |
| 12 | |
| 13 |
Replace the .classname with the class name of your HTML element that contains the text. Also, the number 60 in the code above is the maximum number of characters you would like to allow before truncating. Replace that with your value.
Adding a "more" link at the end of the text is another cool usage. You can find more about the usage here.
3. Adding classes to the first and last list items
The requirement/issue:
I don't think there will be a HTML/CSS developer who haven't abused wordpress for not adding first and last classes for their lists
Just imagine a menu that needs a different background for the first and last list item. You'll find this handy when creating themes for a CMS like wordpress where you have no control over the HTML code.
Solution:After spending a few minutes on google, I found this snippet
| Javascript |
| 01 | |
| 02 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> |
| 03 | </script> |
| 04 | <script type="text/javascript"> |
| 05 | $(function(){
|
| 06 | $("li:first-child").addClass("first_item");
|
| 07 | $("li:last-child").addClass("last_item");
|
| 08 | }); |
| 09 | </script> |
| 10 |
This can also be achieved using the :first-child and :last-child CSS pseudo-classes.
the 3 dots can be done with CSS text-overflow property, but it not supported by all browser
With regards to the discussion on adding a jquery for the adding class to first and last list, i always used li:first-child and last-child in the stylesheet directly rather than adding a jquery.
I hope one jquery less is wordpress one second faster – what do you think ?
Thanks for these great tips, Gopal.
I didn’t understand what you meant by inline formatting though. Is there a simpler trick to achieve the first one? If so please share it with us.