3 common requirements and the corresponding Jquery solutions for your next web project

jquery-requirements-solutions

Another post to boost your productivity :)

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

form-focus
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.



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

truncate-with-dots
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


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

first-last-class-li
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




This can also be achieved using the :first-child and :last-child CSS pseudo-classes.

About Gopal Raju

Gopal Raju is a passionate designer, developer and blogger from India. He’s the founder of Convax Solutions, a web design and development agency in India. Catch up with him on dribbble, Twitter and Facebook.

22 Responses to 3 common requirements and the corresponding Jquery solutions for your next web project

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Very Nice! these are very common tasks all web designers have to face.

  2. Thanks for the awesome plugin

  3. about the “Truncate lengthy text with either a “more” button or 3 dots at the end”
    the 3 dots can be done with CSS text-overflow property, but it not supported by all browser

  4. Very helpful tips. Thanks a Million

  5. *You ROCK the CODE & the Design :D

  6. This is brilliant Gopal – however, it conflicts w one of my various JQuery scripts presently . I will have to figure out another way to utilise this somehow . As always : You ROCK the & the Design . Blak Magik Man ;)

  7. hey, it definitely looks like you know what youre doing with this site. Good work. Let me know if I could ever help ya out with anything.

  8. 2 tip might be useful for my next project!! thanks for sharing your knowlege m8!! keep going th great work!

  9. I have to agree with cooljaz124 abut using :first-child and :last-child. I prefer ignoring the incompatible browsers and shave off the milliseconds for those who use decent browsers. ;-)

  10. Hi Gopal,
    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 ?

    • I agree, that’s why I mentioned about the CSS alternative. But ** some browsers (You can guess who :D ) doesn’t support those cool CSS properties

  11. Short and Sweet!
    Thanks for these great tips, Gopal.

  12. I’m starting with jQuery and wordpress so this is very useful, thanks !

  13. Nice tips! These all seem pretty handy, although I’m not sure I’d use the first one over inline formatting.

    • Thanks for your comments Matt,
      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.

  14. Very handy and nice tips ….

  15. Nice one … but still i believe you could have added loads more. Keep rocking :)