Facebook Style Drop Down Log out Menu

i have tried to facebook style drop down menu list. i used some few line simple jquery function. click down arrow drop down menu list display here i use div show and hide based on jquery code. i make some own css to designed the drop down menu.

Login and Signup tab using jquery

This post make on using tab on login and signup tab concept simple method  design tab style login and registration panel with CSS, HTML and Jquery. Tab system help login and easy register user information.

Live Demo     View coding

Image Zoom In and Zoom Out concept

This post make on mouse hover image zoom in and zoom out using j-query just call image id in j-query image with extender give animation effect slow access image on zoom in

Live Demo          View code 

Multiple Values selected of select box

This post make on multiple value select of select box using JavaScript This function using multiple value select

option box and display the value input box just function option value select shows the value in input box function displays.

Live Demo View coding

Css style Tab concept using Radio button

This is simple step change the radio button background and making a step by step Tab concept. Try this coding make on few steps follow having a style Tab with using radio button.

Add caption

      Download

Style Login Light Box coding

This script make on style lightbox using jquery with automatically validate using this script make on simple style box

Copy this script on head tag
  

Download Full Source code click Here

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
   $(document).ready(function() {
   $('a.login-window').click(function() {
 
  //Getting the variable's value from a link 
   var loginBox = $(this).attr('href');
 
   //Fade in the Popup
   $(loginBox).fadeIn(300);
 
   //Set the center alignment padding + border see css style
   var popMargTop = ($(loginBox).height() + 24) / 2; 
   var popMargLeft = ($(loginBox).width() + 24) / 2; 
 
   $(loginBox).css({ 
   'margin-top' : -popMargTop,
   'margin-left' : -popMargLeft
   });
 
   // Add the mask to body
   $('body').append('<div id="mask"></div>');
   $('#mask').fadeIn(300);
 
   return false;
   });
 
   // When clicking on the button close or the mask layer the popup closed
   $('a.close, #mask').live('click', function() { 
   $('#mask , .login-popup').fadeOut(300 , function() {
   $('#mask').remove();  
   }); 
   return false;
   });
   });
 
</script>

Show And Hide Concept in Radio Button

Show hide concept based on similar div hide and show concept but choose the radio button div will be display function make on jquery. radio button value name call on div just choose radio button value increased div action show/ hide. jquery function called input names to changes the divs values. also having live demo

1.Copy the Script in head tag

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script>
$(document).ready(function() {
    $("input[name$='cars']").click(function() {
        var test = $(this).val();
 
        $("div.desc").hide();
        $("#Cars" + test).show();
    });
});</script>

2.Copy the Below coding in body tag

<div id="myRadioGroup" align="center">
    <p><input type="radio" name="cars" checked="checked" value="2" />Online Payment</p>
    <p><input type="radio" name="cars" value="3" />Door Delivery</p>
</div>
 
<div id="Cars2" class="desc">
       <table width="426" height="127">
         <tr>
           <td>Your Card Number</td>
           <td><label for="card"></label>
           <input type="text" name="card" id="card" size="35" /></td>
         </tr>
         <tr>
           <td>Password</td>
           <td><label for="pass"></label>
           <input type="text" name="pass" id="pass"  size="35"/></td>
         </tr>
         <tr>
           <td colspan="2" align="center"><input type="submit" name="submit" id="sub4" value="Submit" /></td>
         </tr>
       </table>
    </div></form>
 
    <div id="Cars3" class="desc" style="display: none;">
        <table>
        <tr><td>ADDRESS-1</td><td><textarea name="add1" cols="" rows=""></textarea></td></tr>
 
           <tr><td>Number</td><td><input type="text" name="phone" placeholder="Enter u r ph number"></td></tr>
 
                <tr><td colspan="2"><input type="submit" name="submit2" value="submit" /></td></tr>
                </table>
 
    </div>

Live Demo

Online Payment Door Delivery

Your Card Number
Password

ADDRESS-1
Number