Blog

Dissemination of views, information and knowledge without any cost or ado was made possible after blogging dawned upon us. Lets take a look at some of the burning topics, general discussion, innovations and techniques from our Editor’s desk

  • Aug 1 2013

    Top 6 jQuery Tips and Tricks for Web Developers

    jQuery is an awesome JavaScript Library, which is used very often to add dynamic functionality to a website. For example; adding a hover effect, popup a subscribers form after a specific time, bring animation into effect after or before a mouse click, etc. If you are into web development, you must have tried to find certain tips and tricks that can be helpful to you while coding. Though in jQuery, you almost get a plugin that makes your job done, but how about learning some perfect jQuery tips and tricks that can make your code work like a charm, and add the required functionality quickly. These tips and tricks can be handy while working with a jQuery plugin or while writing your own jQuery code.

    # Make your jQuery Code work after the DOM is loaded

    It is quite essential to ensure that your jQuery code works only once the DOM is loaded on the web browsers, or else the users may face certain problems while viewing your site. In addition to this, there are two ways of doing that, one is called the shorthand method and the other one is an actual method to implement that functionality on a website.

    The actual code:

    The shorthand code:

    # Allow your users to resize your web fonts

    On various occasions, your web font size may not suit your web visitors; as a result they may quit browsing your website and move on to others. But not anymore, just thank jQuery as it makes it pretty easy for you to provide your users with an ability to resize your web fonts according to their preferences. For example; if you have used a 10 pixel font on your website, a user can increase it to any extent unless you define the maximum font size in your jQuery code.

    # Fluid Thumbnail Bar with jQuery

    Nowadays, Responsive Design is in trend, and a lot of companies and individuals are using it to make their website adapt to any screen size, no matter what the output device is. That’s because people have started to make a shift to smartphones and tablets, but Desktops are still in use, so it is imperative to cater all kind of devices a user may use for web browsing. And that’s where a Fluid Thumbnail Bar may come effective, as it will adapt to any screen size because of its fluid characteristics.

    The HTML

    The jQuery

    # Creating an Infinite Carousel with jQuery

    Carousel is one of the most sought after element of a web page and it can be easily found on many websites that also includes the popular ones. A Carousel is is used to display images in a sequence, and people also call them as featured content modules, image rotators, sliders, etc. Creating a Carousel may prove to be a complicated thing to many web developers unless they have got some real expertise. But once you go through the given code, it won’t be a tough task anymore.

    The HTML

    The JavaScript

    # Active form field highlighting with jQuery

    We all use a variety of forms on a website, and if not many then at least a contact form always exists on our websites. Have you ever thought to make your forms more appealing that fascinates the users imagination? There are a variety of ways to enhance a form’s overall appeal, for example; you can add drop shadow, inner shadow, inside the input fields of a form, make their borders go round from the edges, change their appearance on a mouse click, etc. But, here we tell you about something different, something with which you can highlight the active form field with jQuery.

    The HTML

    The CSS

    The jQuery

    # Creating a jQuery based Virtual Keyboard

    Though Virtual Keyboards are generally used on internet banking websites, but if you also run a membership based website where your users need to login before they can access their profile and data, then you can also use a Virtual Keyboard to avoid any keyloggers (if stored in a user’s computer) to steal the keyboard strokes. So, don’t you want to know how to make a virtual keyboard for your own site? Here’s how it is done.

    The HTML

    The XHTML

    The jQuery

    Posted by ajeet Posted in: web design Comments: 0