Quick jQuery: Limit input box characters to defined count

June 25th, 2011 - 

Earlier today working on a project , I found one trick which I would like to share. Here is a small code that limit a input box for defined number of characters.

Please take a look on following example:


Assuming we have to limit characters to 20.

$(document).ready(function(){$(‘#myInput’).keyup( function() {var $this = $(this);if($this.val().length > 20)$this.val($this.val().substr(0, 20));}); });

That’s it, yeah its done!! You can check Working Demo

Any updations, suggestions and corrections are welcome.

View the original article here

25 Incredible jQuery Plugins for Design Enhancements

June 25th, 2011 - 

There are a lot of readymade jQuery plugins from helpful developers and designers who put excellent effects and functionality in their code to help your website. Here are 25 jQuery plugins to perk up your site. You can just download the scripts and add them to the jQuery framework, and it will enhance your web design.

Coda Slider is a cool sliding panel plugin widget from jQuery. It scrolls between dynamically made tabs and gives circular and easy navigation. It allows multiple sliders to sit on the same page. The best part would probably be its smooth motion.

This enables content or images to be slid vertically or horizontally as you click on the controls. It can be configured with CSS alone. You just have to set a link to the plugin file, then set up the content and you can style it using CSS.

Here’s a great way to view your pics. Images are listed with ‘More info’ button below them. As you click on it, the image grows in size to let you have a bigger view. To shrink the image back, click on the ‘close’ button.

Fancy Box is a tool that helps you display images, multimedia and HTML content in a Mac type ‘lightbox’ which floats on top of the web page. It can be easily customized and can group related items for easy navigation.

This one’s a lightbox to show divs, images, or complete remote pages in the style of Facebook. It is very easy to use and looks good too.

This plugin lets you add layouts easily to your content. You can add simple borders, rounded corners, box layouts, faded edges, and lots more. It is fast and concise.

Captify is a jQuery plugin to display image captions that come into view as you rollover your mouse on them. It is small and simple, and very easy to use.

With Quicksand, you can organize and reorder your things easily. It also has nice animation as you shuffle your stuff. This plugin will help you to scale out and rearrange the icons to their proper places- as specified by you.

This plugin lets you select any option from the given list of choices. This menu can be activated by mouse over or mouse click. Width of menu content can be customized.

jSquares makes an image pop up, and shows its description as mouse hovers over it.
It is great for seamless navigation.

This one is an image magnifier plugin. It is handy and provides great use in ecommerce applications and image galleries where users have to zoom and see an image carefully.

TipTip finds the edge of your browser window and it will ensure that your tooltips stay inside the window. So the tooltip size will be adjusted.

This plugin lets you organize content into collapsible sections. These sections can expand on demand. It comes with many skins and is highly customizable.

This plugin will resize your images if they are bigger than your browser window. It provides versatility and is centered in the window even if the use scrolls through the page.

Space Gallery is inspired by Time Machine of Apple. It is a pretty plugin by jQuery that creates a 3D image gallery. This gallery lets you float through your images easily. This plugin gives a really nice effect.

SimpleModal is a modal contact form. It is pretty straightforward and flexible. You can select the right theme according to your taste. Its aim is to give a container to developers that they can populate with data.

The Virtual Tour plugin is easily accessible and can run on a system even if JavaScript is not active on it. Navigation is done by using regular HTML tags.

LavaLamp does just its name indicates: it looks like a lava lamp. It presents a cool lava-flowing effect in the navigation menu of Blogger.

If you want different edges for your elements, then you can use Corner. It can generate and position div elements dynamically. It offers many different designs for element corners.

This plugin has a few tricks that you can use to get a great looking gallery. It has 3 built in styles: black, white and shadow. It can be configured and customized with various options.

Another slideshow plugin that is perfect if you have to handle big volumes of images, and conserve the bandwidth as well. It has a flexible configuration and smart image preloading, along with thumbnail navigation.

An image gallery framework that will simplify your task of creating image galleries for mobile devices and web. It has many themes and it can be easily customized.

These are very popular tabs of jQuery and they have many configurations. For instance, you can have nested tabs, rotating tabs and the like. They offer easy navigation.

This plugin will make contact or feedback forms more accessible. You can create a contact form on any web page effortlessly. It overlays the content on the page really quickly thus making things easier for you.

With this plugin, you can add iPhone scrolling ability to your webpage. It accepts a parent element along with overflowing children elements. It then turns the parent element into a scrollable pane. It uses a drag and release method instead of scroll bars.

View the original article here

Fundamental for creating interactive maps using J-Query

June 24th, 2011 - 

JQuery is enhanced Java Script libraries that run on client’s side in client server based environment over internet, client side means web browsers. JQuery is used to bring interactive ness, robustness and dynamicity to web page. There are whole lots of things that you can do using J-Query.
All major website that operate globally have introduced map support to there websites showing geographical location of there offices or regions where they operate or provide services. Adding interactive map to you website can done in number of ways either you can uses Google, Yahoo or Wiki maps or you can create your own customized map. Using third party map service (Google, Yahoo or Wiki) is quite easy job; you just need to copy the XHTML map link to your website page and its done. But still there are certain limitations and restrictions that are associated with it, to overcome these limitations you can uses customized map for your website.

Designing is most crucial phase in any project. For designing there are numbers of tools available, according to your ease you can select from these tools to create design. Some of the most prominent tools used for creating web templates are Photoshop, Illustrator, Fireworks and GIMP. Design along with CSS and HTML is a body and soul combination. Well CSS and HTML can make things function but they actually can not bring about robustness and dynamicity to your map for that purpose you need to use Java Script, AJAX or J-Query. But J-Query is best suited for this type of projects.

To add J-Query you need to download J-Query, in addition to download you can also choose to run J-Query from content delivery network. There are different versions you can either go for a production version or development version. An uncompressed development version is a version in which all of the text is nicely and neatly formatted, you can make potential changes in it. Production version which is also called minified which takes away all the white space and brings coding part into play making the file size as small as possible. The production version is not meant to be edited so it is recommended for download. You can add The J-Query File into your map project folder. You need to create one more new file in Dreamweaver this will be the custom J-Query file that you will need for project.
After adding J-Query successfully you are ready to write first J-Query for your project. J- Query codes can be written separately so that you can see them hooking up CSS in Dreamweaver.

You can right J-Query that listens to the form element that can be added to our page. You can do so by adding J-Query to the HTML content in Dreamweaver. You can write some logical statements for relationships.

You can enhance the graphic effects by adding CSS 3 tags which brings in effects like round corners, shade effects etc. You can also isolate CSS rule so they don’t effect its (Maps) integration with any website.

This is basic idea that will help you to create a customized map using J-Query, HTML and CSS. You can create highly interactive info graphic using J-Query. If you are new to J-Query you can use visual J-query though the back end fundamental are same. You can use sample codes that are available on web and modify them according to your need.

View the original article here

An Insight Into JQuery Library

June 23rd, 2011 - 

jQuery can be defined as a cross-browser library that is made to ease HTML scripting from client-side. Making it easier and faster to build JavaScript web applications and webpages, jQuery allows web programmers to write single line of codes instead of 10-20 JavaScript code lines. With jQuery, writing a JavaScript code can be an absolute fun. It reduces the total time consumed by taking the most common and repetitive tasks while clearing out the extraneous markup to make them short and easily understandable.

jQuery can be used to develop extraordinary web 2.0 applications. By keeping the JavaScript code succinct and clear for programmers, jQuery library has overpowered JavaScript by providing exclusive functionality and features.

It is a freely available, open-source software that ensures easy navigation of a document, selecting Document Object Model, evolving pleasing animations, developing Ajax applications and handling events. Most of the web developers today make use of this Javascript library as it provides capability to developers pertaining to the evolvement of plug-in over JavaScript library. With intelligent features it provides, web developers are facilitated with animation and lower-level abstractions,theme-based widgets and many advanced effects. This further ensures development of powerful, static web pages.

In addition, jQuery allows web developers to search and manipulate HTML elements efficiently with minimum possible coding. The support is provided with the help of a ‘selector’ application programing interface that gives developers an opportunity to make HTML element related queries and further applying commands.

Another most intriguing jQuery command attribute is their ability to be hooked together. Such a thing allows feeding of one command into the other. jQuery also encompasses an already installed animation APIs set that can be brought to use as commands.

DOM functions of element selectionDOM modification and traversalCSS manipulations Events handlingAjaxAnimations and other effectsFlexibilityJavascript Plug-insUtilities

jQuery as we discussed is used for writing JavaScript applications without much difficulty and thus integrating captivating animated effects when compared to those developed in Flash. Besides this, jQuery can help web programmers in:

Addition of fading, sliding and expanding or contracting effects to elementsAllows Javascript to gather additional data from Web server without there being any need of reloading the pageNew content can be added, removed or rearranged over web page in just few lines of codeHelps in building animated slideshows and lightboxesAllows creation of multi-level dropdown animated menusAllows development of dragging and dropping interfaces.

Author Profile:

Maneet Puri is the Managing Director of a leading Indian website design company in Delhi, LeXolutionIT Services. Empowered with a team of experienced website designers in India, the company assures to provide comprehensive and affordable web solutions to clients internationally. Join him on LinkedIn

View the original article here