PHP Web Developer, Wordpress, PHP Development India,Website Designing

Contact Us for your web development and design needs!!!!
Click here to send a proposal
PHP Web Developer, PHP Development India,Website Designing, Wordpress etc.,

php web developer in Hyderabad

Contact Us for your web development and design needs!!!!
Click here to send a proposal

Active the corresponding link in navigation menu by scrolling the content.

<script type="text/javascript">
//<![CDATA[

  $(function() {


      $(window).scroll(function() {
          var threshold = $(window).height() / 4;

          var active_section;
          var active_section_top = -Infinity;

          $(".scrolling-document-section").each(function(index, section) {
              var section_top = $(section).offset().top - $(window).scrollTop();
              if (section_top > active_section_top && section_top < threshold) {
                  active_section_top = section_top;
                  active_section = section;
              }
          });

          if (active_section) {
              $("#menu-explore-features a").removeClass("active");
              $("#menu-explore-features a[href$='#" + $(active_section).attr("id") + "']").addClass("active");
          }
      });

      $(window).scroll();
  });

//]]>
</script>

Back to Top Scroll Up

The following Javascript will go to top of the page, when the link is clicked.
// JavaScript Document

var up_timer

function getPosition(){
yoko = document.body.scrollLeft || document.documentElement.scrollLeft;
tate = document.body.scrollTop  || document.documentElement.scrollTop;

}

function pageup(x,y){
if(up_timer) clearTimeout(up_timer);
if(y >= 1){
getPosition();
var divisionY = (tate-(tate/5));
var Y = Math.floor(divisionY);
window.scrollTo(yoko,Y);
up_timer = setTimeout("pageup("+yoko+","+Y+")",2);
}else{
window.scrollTo(yoko,0);
clearTimeout(up_timer);
}
}

function scrollup(){
getPosition();
pageup(yoko,tate)
}

Javascript show hide

 Javascript show hide and change attribute value on click
<script type="text/javascript">
function uploadform()
{
    var f1=document.getElementById("frm");
    var b1=document.getElementById("btn");
    if(f1.style.display=="none")
    {
        f1.style.display="block";
        b1.setAttribute("value","Hide");
    }
    else
    {
        f1.style.display="none";
        b1.setAttribute("value","Upload");
    }
}
</script>

JavaScript Validation for required fields example

function ValidateProForm()
    {
 var sErrStr = "";
        var sFieldName = "";
        var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

        //str=document.getElementById("email_help").value;
        if(trim(document.getElementById("Pro_Fname").value)=="")
        {
            sErrStr +="- First Name \n";
            if(sFieldName == "")
                sFieldName="Pro_Fname";
        }
        if(document.getElementById("Pro_Email").value=="")
        {
            sErrStr +="- Email-Address \n";
            if(sFieldName == "")
                sFieldName="Pro_Email";
        }
        else if(document.getElementById("Pro_Email").value!='')
        {
            if(emailPattern.test(document.getElementById("Pro_Email").value)==false)
            {

                alert("Invalid Email Address");
                document.getElementById("Pro_Email").focus();
                return false;
            }
        }
        if(trim(document.getElementById("Pro_Request").value)=="")
        {
            sErrStr +="- Post your Description \n";
            if(sFieldName == "")
                sFieldName="Pro_Request";
        }
        if (sErrStr != "")
        {
            alert("Please Enter the Following fields: \n\n"+sErrStr);
            document.getElementById(sFieldName).focus();
            return false;
        }

    }

JavaScript Form validation

JavaScript form validation

