Monday, June 27, 2011

how to hide a div when cliked outside its region

jQuery(document).ready(function()
{
    jQuery('#loginDiv').hover(function(){  
        mouse_inside_div=true;
    }, function(){
        mouse_inside_div=false;
    });

    jQuery('body').mouseup(function(){
        if(! mouse_inside_div) jQuery('#loginDiv').hide();
    });
});

<div id="loginDiv"></div>

http://www.mohitsharma.net/category/category/jquery?page=1 this  the link where i got this code.


how to find out a radio button is clicked

if you have id of radio button and the value that you have fixed it very simple to get things done.

jQuery(document).ready(function(){
jQuery("#rd1").change(function(){
    if (jQuery("input[name='rdbtn']:checked").val() == '1')
        {
        jQuery('#acctype').hide();
       
        jQuery('#acctypenav').show('slow');
}else{
    jQuery('#acctype').show();
       
        jQuery('#acctypenav').hide('slow');
   
    }
   
   
});




 jQuery("#rd2").change(function(){
    if (jQuery("input[name='rdbtn']:checked").val() == '2')
        {
        jQuery('#acctype').hide();
       
        jQuery('#acctypenav').hide('slow');
}else{
    jQuery('#acctype').hide();
       
        jQuery('#acctypenav').hide();
   
    }
   
   
});

simple tabs with java script + css tabs

java script used:

  1.  call a funcition on click
  2.  find elements with specific id
  3. show and hide elemnets  using css
  4. add and remove class       using css
* changeability property used.

1. use function showtab(id){
   
    if(id=='tabg1'){
        document.getElementById('tabg2').style.display='none';
        document.getElementById('tabg1').style.display='block';
        document.getElementById("anchor2").className=""
        document.getElementById("anchor1").className="active"
       
        }
    else {
        document.getElementById('tabg1').style.display='none';
        document.getElementById('tabg2').style.display='block';
        document.getElementById("anchor2").className="active"
        document.getElementById("anchor1").className=""
        }
}



 <div id="tabnav">
            <ul>
               <li><a  id="anchor1" class="active" href="#" onclick="showtab('tabg1')">aaaaa</a></li>
               <li><a id="anchor2" class="" href="#" onclick="showtab('tabg2')">bbbbb</a></li>
            </ul>
    </div>


<div id="tabg1">
</div>


<div id="tabg2">
</div>-------------------------------- its good when you have only two tabs.
next i will show you how to do same with multiple tabs.

you need to understand a dom first. like to remove class form all the anchor tags inside a particular div ie we have id of a div.

we will call a function on click, this will remove all the default active class to links once and add the active class to the link which triggred the function call. along with that we will ask him to send us the div name which you want to dispaly. this solves our problem





Hello friends

I am in love with front end, i am not the greatest script er, but love to script. to my needs. I have passion to make the interfaces best in every regards. which gushes me to keep learning,
I will be taking you to various scripting libaries jQuery, and we will also see other avaliable, i will be staring with javascript livaray most popular "Jquery"