Help Full PHP + JavaScript: March 2011

Thursday, March 31, 2011

Tuesday, March 22, 2011

TO USE DIFFERENT STYLE.CSS FOR DIFFERENT BROWSER

CHANGING IMAGE ON MOUSE HOVER IN ANCHOR TAG

Below code is used to change IMAGE in anchor code on Mouse Hover.

Include Below SCRIPT:
<script language="javascript" type="text/javascript">
/**
* flip(imgName, imgSrc) sets the src attribute of a named
* image in the current document. The function must be passed
* two strings. The first is the name of the image in the document
* and the second is the source to set it to.
**/
function flip(imgName, imgSrc){
   if (document.images){
      document[imgName].src = imgSrc
   }
}
</script>

Now you code for ANCHOR Tag will be:
<a HREF="nextPage.html" onMouseOver="flip('Register', 'images/test_hover.gif')"
     onMouseOut ="flip('Register', 'images/test.gif')">
     <img src="images/test.gif" alt="Register" name="Register" width="185" border="0">
</a>

Note: Here test.gif is visible by default and test_hover image will be visible on Mouse Hover.

E-MAIL VALIDATION USING JAVASCRIPT

Below javascript is used to valid email address using Regular Expression.
function validate()
{
   //Here 'form1' is name of form. & 'email' is name of Email Text box.
   var address = document.form1.email.value;
   var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
   if(reg.test(address) == false) {
              alert('Invalid Email Address');
              document.form1.email.focus();
              return false;
            }
   return true;
}

Refreshing parent window from child window

Below Javascript is used to refresh PARENT window from CHILD window, also CHILD window will be closed.

//Call below Javascript on CLOSE button click in CHILD window
JAVASCRIPT FUNCTION:

function change_parent(){
window.opener.location.href="http:yahoo.com";
self.close();
}

Now call this Javascript on your button
onClick="change_parent();"

You will see that when you close your child window your parent page will redirect to 'yahoo.com'

ALLOW ONLY NUMERIC VALUE THROUGH JAVASCRIPT

Below JavaScript will allow only to enter numeric value in Textbox. This javascript can be used for Mobile number, Salary, Budget, etc.

Include below JavaScript
<script language="javascript" type="text/javascript">
function isNumber(field)
{
    var textbox = document.getElementById(field);
    var re = /^[0-9]*$/;
    if (!re.test(textbox.value))
    {
        textbox.value = textbox.value.replace(/[^0-9]/g,"");
    }
}
</script>

Call this fuction in HTML as given below:
<input type="text" name="test" id="test" onkeyup="isNumber('test');" />

HOW TO DISABLE HTML ATTRIBUTE USING JAVASCRIPT

Below JavaScript can be used to disable HTML Attributes during run time. (Eg: TextBox, Select Box, Check Box, Radio Button, Etc)

<script>
window.onload= function()
{
        DisableEnableForm(document.frmwitness,true);
}

function DisableEnableForm(xForm,xHow){
objElems = xForm.elements;
for(i=0;i
{
       var ck = objElems[i].type;
   if(ck=="select-one" || ck=="text")
      {
          objElems[i].disabled = xHow;
       }
   }
}
</script>

Note: You can call above function as per requirement.

COUNT NO OF LETTER IN TEXTAREA

Kindly write anything in Textbox:

Characters left Code:

HTML

TO FIND BROWSER USING JAVASCRIPT

Using below JavaScript you can get information about browser.

<script language="JavaScript" type="text/javascript">
var isIE = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false; // For IE
var isWin = (navigator.appVersion.toLowerCase().indexOf("win") != -1) ? true : false; // For Firefox
var isOpera = (navigator.userAgent.indexOf("Opera") != -1) ? true : false; // For Opera
alert(isIE);
alert(isWin);
alert(isOpera);
</script>

Get screen resolution and set style from javascript

function setLogoOnLowScreenRes()
{
if ((window.screen.width<=800))
{
//you can apply styling for screen resolution 800
document.getElementById("wrapper").style.marginLeft = "58px";
}
else if((window.screen.width<=1024))
{
//you can apply styling for screen resolution 1024
document.getElementById("wrapper").style.marginLeft = "69px";
}
}

Handle all javascript errors

Placing this code manage all javascript error from one place

window.onerror=errorhandle

function errorhandle()

{

alert('error occured');

return true

}

Countdown timer

<?php
$s = "20";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title>countdown timer</title>
<script type="text/javascript">
var countdowntimer = function() {
this.s = null;    // The seconds left in the timer
this.reset = null; // The seconds to reset the timer to
this.el = null;    // The element container used to draw the timer
this.timerId = null; // The timerId as provided by setTimeout
return {
    /**
     * initialize the timer with the number of seconds and the element that
     * will be used to draw the timer.
     * @param {integer} s The number of seconds in the timer
     * @param {HTMLElement} el The element whose contents will be replaced
     */
    init : function(s, el) {
      countdowntimer.s = s;
      countdowntimer.reset = s;
      countdowntimer.el = document.getElementById(el);
    },
    /**
     * Draw the timer and then start the countdown
     */
    start : function() {
      countdowntimer.draw();
      if (countdowntimer.s > 0) {
        countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
      }
    },
    /**
     * If the counter is counting down, stop it
     */
    stop : function() {
      if(countdowntimer.timerId) {
        clearTimeout(countdowntimer.timerId);
      }
    },
    /**
     * stop the counter if it's counting down, then reset to the initialized
     * value, and redraw the timer.
     */
    resettimer : function() {
      if(countdowntimer.timerId) {
        countdowntimer.stop();
      }
      countdowntimer.s = countdowntimer.reset;
      countdowntimer.draw();
    },
    /**
     * If the timer has reached zero, notify the user. Otherwise, decrement
     * it, draw it, and call this method again in 1 second.
     */
    step : function() {
      if (countdowntimer.s > 0) {
        countdowntimer.s--;
        countdowntimer.draw();
        countdowntimer.timerId = setTimeout(countdowntimer.step, 1000);
      }
      else {
        alert("Time's up!");
      }
    },
    /**
     * Draw the value of the timer in the container element.
     */
    draw : function() {
      countdowntimer.el.innerHTML = countdowntimer.s;
    }
};
}();
window.onload = function() {
countdowntimer.init(<?=$s;?>,'countdown');
countdowntimer.start();
document.getElementById("stopClock").onclick = function() {
    countdowntimer.stop();
};
document.getElementById("startClock").onclick = function() {
    countdowntimer.start();
};
document.getElementById("resetClock").onclick = function() {
    countdowntimer.resettimer();
};
}
</script>
</head>
<body>
<div id="countdown"></div>
<input type="button" id="stopClock" value="stop timer">
<input type="button" id="startClock" value="start timer">
<input type="button" id="resetClock" value="Reset timer">
</body>
</html>

Monday, March 21, 2011

Timers are used in web page. using timer we can execute any function or object after a set of time.

<html>
<head>
<title>
Timer Function in JavaScript
</title>
<script type="text/javascript">
function remind(msg1) {
var msg = "This is a reminder after " + msg1 +" Secs";
alert(msg);
}
</script>
</head>
<body >
<center>
<input type=radio name=rm value=no checked>No reminder
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(1)',1000)">After 1 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(2)',2000)">After 2 Secs
<input type=radio name=rm value=5000 OnClick="mytime=setTimeout('remind(5)',5000)">After 5 Secs
</center>
</body>
</html>

Help Full PHP + JavaScript

Home