javaScript: 2011

Wednesday, October 19, 2011

To find elements , no of elemtents .

document.write(document.anchors.length); // find all anchors on page
if yo have more than 2 forms
document.write(document.forms[0].name); // for first form name
document.write(document.images.length);// all images
document.write(document.cookie);// find cookies
var x=document.getElementsByName("x");
alert(x.length);// find no of elements on a page

getElementById()	Accesses the first element with the specified id
getElementsByName()	Accesses all elements with a specified name
getElementsByTagName()	Accesses all elements with a specified tagname

javascritp style to elemnt

document.body.style.backgroundColor="lavender";

find a tag : document.getEelementByTagName

x=document.getElementsByTagName("p");

for (i=0;i<x.length;i++)
{
document.write(x[i].innerHTML);
document.write("<br />");
}

Objects in advance

objName.propName
objName.methodName()

Arrays

The following code creates an Array object called myCars:
1:

var myCars=new Array(); // regular array (add an optional integer
myCars[0]="Saab"; // argument to control array's size)
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW"); // condensed array

var myCars=["Saab","Volvo","BMW"]; // literal array

Note: If you specify numbers or true/false values inside the array then the variable type will be Number or Boolean, instead of String.

CREATING OBJECTS

var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

If you have a function like date and want to give diffrent pararameters depending on conditions then use
can create a object with a new key word and store it in a variable and keep assignig it different parameters

JAVASCRIPT - OBJECTS

try and catch

<html>
<head>
<script type="text/javascript">
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.description + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()" />
</body>

</html>

loop through object

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
document.write(person[x] + " ");
}

while loop

case statement

where to place java script

the if condition

variablename=(condition)?value1:value2 ;

simple and sweet

innerHTML

document.write("Hello Dolly");

above line writes any thing on page

lets add some text to tabs;

This is when you want to add some thing in between tags

like <p></p> now if you want to add your name then use innerHTML

eg :

lets give id to the p tag so that its recognized easily "

so now it becomes : <p id="test"></p>

document.getElementById("test").innerHTML="new text added by inner HTML";

Don't be greedy : this dosent mean you can type all these in single line

document.getElementById("test").innerHTML="hello";
document.getElementById("test").innerHTML="umesh";
document.getElementById("test").innerHTML="kumar";

only last one will show;

Some basics to be brushed

"Well i am eager to play , well lets know first game and rules so that we enjoy our time "

Nothing much if you wroking on client side better look I hope these small writing can help you....

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();
    });
});

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:

call a funcition on click
find elements with specific id
show and hide elemnets using css
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"