Jquery client side validation

When i was browsing the net for using the client side validation using jquery to my site, i found a useful plugin which will validate the form. I have gone through the reviews of this plugin and most of them said that they are using this plugin and it is really nice.

I thought that i would share this to all, so that it would be useful. Bassistance.de is the site which gives the plugin.

Follow the link will help you how and where to use Client side validation

If anybody have used it before, please share your experience.

Read more...

Simple animated drop down menu using jquery

This tut will help you to have a simple animated drop down using jquery. Before using this please add the js file from jquery website. Refer the site http://jquery.com/ for more details. You can download the minified version or the developer version.

Once you download and include in the page then using the below steps.
HTML

<ul class="drospdown">
<li><a href="#">A Website #1</a></li>
<li><a href="#">A Website #2</a>
<ul>
             <li><a href="#">Indoor</a></li>
             <li><a href="#">Outdoor</a></li>
            </ul>

</li>
<li><a href="#">A Link #1</a></li>
<li><a href="#">A Link #2</a></li>
<li><a href="#">A Website #3</a></li>
<li><a href="#">A Website #4</a></li>

<li><a href="#">A Link #3</a></li>
<li><a href="#">A Link #4</a></li>
</ul>

Javascript

function mainmenu(){
$(" .drospdown ul ").css({display: "none"}); // Opera Fix
$(" .drospdown li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(400);
},function(){
$(this).find('ul:first').slideUp(400);
});
}
$(document).ready(function(){
mainmenu();
});

this will give you an animated drop down menu...

Read more...

Popular CSS Frameworks - Yahoo YUI, 960 CSS, Blueprint, Yaml, jQuery

Tried of writing HTML, CSS code to your web pages? Making your site to work with all the major browsers. Running behind CSS hacks? Here is a simple way to solve all your issues, CSS Frames. Most of the designers would heard about CSS Frames, for those who don’t know here is a brief description from: Wikipedia

A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage.

5 Popular CSS Frameworks
1) Yahoo YUI (Yahoo User Interface Library)
2) 960 CSS Framework
3) Blueprint CSS Framework
4) Yaml (Yet Another Multicolumn Layout)
5) The jQuery UI CSS Framework

These are the top 5 CSS Framework. I have no idea about the other css framework, but i have used Yahoo's YUI framework. The YUI Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. For CSS, they provide

1) CSS Reset (neutralizes browser CSS styles)
2) CSS Base (applies consistent style foundation for common elements)
3) CSS Fonts (foundation for typography and font-sizing)
4) CSS Grids (more than 1,000 CSS-driven wireframes in a 4KB file)

You can choose the overlay of the width, by mentioning #doc or #doc2 or #doc3 etc...
* #doc - 750px centered (good for 800x600)
* #doc2 - 950px centered (good for 1024x768)
* #doc3 - 100% fluid (good for everybody)
* #doc4 - 974px fluid (good for 1024x768)
* #doc-custom - an example of a custom page width

Templates
Optionally choose the secondary column's width and orientation with one of six templates.

* .yui-t1 - Two columns, narrow on left, 160px
* .yui-t2 - Two columns, narrow on left, 180px
* .yui-t3 - Two columns, narrow on left, 300px
* .yui-t4 - Two columns, narrow on right, 180px
* .yui-t5 - Two columns, narrow on right, 240px
* .yui-t6 - Two columns, narrow on right, 300px

Nesting Grids
Optionally nest standard grids (.yui-g) and special grids (.yui-gb, ... .yui-gf) to subdivide.

* .yui-g - Standard half grid (and nest again for quarters).
* .yui-gb - Special grid, 1/3 - 1/3 - 1/3
* .yui-gc - Special grid, 2/3 - 1/3
* .yui-gd - Special grid, 1/3 - 2/3
* .yui-ge - Special grid, 3/4 - 1/4
* .yui-gf - Special grid, 1/4 - 3/4

If you find this is diificult to keep in mind, they have got a grid builder, a simple interface for Grids customization. Where you mention the values in the box, it will provide you the results.

YUI Components
Along with CSS they also provide YUI Components where you can easily integrate with javascripts for animations, Carousel, Slider, Resize and lots more...

YUI Compressor
With this tool YUI Compressor, you compress your css and javascripts file which will reduce your file size into half. This is very much helpful for web optimizer.

To know more details and to download the latest version of YUI, please visit the site Yahoo YUI. Majore Interent companies like Sulekha, Sify are using YUI.

Read more...