<script language="javascript" >
 function userval()
{
  mErrStr="";
mFieldName="";
if(!addmembers())
{
  if(mErrStr!="")
{
alert("Following are the required fields :\n\n"+mErrStr);
for(i=0;i<document.adduser.elements.length;i++)
{
if(document.adduser.elements[i].name==mFieldName)
document.adduser.elements[i].focus();
}
return false;
}

return true;
}
}
function addmembers()
{
mErrStr="";
mFieldName="";
var formName=document.adduser;
if(formName.Name.value == "")
{
mErrStr +="First Name\n";
if(mFieldName == "")
mFieldName = "Name";
}
if(formName.Name.value!="")
      {
         if(formName.Name.value.length < 4)
      {
   mErrStr +="First Name must be at least 4 characters long\n";
       if(mFieldName == "")
  mFieldName = "Name";
      }
    }
  if(formName.LName.value == "")
{
mErrStr +="Last Name\n";
if(mFieldName == "")
mFieldName = "LName";
}
if(formName.LName.value!="")
      {
         if(formName.LName.value.length <4)
      {
   mErrStr +="Last Name must be at least 4 characters long\n";
       if(mFieldName == "")
  mFieldName = "LName";
      }
    }
if(formName.Email.value == "")
{
mErrStr +="Email\n";
if(mFieldName == "")
mFieldName = "Email";
}
 if(formName.Email.value!="")
      {
         var fn_reg=/^[A-Za-z]([A-Za-z0-9][.]?)+[@][A-Za-z0-9]{2,6}[.]([A-Za-z]{3}|[A-Za-z]{2}[.][A-Za-z]{2})$/;
        if(fn_reg.test(formName.Email.value)==false)
      {
   mErrStr +="Enter valid Email\n";
       if(mFieldName == "")
  mFieldName = "Email";
      }
    }
  if(formName.Contact.value == "")
{
mErrStr +="Contact No\n";
if(mFieldName == "")
mFieldName = "Contact";
}
if(formName.Contact.value!="")
      {
         var fn_reg=/^[0-9]{10}$/;
        if(fn_reg.test(formName.Contact.value)==false)
      {
   mErrStr +="Enter valid Contact No\n";
       if(mFieldName == "")
  mFieldName = "Contact";
      }
    }
if(formName.Loginname.value == "")
{
mErrStr +="Login name\n";
if(mFieldName == "")
mFieldName = "Loginname";
}
if(formName.Loginname.value!="")
      {
         var fn_reg=/^[A-Za-z0-9]{4,}$/;
        if(fn_reg.test(formName.Loginname.value)==false)
      {
   mErrStr +="Loginname must be at least 4 characters long\n";
       if(mFieldName == "")
  mFieldName = "Loginname";
      }
    }
if(formName.Password.value == "")
{
mErrStr +="Password\n";
if(mFieldName == "")
mFieldName = "Password";
}
if(formName.Password.value!="")
      {
         if(formName.Password.value.length < 6)
      {
   mErrStr +="Password must be at least 6 characters long\n";
       if(mFieldName == "")
  mFieldName = "Password";
      }
    }
if(formName.Cpassword.value == "")
{
mErrStr +="Confirm password\n";
if(mFieldName == "")
mFieldName = "Cpassword";
}
if(formName.Cpassword.value!="")
{
if(formName.Password.value!=formName.Cpassword.value)
{
mErrStr +="Password and Confirm Password do not match.\n";
if(mFieldName == "")
mFieldName = "Cpassword";
}
}
if(formName.Location.value == "")
{
mErrStr +="Location\n";
if(mFieldName == "")
mFieldName = "Location";
}
  if(formName.image.value != "")
 {
   var extension=formName.image.value.lastIndexOf(".");
   var imgtype=formName.image.value.substr(extension);
   if(imgtype!=".jpg" && imgtype!=".png" && imgtype!=".jpeg" && imgtype!=".gif")
   {
 mErrStr +="Upload valid Image.Ex:.jpg(or).jpeg(or).gif(or).png\n";
 if(mFieldName == "")
mFieldName = "image";
   }
      }

 }
 </script>

jQuery Tutorial

jQuery Tutorial

Running Code When the DOM is Ready

$(document).ready(function() {

// all jQuery code goes here

});

How to Select the Elements in jQuery

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

More selectores

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors.

Here are some examples:

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.)

jQuery

 What is jQuery?

jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML

 What does dollar Sign ($) means in JQuery?

 Dollar Sign is nothing but it's an alias for JQuery.

$(document).ready(function(){

});

Over here $ sign can be replaced with "jQuery " keyword.
 jQuery(document).ready(function(){

});

Why is jQuery better than javascript? 

jQuery is great library for developing ajax based application.
It helps the programmers to keep code simple and concise and reusable

Which sign does jQuery use as a shortcut for jQuery? 

$(dollar) sign.

Is jQuery a library for client scripting or server scripting?

Client scripting

Is jQuery a W3C standard?

No

What are jQuery Selectors?

Selectors are used in jQuery to find out DOM elements. Selectors can 
find the elements via ID, CSS, Element name and hierarchical position of
the element. 

What is the name of jQuery method used for an asynchronous HTTP request? 

jQuery.ajax()

How is body onload() function is different from document.ready() function

used in jQuery? 

 Document.ready() function is different from body onload()function 

because off 2 reasons.
1. We can have more than one document.ready() function in a page 

where we can have only one onload function.
2. Document.ready() function is called as soon as DOM is loaded 

where body.onload() function is called when everything gets loaded on

the page that includes DOM,images & all associated resources of the page.

What are features of JQuery or what can be done using JQuery? 

Features of Jquery
1. One can easily provide effects and can do animations.
2. Applying / Changing CSS.
3. Cool plugins.
4. Ajax support
5. DOM selection events
6. Event Handling 

Name some of the methods of JQuery used to provide effects?

Some of the common methods are :
1. Show()
2. Hide()
3. Toggle()
4. FadeIn()
5. FadeOut()

jQuery Tutorial

jQuery Tutorial

Running Code When the DOM is Ready

$(document).ready(function() {

// all jQuery code goes here

});

How to Select the Elements in jQuery

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

More selectores

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that's the first child in its list

jQuery also allows the use of its own custom selectors.

Here are some examples:

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.)