GeekTantra » Plugins http://www.geektantra.com yet another geek's blog Thu, 03 Jun 2010 00:46:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 jQuery Sliding Menu (AKA Lavalamp Menu) http://www.geektantra.com/2010/02/jquery-sliding-menu/ http://www.geektantra.com/2010/02/jquery-sliding-menu/#comments Sun, 28 Feb 2010 07:21:16 +0000 GeekTantra http://www.geektantra.com/2010/02/jquery-sliding-menu-aka-lavalamp/ jquery-sliding-menu

Finally, I am back after a long time with a refreshing new jQuery plugin to make your Web Page menus look better. Its the jQuery Sliding Menu.
Demo: Click Here
Download: Click Here
Project Repository: Click Here

]]> Finally, I am back after a long time with a refreshing new jQuery plugin to make your Web Page menus look better. Its the jQuery Sliding Menu also known as the Lavalamp Menu or Fancy menu by some.

Demo: Click Here
Download: Click Here
Project Repository: Click Here

Usage:
  • In the head section add the following code:

    ?View Code XML
    <link rel="stylesheet" href="stylesheets/jquery.sliding-menu.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<!-- jQuery UI is Optional. Its only required if using easing functions. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="javascripts/jquery.sliding-menu.js"></script>
<script type="text/javascript">
jQuery(function(){
  jQuery('#HorizontalSlidingMenu .SlidingMenu').slidingMenu();
  jQuery('#VerticalSlidingMenu .SlidingMenu').slidingMenu({ initialOpacity: 0.5 });
});
</script>
  • Add the form in the body as shown below

    ?View Code XML
    <div id="HorizontalSlidingMenu">
<ul class="SlidingMenu Horizontal">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
</ul>
</div>
<div id="VerticalSlidingMenu">
<ul class="SlidingMenu">
<li><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
</ul>
</div>

That’s it you are done!

For advanced users:

List of options available:
backgroundClass Class of the moving background (Default: “Background”)
initialOpacity Opacity of the moving background (Default: 1)
slideSpeed Speed at which the background should slide (Default: 1, should be a fraction less than 1 which is max speed)
easing Type of easying with which the background should slide (Default: “linear”, must include jQuery UI core for this to work)
callback Callback of the sliding menu event (Default: “”)
backgroundContent HTML for moving background (Default: “<div></div>”)
activeClass Class for the clicked link (Default: “ActiveLink”)
highlightOnClick Tells whether the menu item should get highlighted on clicking it (Default: false)

Hope you liked the plugin. Awaiting your comments

If you liked the plugin please spread it for your friends to use and please rate it at http://plugins.jquery.com/project/jquery-sliding-menu

]]> http://www.geektantra.com/2010/02/jquery-sliding-menu/feed/ 13 jQuery Live Form Validation http://www.geektantra.com/2009/09/jquery-live-form-validation/ http://www.geektantra.com/2009/09/jquery-live-form-validation/#comments Sun, 20 Sep 2009 20:56:34 +0000 GeekTantra http://www.geektantra.com/?p=99 jquery-form-validate

After trying a load of non intuitive and not very useful jQuery form validation plugins I came up with this plugin. Its a jQuery plugin which helps create easy form validations with high flexibility and a large set of options.
Simple Demo: Click Here
Advanced Demo: Click Here
Download: Click Here

]]> After trying a load of non intuitive and not very useful jQuery form validation plugins I came up with this plugin. Its a jQuery plugin which helps create easy form validations with high flexibility and a large set of options.

Demo: Click Here
Advanced Demo: Click Here
Download: Click Here
Project Repository: Click Here

Features:
  • Supports custom validations
  • Options to toggle between live and onsubmit validations
  • Completely customizable CSS
Usage:
  • In the head section add the following code:

    ?View Code XML
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
            jQuery(function(){
                jQuery("#<id of field to be validated>").validate({
                    expression: "if (<expression for validation>) return true; else return false;",
                    message: "<message on validation failure>"
                });
            });
</script>
  • Add the form in the body as shown below

    ?View Code XML
    <form action="" method="post">
<input type="text" name="<name of field to be validated>" id="<id of field to be validated>" />
<input type="submit" value="Submit" />
</form>

That’s it you are done!

For advanced users:

Options:
  • expression: The javascript code which should have two outputs
    or . The value of the field is given by . As this is a string escape characters for backslash and other non standard characters must be used. (Default: return true;)
  • message: The validation message for the field. (Default: “”)
  • error_class: The CSS class of the error message container. (Default: “ValidationErrors”)
  • error_field_class: The CSS class added to the field when found invalid. (Default: “ErrorField”)
  • live: Sets whether the validation of the field should be live or on form submit. (Default: true)
]]> http://www.geektantra.com/2009/09/jquery-live-form-validation/feed/ 87 jQuery Mega Menu http://www.geektantra.com/2009/09/jquery-mega-menu/ http://www.geektantra.com/2009/09/jquery-mega-menu/#comments Thu, 10 Sep 2009 19:43:23 +0000 GeekTantra http://www.geektantra.com/?p=14 jquery-megamenu-thumbnail

This is a simple jQuery based MegaMenu plugin.
Demo: Click Here
Download: Click Here

]]> A new version is available at
http://www.geektantra.com/2010/05/jquery-megamenu-2/

The other day I was searching for a jQuery based MegaMenu over google but couldn’t find any good plugin for the same so sat down and wrote one for myself. Here is a simple jQuery plugin to create an unbloated MegaMenu in seconds.

Demo: Click Here
Download: Click Here
Project Repository: Click Here

Usage:
  • In your header section add the following:
    ?View Code XML
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="javascripts/jquery.megamenu.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".MegaMenuLink").megamenu(".MegaMenuContent", {
        width: "900px"
    });
});
</script>

    We can replace MegaMenuLink with the class of the menu links and MegaMenuContent with the class of the menu content. To have a flexible width of the megamenu just disable the width options or set width:”auto”.

  • Next in your body add the following code:
    ?View Code XML
    <a class="MegaMenuLink" href="javascript:void(0)">First Mega Menu</a>
<div class="MegaMenuContent">
  Menu Content goes here
</div>

Enjoy the plugin and do not forget to comment about it here.

]]> http://www.geektantra.com/2009/09/jquery-mega-menu/feed/ 122